:root{color-scheme:light;--paper:#f4f1e8;--surface:#fffdf7;--ink:#233e33;--muted:#68746a;--line:#d9dece;--felt:#174c3d;--deep:#0c3027;--gold:#e9c776;--red:#b32b3c;--court:url('assets/court-v3.webp');--back:url('assets/card-back.webp')}
*{box-sizing:border-box}body{margin:0;background:var(--paper);font:14px/1.5 Inter,'Segoe UI',Arial,sans-serif;color:var(--ink)}button,select{font:inherit}button{cursor:pointer;border:1px solid var(--line);border-radius:8px;background:var(--surface);color:var(--ink);padding:10px 14px;min-height:42px;font-weight:500}button:hover:not(:disabled){filter:brightness(.95)}button:disabled{opacity:.42;cursor:default}button:focus-visible,select:focus-visible,summary:focus-visible{outline:3px solid #cc9b33;outline-offset:3px}[hidden]{display:none!important}h1,h2,p,figure{margin:0}h1{font:500 28px/1.2 Georgia,serif}h2{font-size:16px;font-weight:600}.primary{background:var(--felt);color:#fffbe9;border-color:var(--felt)}.muted{color:var(--muted);font-size:12px}.eyebrow{font-size:11px;letter-spacing:1.8px;color:var(--muted)}
#remi-app{max-width:1360px;margin:auto;background:var(--paper);min-height:100vh}.app-header{padding:18px 28px;display:flex;justify-content:space-between;align-items:center;gap:20px;border-bottom:1px solid var(--line);flex-wrap:wrap}.brand{display:flex;gap:12px;align-items:center}.brand b{font:500 25px Georgia,serif;letter-spacing:1px}.brand small{display:block;font-size:10px;letter-spacing:1.8px;color:var(--muted)}.brand-mark{width:38px;height:46px;border-radius:7px;background:var(--felt);color:var(--gold);display:grid;place-items:center;font-size:28px;transform:rotate(-6deg)}nav{display:flex;gap:5px;flex-wrap:wrap}nav button{background:transparent;border-color:transparent;min-height:38px;padding:8px 13px;font-size:13px}nav button.active{background:var(--ink);color:var(--surface)}.game-top{padding:20px 26px;display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;align-items:center}.game-top h1{font-size:24px;margin-bottom:4px}.chips{display:flex;gap:7px;flex-wrap:wrap}.chip{border:1px solid var(--line);border-radius:20px;padding:5px 10px;font-size:11px}.game-layout{display:grid;grid-template-columns:minmax(0,1fr) 190px;gap:18px;padding:0 18px 18px}.table-wrap{background:radial-gradient(ellipse at top,#245e47,var(--deep));border-radius:14px;padding:18px;color:#f8f3dc;min-width:0}.opponents{display:flex;gap:10px;justify-content:space-between}.opponent{background:#ffffff08;border:1px solid #ffffff24;border-radius:9px;flex:1;padding:10px;min-width:0}.opponent.current{border-color:var(--gold);background:#e9c77616}.opponent.dead{opacity:.6}.opponent-top{display:flex;align-items:center;gap:8px}.avatar{width:32px;height:32px;flex-shrink:0;border-radius:50%;background:#ffffff17;display:grid;place-items:center;font-size:11px}.opponent b{font-size:13px;font-weight:500}.opponent small{display:block;color:#bbd0bd;font-size:11px}.opponent-cards{display:flex;margin:12px 0 0;padding-left:8px;height:35px}.opponent-cards .back{width:24px;height:35px;flex:0 0 24px;margin-left:-8px;border:1px solid #c8b986;border-radius:3px}.back{background:#102a41 var(--back) center/cover no-repeat}.phase-bar{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;align-items:center;margin:20px 0 15px}.phase-bar strong{font-size:14px;font-weight:500}.phase-bar span{font-size:11px;color:#bed2be}.opening-table{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-bottom:14px}.opening-packet{border:1px dashed #ffffff35;border-radius:9px;padding:12px;min-height:126px}.opening-packet .packet-label{display:flex;justify-content:space-between;font-size:12px;margin-bottom:12px}.packet-cards{display:flex;gap:4px;align-items:center}.packet-cards .back{width:40px;height:60px;border:1px solid #d7cba1;border-radius:5px}.packet-empty{font-size:12px;color:#bed2be;padding:13px 0}.meld-table{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.meld{background:#ffffff08;border:1px solid #ffffff1f;border-radius:9px;padding:11px;min-width:0}.meld-header{display:flex;align-items:center;justify-content:space-between;gap:5px;font-size:11px;color:#cadbc7;margin-bottom:10px}.meld-header button{font-size:11px;min-height:28px;padding:4px 8px;border-color:#ffffff30;background:transparent;color:#f8f3dc}.meld-cards{display:flex;min-width:0;align-items:center}.table-card{width:40px;flex:0 0 40px;height:63px;border-radius:5px;background:#fffdf5;color:#19322d;border:1px solid #b7bba9;position:relative;margin-right:clamp(-23px,calc((100% - 40px * var(--n,3))/(var(--n,3) - 1)),3px);box-shadow:1px 2px 3px #0002;font-family:Georgia,serif}.table-card:last-child{margin-right:0}.red{color:var(--red)!important}.table-card .rank{position:absolute;left:4px;top:3px;font-size:16px;font-weight:600}.table-card .suit{position:absolute;right:4px;bottom:3px;font-size:21px}.table-card.court .suit{top:3px;bottom:auto;font-size:16px}.art{position:absolute;background:var(--court) no-repeat;background-size:400% 100%;background-position:var(--art-x,0%) center;aspect-ratio:2/3;pointer-events:none}.table-card .art{width:24px;left:8px;bottom:3px}.joker-label{font-size:9px;letter-spacing:.2px}.joker-value{position:absolute;bottom:2px;left:2px;background:#f2d88c;color:#49370e;font:9px 'Segoe UI',sans-serif;border-radius:2px;padding:0 2px;z-index:3}.ends{display:flex;justify-content:space-between;gap:5px;margin-top:9px}.ends button{font-size:10px;padding:4px 7px;min-height:28px;background:#ffffff08;border-color:#ffffff25;color:#dbe5ca}.drop-zone{width:100%;margin-top:15px;background:#ffffff05;color:#e8e8cd;border:1px dashed #b9cca47a;padding:18px;min-height:90px;display:flex;flex-direction:column;gap:5px;align-items:center;justify-content:center}.drop-zone strong{font-size:13px;font-weight:500}.drop-zone span{font-size:11px;color:#b9cfb9}.drop-hover{outline:3px solid var(--gold)!important;outline-offset:1px;background-color:#b4954133!important}.drop-invalid{outline-color:#e5a18c!important}.table-foot{display:flex;justify-content:space-between;gap:10px;font-size:10px;color:#b4cbb7;margin-top:15px;flex-wrap:wrap}.sidebar{padding:6px 3px}.sidebar h2{font-size:11px;text-transform:uppercase;letter-spacing:1px;margin-bottom:12px}.score-row{display:flex;justify-content:space-between;gap:8px;border-bottom:1px solid var(--line);padding:10px 0;font-size:13px}.score-row.you{color:#286248}.score-row strong{font-variant-numeric:tabular-nums}.score-row small{display:block;font-size:10px;color:var(--muted)}.sidebar ol{padding-left:16px;font-size:11px;color:var(--muted);display:grid;gap:9px;margin:0 0 20px}.sidebar h2:not(:first-child){margin-top:24px}.sidebar details{font-size:11px;border-top:1px solid var(--line);padding-top:12px}.sidebar summary{cursor:pointer;font-weight:500;color:var(--ink)}.sidebar ul{padding-left:17px;display:grid;gap:7px}
.hand-area{padding:18px 26px 22px;background:var(--surface);border-top:1px solid var(--line)}.hand-heading{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}.hand-heading h2{font-size:17px}.hand-heading h2 span{font-size:11px;font-weight:400;color:var(--muted);margin-left:8px}.hand-toolbar{display:flex;gap:6px;flex-wrap:wrap}.hand-toolbar button{font-size:11px;padding:8px 11px}.hand-guide{font-size:11px;color:var(--muted);margin-top:12px}.hand{display:flex;flex-wrap:wrap;gap:12px;margin:15px 0;align-items:start;min-height:155px}.hand-group{border:1px solid #d7decc;border-radius:10px;min-width:0;background:#f3f3e9;flex:0 1 auto;max-width:100%;padding:0 8px}.hand-group.ungrouped{flex:1 0 100%;background:transparent;border-color:transparent}.group-heading{display:flex;justify-content:space-between;gap:6px;align-items:center;padding:7px 2px;border-bottom:1px solid #dfe2d4}.group-drag{background:transparent;border:0;padding:3px 5px;font-size:11px;min-height:30px;cursor:grab;touch-action:none;flex:1;text-align:left}.group-drag span{color:var(--muted);margin-left:6px}.group-release{background:transparent;border:0;padding:3px 7px;min-height:30px;font-size:12px}.fan{position:relative;min-height:150px;isolation:isolate;user-select:none}.hand-card{position:absolute;width:var(--cw,74px);height:var(--ch,108px);background:#fffdf5;border:1px solid #b6bfa8;border-radius:7px;padding:0;transform-origin:50% 100%;transform:translateY(var(--lift,0px)) rotate(var(--angle,0deg));z-index:var(--layer,1);transition:left .15s,top .15s,transform .15s;box-shadow:-2px 3px 7px #17261c26;cursor:grab;touch-action:none;font-family:Georgia,serif;color:#19322d;min-height:0}.hand-card[aria-pressed=true]{--lift:-15px;outline:2px solid #638652;outline-offset:1px;z-index:35}.hand-card:focus-visible{z-index:40}.hand-card .corner{position:absolute;top:5px;left:6px;display:flex;flex-direction:column;gap:2px;align-items:center;font-size:19px;font-weight:600;line-height:1}.hand-card .corner small{font-size:17px}.hand-card .center-suit{position:absolute;top:48%;left:50%;transform:translate(-50%,-30%);font-size:33px}.hand-card .art{width:calc(100% - 27px);left:20px;top:50%;transform:translateY(-50%)}.hand-card .corner.bottom{left:auto;top:auto;right:5px;bottom:5px;transform:rotate(180deg);font-size:12px}.hand-card .corner.bottom small{font-size:12px}.hand-card.court{border-color:#b9a77d}.hand-card.joker{color:#825b1e}.hand-card.back{background:#102a41 var(--back) center/cover no-repeat}.action-row{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;padding-top:14px;border-top:1px solid var(--line)}#message{font-size:12px;flex:1;min-width:180px;color:var(--muted)}#message.error{color:#a72c32}.action-buttons,.claim-actions{display:flex;gap:8px;flex-wrap:wrap}.action-buttons button,.claim-actions button{font-size:12px}.claim-actions{margin-top:12px}.claim-actions button{background:#f4eddb;border-color:#ded0ad}.padded{padding:30px 26px;min-height:650px}.padded h1{margin:8px 0 25px}.round-result{margin:20px 26px;background:var(--surface);padding:26px;border:1px solid var(--line);border-radius:12px}.round-result h2{font:500 27px Georgia,serif;margin:8px 0 18px}#result-scores{display:grid;grid-template-columns:repeat(auto-fit,minmax(100px,1fr));gap:12px;margin-bottom:22px}.result-person{border-bottom:1px solid var(--line);padding-bottom:10px}.result-person b{display:block;font-size:23px;font-weight:500}.result-person small{color:var(--muted)}.history-wrap{overflow-x:auto}table{width:100%;border-collapse:collapse;font-size:13px;min-width:360px}th,td{padding:13px 10px;text-align:right;border-bottom:1px solid var(--line);font-variant-numeric:tabular-nums}th:first-child,td:first-child{text-align:left}th{font-weight:500}tfoot{background:var(--surface);font-weight:600}.setup-layout{padding:40px 34px;min-height:680px;display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}.intro h1{font-size:48px;line-height:1.1;margin:16px 0 20px}.intro h1 em{color:#487254}.intro p{color:var(--muted);max-width:350px}.intro-deck{display:flex;justify-content:center;padding:40px 0;max-width:360px}.intro-deck .back{width:100px;height:150px;border:1px solid #c3b388;border-radius:9px;margin:0 -12px;box-shadow:0 5px 12px #17261c25}.intro-deck .back:first-child{transform:rotate(-16deg) translateY(15px)}.intro-deck .back:last-child{transform:rotate(16deg) translateY(15px)}.intro-deck .back:nth-child(2){z-index:1}.setup-card{border:1px solid var(--line);background:var(--surface);border-radius:13px;padding:26px;display:grid;gap:16px;max-width:440px}.setup-card h2{font:26px Georgia,serif}.setup-card label{display:grid;gap:7px;font-size:12px;color:var(--muted)}select{border:1px solid var(--line);border-radius:7px;background:var(--paper);color:var(--ink);padding:10px;width:100%}.deck-gallery{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:18px;background:var(--felt);border-radius:14px;padding:25px 20px;margin-bottom:20px}.deck-card{background:#fffdf5;aspect-ratio:2/3;border-radius:9px;border:1px solid #c3b388;position:relative;color:#19322d;box-shadow:0 4px 10px #0003}.deck-card.back{background:#102a41 var(--back) center/cover no-repeat}.deck-card .art{width:72%;left:14%;top:50%;transform:translateY(-50%)}.deck-card .corner{position:absolute;left:7px;top:7px;display:flex;flex-direction:column;align-items:center;font:24px/1.1 Georgia,serif;z-index:1}.deck-card .corner.bottom{left:auto;top:auto;right:7px;bottom:7px;transform:rotate(180deg)}.deck-gallery figcaption{text-align:center;color:#f3eed5;font-size:12px;margin-top:11px}.deck-card.joker .corner{font-size:12px;writing-mode:vertical-rl;letter-spacing:1px}.deck-card.joker .corner small{writing-mode:horizontal-tb}footer{padding:13px 26px;border-top:1px solid var(--line);color:var(--muted);font-size:10px;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}#drag-ghost{position:fixed;top:0;left:0;z-index:9999;pointer-events:none;display:flex;gap:2px;filter:drop-shadow(0 8px 9px #0005);transform:translate(-50%,-50%)}#drag-ghost .table-card{margin-right:-12px;width:48px;flex-basis:48px;height:72px}#drag-ghost .table-card .art{width:30px;left:9px}#drag-ghost .table-card:last-child{margin-right:0}.drag-source{opacity:.3}.table-suit{font-size:16px}
@media(hover:hover){.hand-card:hover{--lift:-10px}.hand-card[aria-pressed=true]:hover{--lift:-20px}}
@media(max-width:850px){.game-layout{grid-template-columns:1fr}.sidebar{display:none}.setup-layout{gap:25px;padding:30px 22px}.opponent .avatar{display:none}.deck-gallery{grid-template-columns:repeat(3,minmax(0,1fr))}.meld-table{grid-template-columns:repeat(2,minmax(0,1fr))}.intro h1{font-size:40px}}
@media(max-width:580px){.app-header{padding:15px;gap:14px}nav{width:100%}nav button{flex:1;padding:7px;font-size:12px}.game-top{padding:16px}.game-layout{padding:0 9px 12px}.table-wrap{padding:12px}.opponents{gap:6px;flex-wrap:wrap}.opponent{padding:7px;min-width:calc(40% - 6px)}.opponent-cards{display:none}.game-top h1{font-size:23px}.hand-area{padding:16px 13px}.hand-toolbar{width:100%}.hand-toolbar button{flex:1}.opening-table,.meld-table{grid-template-columns:1fr}.packet-cards .back{width:37px;height:55px}.setup-layout{grid-template-columns:1fr;gap:20px;padding:24px 17px}.intro h1{font-size:37px}.intro-deck{display:none}.setup-card{padding:20px;max-width:none}.deck-gallery{grid-template-columns:repeat(2,minmax(0,1fr));padding:20px 14px}.padded{padding:25px 15px}.padded h1{font-size:27px}.action-buttons{width:100%}.action-buttons .primary{flex:1}.round-result{margin:16px 13px;padding:20px}.hand-guide{font-size:11px}.phase-bar{margin-top:16px}.hand-group{max-width:100%}#drag-ghost .table-card{width:37px;flex-basis:37px;height:57px}.brand small{font-size:9px}.table-foot{font-size:10px}}
.hand-card{transition:transform .15s}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}
/* One shared felt surface; each meld is a compact fan with tap-to-inspect detail. */
.table-surface{border:1px solid #ffffff27;border-radius:12px;background:#061f182b;padding:10px;min-height:138px;max-height:390px;overflow-y:auto;overscroll-behavior:contain;scrollbar-color:#879d7c66 transparent}
.meld-table{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.meld{padding:0;border:0;border-radius:8px;background:transparent;min-width:0}
.meld.focused{background:#e9c77618;box-shadow:inset 0 0 0 1px #e9c77680}
.meld-inspect{display:block;width:100%;min-width:0;border:0;border-radius:8px;background:transparent;color:#f8f3dc;padding:6px 8px;text-align:left}
.meld-header{margin:0 0 3px;font-size:11px;min-height:19px}.meld-header b{font-weight:500}.meld-count{background:#ffffff19;border-radius:9px;padding:0 6px;color:#f6efd7;flex-shrink:0}
.meld-cards{display:block;height:69px;position:relative;width:min(100%,135px);margin:0 auto;pointer-events:none}
.fan-slot{position:absolute;left:calc(var(--i) * (100% - 38px) / max(1,var(--n) - 1));top:5px;transform:rotate(var(--tilt));transform-origin:center bottom}
.fan-slot .table-card{display:block;width:38px;height:56px;margin:0}
.fan-slot .table-card .rank{font-size:14px;left:3px;top:2px}.fan-slot .table-card .suit{left:3px;right:auto;top:19px;bottom:auto;font-size:14px}.fan-slot .table-card .art{width:23px;left:12px;bottom:2px}.fan-slot .joker-label{font-size:10px!important}
.meld-owner{display:block;font-size:10px;color:#bbd0bd;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.table-empty{grid-column:1/-1;text-align:center;font-size:12px;color:#bed2be;padding:25px 5px}
.meld-detail{margin-top:8px;padding:8px;border-top:1px solid #ffffff36;background:#0d3327;border-radius:8px}
.meld-detail.drop-hover{background-color:#0d3327!important}
.detail-heading{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:12px}.detail-heading strong{font-weight:500}.detail-heading button{color:#f7f1dc;background:transparent;border:0;min-width:44px;min-height:44px;padding:0;font-size:23px}
.detail-cards{display:flex;flex-wrap:wrap;gap:4px}.detail-cards .table-card{margin:0;display:block;flex:0 0 38px;width:38px;height:58px}
.detail-actions{display:flex;gap:8px;margin-top:10px}.detail-actions button{flex:1;min-height:44px;padding:8px 5px;background:#e9c776;color:#263c29;border-color:#e9c776;font-size:12px}
.drop-zone{min-height:60px;padding:10px;margin-top:10px}.phase-bar{margin:14px 0 10px}.table-foot{margin-top:9px}.opponent{padding:7px 9px}.opponent-cards{height:26px;margin-top:7px}.opponent-cards .back{width:18px;flex-basis:18px;height:26px}
.hand{gap:8px}.hand-group{padding:0 6px}.fan{min-height:0}.hand-card[aria-pressed=true]{--lift:-9px}.group-heading{padding:2px 0}.group-drag,.group-release{min-height:40px}.hand-guide{margin-top:7px}.hand-heading h2{font-size:15px}.hand-area{padding:12px 20px}.action-row{padding-top:9px}.hand{margin:8px 0}
@media(max-width:850px){.meld-table{grid-template-columns:repeat(3,minmax(0,1fr))}.table-surface{max-height:330px}}
@media(max-width:580px){
 body{background:var(--deep)}#remi-app{min-height:100svh}.app-header{padding:8px 12px;gap:6px;flex-wrap:nowrap}.brand{gap:6px}.brand-mark{width:23px;height:30px;font-size:20px}.brand b{font-size:17px;white-space:nowrap}.brand small{display:block}nav{width:auto;gap:0;flex-wrap:nowrap}nav button{min-height:44px;font-size:11px;padding:7px 8px;flex:0 1 auto}nav button[data-view=deck]{display:none}
 .game-top{padding:6px 10px;gap:5px}.game-top h1{display:none}.game-top .muted{font-size:11px}.chips{gap:4px}.chip{border:0;padding:2px 4px;font-size:10px}.chips .chip:last-child{display:none}
 .game-layout{padding:0 5px 5px;gap:0}.table-wrap{padding:8px;border-radius:12px}.opponents{flex-wrap:nowrap;gap:4px}.opponent{padding:5px 4px;min-width:0;border-radius:7px;text-align:center}.opponent-top{justify-content:center;gap:0}.opponent b{font-size:11px}.opponent small{font-size:10px}.opponent small:last-child{font-size:9px;min-height:13px}.opponent-cards{display:none}
 .phase-bar{margin:8px 0 5px;gap:1px}.phase-bar strong{font-size:12px}.phase-bar span{font-size:10px}.table-surface{padding:5px;min-height:120px;max-height:230px;border-radius:9px}.meld-table{grid-template-columns:repeat(2,minmax(0,1fr));gap:2px 6px}.meld-inspect{padding:3px 5px}.meld-header{font-size:11px;min-height:17px}.meld-cards{height:61px;max-width:122px}.meld-owner{font-size:10px}.fan-slot .table-card{height:50px;width:34px}.fan-slot{left:calc(var(--i) * (100% - 34px) / max(1,var(--n) - 1))}.fan-slot .table-card .art{width:20px;left:11px}.fan-slot .table-card .suit{top:18px}.table-foot{font-size:9px;margin-top:5px}.drop-zone{margin-top:6px;min-height:44px;padding:6px;gap:0;border-radius:7px}.drop-zone strong{font-size:11px}.drop-zone span{font-size:10px}
 .opening-table{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;margin:0}.opening-packet{min-height:89px;padding:7px;border:0;background:#ffffff06}.opening-packet .packet-label{font-size:11px;margin-bottom:7px}.packet-cards{gap:0}.packet-cards .back{width:29px;height:43px;flex:0 0 29px;margin-right:-10px}.packet-empty{font-size:10px;padding:8px 0}
 .hand-area{padding:8px 9px calc(9px + env(safe-area-inset-bottom));border-radius:12px 12px 0 0}.hand-heading{gap:5px}.hand-heading>div:first-child{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.hand-heading h2{font-size:13px}.hand-heading h2 span{margin-left:5px;font-size:10px}.hand-heading .muted{font-size:10px}.hand-toolbar{width:100%;gap:5px}.hand-toolbar button{font-size:11px;min-height:44px;padding:6px 3px}.hand-guide{font-size:10px;margin-top:5px}
 .hand{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:start;gap:5px;margin:4px 0;max-height:235px;overflow-y:auto;overscroll-behavior:contain;padding:0 1px 3px}.hand-group{width:auto!important;max-width:100%;padding:0 3px;border:0;border-radius:6px;background:#eef0e5}.hand-group.ungrouped{grid-column:1/-1}.group-heading{min-height:30px;padding:0}.group-heading>.muted{font-size:10px}.group-drag{padding:0 2px;font-size:11px;min-height:44px;line-height:1.2}.group-drag span{display:none}.group-release{min-height:44px;min-width:35px;padding:0;font-size:18px}.ungrouped .group-heading{min-height:20px;border-bottom:0}
 .hand-card{border-radius:5px}.hand-card .corner{left:3px;top:4px;font-size:15px;gap:1px}.hand-card .corner small{font-size:13px}.hand-card .corner.bottom{font-size:10px;right:3px;bottom:3px}.hand-card .corner.bottom small{font-size:10px}.hand-card .center-suit{font-size:25px}.hand-card .art{width:calc(100% - 20px);left:17px}.hand-card[aria-pressed=true]{outline:2px solid #d2a235;z-index:40}
 .action-row{padding-top:6px;gap:5px}.action-buttons{gap:6px}.action-buttons button{min-height:44px;font-size:12px;padding:7px 10px}#message{font-size:10px;min-width:0;flex-basis:100%;line-height:1.3}.claim-actions{margin-top:6px;gap:5px}.claim-actions button{font-size:11px;min-height:44px;padding:6px;flex:1}.round-result{margin:8px;padding:14px}.round-result h2{font-size:23px}footer{padding:7px 10px;font-size:9px}select{font-size:16px}.setup-layout{min-height:0;padding:20px 14px}.setup-card label{font-size:13px}
}
@media(max-width:350px){nav button{padding:6px;font-size:10px}.brand b{font-size:15px}.brand-mark{display:none}.hand-heading h2 span{display:block;margin-left:0}.opponent b{font-size:10px}}
/* Keep neighboring card corners tappable after selecting adjacent cards. */
.hand-card[aria-pressed=true]{z-index:var(--layer,1)}
/* Hand groups use small, tightly overlapped fans instead of full-sized cards. */
.hand-group:not(.ungrouped){padding:0 4px}
.hand-group:not(.ungrouped) .group-heading{gap:2px;border-bottom:0}
.hand-group:not(.ungrouped) .group-drag{font-size:11px;padding:0 2px;min-width:0}
.hand-group:not(.ungrouped) .group-drag span{display:none}
.hand-group:not(.ungrouped) .group-release{padding:0;min-width:28px}
.hand-group:not(.ungrouped) .hand-card{border-radius:4px;box-shadow:-1px 2px 4px #17261c26}
.hand-group:not(.ungrouped) .hand-card .corner{left:2px;top:3px;font-size:13px;gap:1px}
.hand-group:not(.ungrouped) .hand-card .corner small{font-size:11px}
.hand-group:not(.ungrouped) .hand-card .corner.bottom{left:auto;top:auto;right:2px;bottom:2px;font-size:9px}
.hand-group:not(.ungrouped) .hand-card .corner.bottom small{font-size:9px}
.hand-group:not(.ungrouped) .hand-card .center-suit{font-size:22px}
.hand-group:not(.ungrouped) .hand-card .art{left:13px;width:calc(100% - 15px)}
.hand-group:not(.ungrouped) .hand-card[aria-pressed=true]{--lift:-6px}
@media(max-width:580px){
 .hand{grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:5px}
 .hand-group:not(.ungrouped) .hand-card .corner{font-size:12px}
 .hand-group:not(.ungrouped) .hand-card .corner small{font-size:10px}
 .hand-group:not(.ungrouped) .hand-card .center-suit{font-size:19px}
}
/* Keep board and hand in the same viewport while a round is in progress. */
#remi-app.in-game{height:100dvh;min-height:0;display:flex;flex-direction:column;overflow:hidden}
.in-game>.app-header{flex:none}.in-game>footer{display:none}
.in-game #game-view{display:flex;flex-direction:column;flex:1;min-height:0;overflow:hidden}
.in-game .game-top{flex:none;padding-top:8px;padding-bottom:8px}
.in-game .game-layout{flex:1;min-height:0;padding-bottom:6px}
.in-game .table-wrap{display:flex;flex-direction:column;min-height:0;overflow:hidden}
.in-game .opponents,.in-game .phase-bar,.in-game .drop-zone,.in-game .table-foot{flex:none}
.in-game .sidebar{min-height:0;overflow-y:auto}
.in-game .table-surface{position:relative;flex:1;min-height:0;max-height:none;overflow:hidden}
.in-game .meld-table{height:100%;grid-template-columns:repeat(var(--columns,2),minmax(0,1fr));grid-auto-rows:minmax(0,1fr);gap:4px;align-content:stretch}
.in-game .meld{min-height:0}
.in-game .meld-inspect{height:100%;min-height:0;display:flex;flex-direction:column;justify-content:center;overflow:hidden}
.in-game .meld-header{width:100%;flex:none;gap:3px}.in-game .meld-header b{min-width:0}
.in-game .meld-cards{flex:none}.in-game .meld-owner{width:100%;flex:none}
.in-game .opening-table{height:100%;min-height:0;margin:0;grid-auto-rows:minmax(0,1fr);gap:5px}
.in-game .opening-packet{min-height:0;overflow:hidden;padding:6px}
.in-game .opening-packet .packet-label{margin-bottom:4px}
.in-game .packet-cards{height:calc(100% - 23px);max-height:60px}
.in-game .packet-cards .back{height:100%;max-height:60px;min-height:18px}
.in-game .meld-detail{position:absolute;inset:0;margin:0;border:0;border-radius:8px;z-index:5;display:flex;flex-direction:column;padding:8px;overflow:hidden}
.in-game .detail-heading,.in-game .detail-actions{flex:none}
.in-game .detail-cards{flex:1;min-height:0;overflow:auto;align-content:start}
.in-game .hand-area{height:clamp(230px,38dvh,350px);min-height:0;flex:none;display:flex;flex-direction:column}
.in-game .hand-heading,.in-game .hand-guide,.in-game .action-row,.in-game .claim-actions{flex:none}
.in-game .hand{flex:1;min-height:0;max-height:none;overflow-y:auto;overscroll-behavior:contain;align-content:start;padding:3px 2px}
@media(max-width:580px){
 .in-game .hand-area{height:clamp(270px,43dvh,365px);padding-top:5px;padding-bottom:max(5px,env(safe-area-inset-bottom))}
 .in-game .hand-guide{display:none}.in-game .hand-heading{gap:3px}
 .in-game .hand-toolbar button{min-height:40px}.in-game .action-row{gap:3px;padding-top:4px}
 .in-game #message{font-size:10px;max-height:28px;overflow-y:auto}
 .in-game .claim-actions{margin-top:3px}.in-game .claim-actions button{min-height:40px}
 .in-game .game-top{padding-top:3px;padding-bottom:3px}
 .in-game .table-foot{display:none}.in-game .phase-bar{margin:5px 0;gap:0}
 .in-game .phase-bar span{font-size:9px}.in-game .drop-zone{margin-top:5px}
 .in-game .meld-header{font-size:10px}
 .in-game .opening-packet .packet-label{font-size:10px}.in-game .packet-empty{padding:0}
}
@media(max-height:650px) and (min-width:581px){
 .in-game .app-header{padding:4px 12px}.in-game .game-top h1,.in-game .opponent-cards{display:none}
 .in-game .table-wrap{padding:7px}.in-game .phase-bar{margin:4px 0}.in-game .table-foot{display:none}
 .in-game .hand-area{height:205px;padding:5px 14px}.in-game .hand-guide{display:none}
 .in-game .drop-zone{min-height:44px;padding:4px;margin-top:4px}
}
@media(max-width:580px) and (max-height:700px){
 .in-game .hand-area{height:43dvh;min-height:230px}
 .in-game .opponent small:last-child,.in-game .phase-bar span,.in-game .drop-zone span{display:none}
 .in-game .opponent{padding-top:4px;padding-bottom:4px}
}
@media(min-width:581px) and (max-height:500px){
 .in-game #game-view{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);grid-template-rows:auto minmax(0,1fr)}
 .in-game .game-top{grid-column:1/-1;grid-row:1}
 .in-game .game-layout{grid-column:1;grid-row:2;padding:0 5px 5px;grid-template-columns:minmax(0,1fr)}
 .in-game .sidebar{display:none}
 .in-game .hand-area{grid-column:2;grid-row:2;height:auto;padding:5px 8px}
 .in-game .hand-heading{gap:3px}.in-game .hand-toolbar{width:100%;gap:4px}
 .in-game .hand-toolbar button{flex:1;padding:4px;font-size:11px;min-height:36px}
 .in-game .hand-heading>div:first-child{display:flex;align-items:center;gap:6px}
 .in-game .hand-heading h2{font-size:13px}.in-game .hand-heading .muted{font-size:10px}
 .in-game .hand{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:4px;margin:4px 0}
 .in-game .hand-group{width:auto!important}.in-game .ungrouped{grid-column:1/-1}
 .in-game .opponent-cards,.in-game .opponent .avatar,.in-game .opponent small:last-child,.in-game .phase-bar span{display:none}
 .in-game .opponent b{font-size:11px}.in-game .opponent small{font-size:10px}
 .in-game .opponent{padding:3px 5px}.in-game .phase-bar strong{font-size:12px}
 .in-game .action-row{gap:3px;padding-top:3px}.in-game #message{font-size:10px;flex-basis:100%;min-width:0;max-height:24px;overflow:auto}
 .in-game .action-buttons{width:100%;gap:5px}.in-game .action-buttons button{font-size:11px;min-height:36px;padding:5px}
 .in-game .action-buttons .primary{flex:1}.in-game .claim-actions{margin-top:3px}.in-game .claim-actions button{font-size:10px;min-height:36px;padding:5px}
}

/* Keep every card face on the table, scaling the fan to the available cell. */
.in-game .meld-inspect{padding:var(--tile-padding,3px) 4px}
.in-game .meld-header{font-size:var(--table-label-size,11px);line-height:1;min-height:var(--table-header-h,16px);height:var(--table-header-h,16px);margin:0 0 1px;white-space:nowrap}
.in-game .meld-table.narrow-melds .meld-header{font-size:var(--table-label-size,10px)}
.in-game .meld-table.narrow-melds .meld-range{display:none}
.in-game .meld-table.narrow-melds .meld-count{padding:0 2px}
.in-game .meld-table.dense .meld-owner{display:none}
.in-game .meld-cards{display:block;height:calc(var(--table-card-h,50px) + 2 * var(--table-inset,3px));width:100%;max-width:135px;min-height:0}
.in-game .fan-slot{left:calc(var(--i) * (100% - var(--table-card-w,34px)) / max(1,var(--n) - 1));top:var(--table-inset,3px)}
.in-game .fan-slot .table-card{width:var(--table-card-w,34px);height:var(--table-card-h,50px);border-radius:3px;border-width:.5px;overflow:hidden}
.in-game .fan-slot .table-card .rank{font-size:var(--table-rank-size,13px);top:1px;left:1px;line-height:1}
.in-game .fan-slot .table-card .joker-label{font-size:var(--table-rank-size,13px)!important}
.in-game .fan-slot .table-card .suit{font-size:var(--table-rank-size,13px);top:calc(var(--table-rank-size,13px) + 2px);left:1px;line-height:1}
.in-game .fan-slot .table-card .art{width:60%;left:37%;bottom:1px}
.in-game .fan-slot .table-card .joker-value{font-size:6px;line-height:1}

.in-game .meld-table{grid-template-rows:repeat(var(--rows,1),minmax(0,1fr));grid-auto-flow:row dense}
.in-game .meld{grid-column:span var(--span,1)}
.in-game .meld-table.narrow-melds .wide-meld .meld-range{display:inline}
.in-game .wide-meld .meld-cards{max-width:none}
.in-game .wide-meld .fan-slot .rank,.in-game .wide-meld .fan-slot .suit{font-size:min(11px,var(--table-rank-size,11px))}
.room-forms{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:18px;max-width:850px}.room-panel{padding:20px;background:var(--surface);border:1px solid var(--line);border-radius:12px;display:grid;gap:14px}.room-panel label,.room-name{display:grid;gap:6px;font-size:12px}.room-name{max-width:400px;margin-top:18px}.room-panel input,.room-name input{width:100%;padding:10px;border:1px solid var(--line);border-radius:7px;background:var(--paper);color:var(--ink);font:16px 'Segoe UI',sans-serif;min-height:44px}.room-lobby-heading,.room-member{display:flex;align-items:center;justify-content:space-between;gap:10px}.room-member{padding:12px 0;border-bottom:1px solid var(--line);font-size:13px}.room-member strong{font-size:11px;font-weight:500}.room-actions{display:flex;gap:8px;flex-wrap:wrap}#room-lobby{max-width:800px;margin-top:20px}#room-status{font-size:13px;color:var(--muted)}#room-status.error{color:var(--red)}.room-entry{background:#e9eddf}.room-actions button{min-height:44px}
@media(max-width:580px){.room-forms{grid-template-columns:1fr}.room-panel{padding:15px}.room-actions button{flex:1}.room-member{font-size:12px}.app-header{gap:3px}nav button{padding-left:6px;padding-right:6px}}
/* Groups float in a separate tray above the loose fan; neither layer scrolls. */
.mobile-menu-control{display:none}
.in-game .hand-card{overflow:hidden}
.hand-groups{display:grid;grid-template-columns:repeat(var(--group-columns,3),minmax(0,1fr));grid-template-rows:repeat(var(--group-rows,1),minmax(0,1fr));gap:5px;min-width:0;min-height:0;padding:5px;background:#e8ecdf;border:1px solid #d6ddcb;border-radius:12px;box-shadow:0 5px 12px #173e3324;position:relative;z-index:2}
.hand-groups .hand-group{width:auto!important;min-height:0;display:flex;flex-direction:column;background:#fffdf7b3;border:0}
.hand-groups .group-heading{flex:none;height:var(--group-heading-h,28px);min-height:var(--group-heading-h,28px);padding:0;gap:0}
.hand-groups .group-drag,.hand-groups .group-release{min-height:var(--group-heading-h,28px);height:var(--group-heading-h,28px);padding:0 2px;font-size:11px}
.hand-groups .group-release{min-width:24px;font-size:17px}
.hand-groups .group-drag{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hand-groups .fan{flex:1;min-height:0}
.in-game .hand{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr);align-items:stretch;align-content:stretch;gap:7px;overflow:visible;min-height:0;padding:3px 2px;margin:4px 0}
.in-game .hand.has-groups.has-loose{grid-template-rows:minmax(0,var(--group-share,2fr)) minmax(0,var(--loose-share,1fr))}
.in-game .hand-group.ungrouped{display:flex;flex-direction:column;min-height:0;grid-column:auto;padding:0;background:transparent}
.in-game .ungrouped .group-heading{min-height:16px;height:16px;padding:0;flex:none}
.in-game .ungrouped .fan{flex:1;min-height:0}
.in-game .hand-area{height:clamp(290px,46dvh,440px)}
.in-game .hand-card.tiny-card{overflow:hidden}
.in-game .hand-card.tiny-card .corner{font-size:clamp(6px,calc(var(--ch)*.4),10px);top:1px;left:1px;gap:0}
.in-game .hand-card.tiny-card .corner small{font-size:clamp(5px,calc(var(--ch)*.35),9px)}
.hand-card.tiny-card .corner.bottom,.hand-card.tiny-card .center-suit{display:none}
.hand-card.tiny-card .art{left:9px;width:calc(100% - 10px)}
@media(max-width:1180px),(max-height:500px),(pointer:coarse){
 #remi-app.in-game{position:relative;padding-top:env(safe-area-inset-top)}
 .in-game>.app-header,.in-game .game-top{display:none}
 .in-game.menu-open>.app-header{display:flex;position:absolute;inset:env(safe-area-inset-top) 5px auto;z-index:100;background:var(--surface);padding:12px;border-radius:0 0 12px 12px;box-shadow:0 10px 24px #08271c55;flex-wrap:wrap;gap:8px;padding-right:44px}
 .in-game.menu-open>.app-header nav{display:flex;width:100%;flex-wrap:wrap}
 .in-game.menu-open>.app-header nav button{min-height:44px}
 .in-game .mobile-menu-control{display:block}
 #mobile-menu-close{position:absolute;right:4px;top:4px;min-width:36px;height:36px;padding:0;font-size:24px}
 .in-game .phase-bar{position:relative;min-height:36px;justify-content:center;align-items:flex-start;flex-direction:column;padding-right:44px}
 #mobile-menu-toggle{position:absolute;right:0;top:0;min-width:40px;min-height:36px;padding:0;background:#ffffff12;border-color:#ffffff30;color:#fff7dc;font-size:22px}
 .in-game .hand-area{height:clamp(290px,49dvh,440px);padding:6px 9px max(5px,env(safe-area-inset-bottom))}
 .in-game .hand-toolbar button{min-height:36px;padding:4px;font-size:11px}
 .in-game .hand-guide{display:none}
 .in-game .hand-heading{gap:2px}
 .in-game .hand-heading>div:first-child{display:flex;align-items:center;gap:8px;flex-wrap:nowrap}
 .in-game .hand-heading h2{font-size:12px;white-space:nowrap}
 .in-game .hand-heading h2 span{display:inline;margin-left:4px}
 .in-game #hand-count{font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:55vw}
 .in-game .action-row{gap:2px;padding-top:3px}
 .in-game #message:empty{display:none}
 .in-game #message{font-size:10px;line-height:1.2;max-height:24px;overflow:hidden}
 .in-game .action-buttons button,.in-game .claim-actions button{min-height:36px;padding:4px}
 .in-game .claim-actions{margin-top:3px}
}
@media(max-width:580px) and (max-height:700px){
 .in-game .hand-area{height:55dvh;min-height:280px}
 .in-game .opponent small:last-child,.in-game .phase-bar>span,.in-game .drop-zone span{display:none}
 .in-game .opponent{padding-top:3px;padding-bottom:3px}
 .in-game .drop-zone{min-height:36px}
}
@media(max-height:500px) and (min-width:581px){
 .in-game #game-view{grid-template-rows:minmax(0,1fr)}
 .in-game .game-layout,.in-game .hand-area{grid-row:1}
 .in-game .hand-area{height:auto;min-height:0}
}

/* Pack melds together at the top; spare table space stays below the cards. */
.in-game .meld-table{grid-template-columns:repeat(var(--columns,2),minmax(0,var(--table-tile-w,132px)));grid-template-rows:repeat(var(--rows,1),minmax(0,var(--table-row-h,104px)));align-content:start;justify-content:start}
.in-game .meld-inspect{justify-content:flex-start}
.in-game .meld-cards{--fan-step:min(14px,calc(var(--table-card-w,34px)*.55));width:min(100%,calc((var(--n) - 1)*var(--fan-step) + var(--table-card-w,34px)));max-width:none}

/* Tablet and unfolded phones need a real two-panel board in landscape. */
@media (min-width:650px) and (max-width:1180px) and (min-aspect-ratio:6/5), (min-width:650px) and (pointer:coarse) and (min-aspect-ratio:6/5){
 .in-game #game-view{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);grid-template-rows:minmax(0,1fr)}
 .in-game .game-layout{grid-column:1;grid-row:1;grid-template-columns:minmax(0,1fr);padding:0 5px 5px;min-width:0}
 .in-game .hand-area{grid-column:2;grid-row:1;height:auto;min-height:0;min-width:0;padding:6px 8px max(5px,env(safe-area-inset-bottom))}
 .in-game .sidebar,.in-game .opponent-cards,.in-game .opponent .avatar,.in-game .table-foot{display:none}
 .in-game .table-wrap{padding:7px}
 .in-game .opponents{gap:4px;flex-wrap:nowrap}
 .in-game .opponent{padding:4px;min-width:0}
 .in-game .opponent b{font-size:11px}.in-game .opponent small{font-size:10px}
 .in-game .hand-toolbar{width:100%;gap:4px}
 .in-game .hand-toolbar button{flex:1;min-width:0;padding:4px}
 .in-game .action-buttons{width:100%;gap:5px}.in-game .action-buttons .primary{flex:1}
 .in-game .action-buttons button,.in-game .claim-actions button{font-size:11px}
 .in-game .claim-actions{flex-wrap:nowrap}.in-game .claim-actions button{flex:1;min-width:0}
 .in-game .drop-zone{min-height:44px;margin-top:5px;padding:5px}
 .in-game #hand-count{max-width:25vw}
}
@media(max-width:1180px),(pointer:coarse){
 .in-game .game-layout{grid-template-columns:minmax(0,1fr)}
 .in-game .sidebar{display:none}
}

@media(max-width:1180px),(pointer:coarse){
 .in-game .opponent-cards,.in-game .table-foot{display:none}
 .in-game .table-wrap{padding:8px}
 .in-game .phase-bar{margin-top:8px;margin-bottom:8px}
}
/* The result is a dismissible modal; the completed table stays in place. */
.round-result{position:fixed;inset:0;margin:auto;width:min(480px,calc(100vw - 24px));max-height:calc(100dvh - 24px);overflow:auto;padding:24px;color:var(--ink);box-shadow:0 18px 60px #001e2c66}
.round-result::backdrop{background:#082c27aa;backdrop-filter:blur(3px)}
.round-result h2{font-size:24px;line-height:1.25}
#result-scores{grid-template-columns:1fr;gap:0;margin-bottom:18px}
.result-person{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 16px;align-items:center;padding:12px 0}
.result-person b{font-size:23px;grid-column:2;grid-row:1 / span 2}
.result-person small{grid-column:1}
.result-actions{display:flex;gap:8px;margin-top:16px}.result-actions button{min-height:44px}.result-actions .primary{flex:1}
#show-result,#table-next-round{background:#fff8e5;color:#214239;padding:5px 10px;min-height:32px}
@media(max-width:580px){.round-result{padding:18px}.round-result h2{font-size:21px}}

.result-leave{display:block;width:100%;margin-top:8px;min-height:36px;color:var(--muted)}

#turn-clock{font-variant-numeric:tabular-nums;color:#f4d58f;font-size:12px}
.turn-alert{position:absolute;z-index:20;left:5px;right:5px;bottom:5px;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 12px;border:1px solid #e5ad59;border-radius:9px;background:#fff0cf;color:#5d390f;box-shadow:0 3px 14px #0004;font-size:12px;font-weight:600;pointer-events:none}
.turn-alert.afk{background:#edf3e6;border-color:#acbda1;color:#214239}
.turn-alert button{pointer-events:auto;min-height:40px;flex:none;font-size:12px;padding:6px 10px}


/* Transparent bottom hand floats over one continuous, dominant felt table. */
#remi-app.in-game{--hand-height:clamp(230px,38dvh,320px);background:var(--felt)}
.in-game #game-view{position:relative;display:flex;flex-direction:column;background:var(--felt)}
.in-game .game-layout{display:grid;grid-template-columns:minmax(0,1fr);grid-column:auto;grid-row:auto;padding:0 6px var(--hand-height);min-height:0;width:100%;flex:1}
.in-game .sidebar{display:none}
.in-game .table-wrap{border:0;border-radius:0;background:transparent;padding:8px;box-shadow:none}
.in-game .hand-area{position:absolute;inset:auto 0 0;height:var(--hand-height);min-height:0;padding:5px 10px max(6px,env(safe-area-inset-bottom));border:0;background:transparent;z-index:30;color:#fff8df}
.in-game .hand-guide{display:none}
.in-game .hand-heading{gap:3px;flex:none}
.in-game .hand-heading>div:first-child{display:flex;gap:6px;align-items:center}
.in-game .hand-heading h2{font-size:12px;white-space:nowrap}
.in-game #hand-count,.in-game #you-status{font-size:10px;color:#d8e1c8;max-width:none}
.in-game .hand-toolbar{display:flex;align-items:center;flex-wrap:wrap;width:100%;gap:4px}
.in-game .hand-toolbar button{flex:1 1 auto;min-height:30px;font-size:10px;padding:4px 7px;border-color:#d0dfbb55;background:#153f34d9;color:#fff6dc;white-space:nowrap}
.in-game .hand-toolbar button:disabled{color:#b0bda1;background:#173e33a0;opacity:.6}
.in-game .claim-actions{display:contents}
.in-game .hand-message{font-size:10px;line-height:1.15;color:#d8e1c8;min-width:0;flex:none;max-height:23px;overflow:hidden}
.in-game .hand-message.error{color:#ffd2a0}
.in-game .hand{display:flex;flex-direction:column;gap:4px;position:relative;justify-content:flex-end;margin:3px 0;padding:2px 0;min-height:0}
.in-game .hand-groups{display:grid;grid-template-columns:repeat(var(--group-columns,4),minmax(0,1fr));grid-template-rows:repeat(var(--group-rows,1),minmax(0,1fr));gap:4px;padding:0;flex:none;min-height:0;background:transparent;border:0;box-shadow:none;z-index:2;position:relative}
.in-game .hand-groups .hand-group{display:flex;flex-direction:column;min-height:0;width:auto!important;padding:0 3px;background:#092f252e;border:1px solid #a5ba9140;border-radius:9px}
.in-game .hand-groups .group-heading{display:flex;flex:none;height:var(--group-heading-h,16px);min-height:var(--group-heading-h,16px);padding:0;gap:0;border:0}
.in-game .hand-groups .group-drag{display:flex;align-items:center;justify-content:space-between;gap:3px;flex:1;min-width:0;height:var(--group-heading-h,16px);min-height:var(--group-heading-h,16px);padding:0 2px;background:transparent;border:0;color:#f7efd6;box-shadow:none;white-space:nowrap;overflow:hidden;line-height:1;font-size:9px}
.in-game .hand-groups .group-drag b{font-weight:500;overflow:hidden;text-overflow:ellipsis}
.in-game .hand-groups .group-drag span{display:inline;margin:0;color:#c8d9b3;font-size:8px}
.in-game .hand-groups .group-release{font-size:13px;min-width:18px;min-height:var(--group-heading-h,16px);height:var(--group-heading-h,16px);padding:0;color:#c8d9b3;background:transparent;border:0}
.in-game .hand-groups .fan{display:block;position:relative;flex:1;min-height:0;height:auto;transform:none;background:transparent;border:0;box-shadow:none}
.in-game .hand-group.ungrouped{flex:1;min-height:0;width:100%}
.in-game .ungrouped .group-heading .muted{color:#d8e1c8;font-size:10px}
@media(max-height:600px) and (min-width:650px){#remi-app.in-game{--hand-height:clamp(150px,40dvh,220px)}}
@media(max-height:500px){
 .in-game .opponent small:last-child,.in-game .phase-bar>span,.in-game .drop-zone span{display:none}
 .in-game .phase-bar{min-height:32px;margin-top:4px;margin-bottom:4px}
 .in-game .drop-zone{min-height:32px;margin-top:4px;padding:4px}
 .in-game .opponent{padding:3px 5px}
}

/* The empty felt itself accepts new combinations without a separate drop panel. */
.in-game .table-surface.drop-hover{outline-offset:-3px;background-color:#d8b96812!important}
.in-game .table-surface:focus-visible{outline:2px solid var(--gold);outline-offset:-2px}

/* Keep recent moves on the right without covering cards or accepting drops. */
.in-game .table-surface{--history-width:clamp(90px,22vw,170px)}
.in-game .table-surface.history-collapsed{--history-width:30px}
.in-game .table-surface>.table-viewport,.in-game .table-surface>.opening-table{width:calc(100% - var(--history-width) - 8px)}
.table-history{position:absolute;right:5px;top:5px;bottom:5px;width:var(--history-width,170px);display:flex;flex-direction:column;min-height:0;border-left:1px solid #c6d7b72b;padding-left:7px;color:#c7d8bf;z-index:2}
#toggle-history{flex:none;width:100%;min-height:30px;padding:3px 4px;color:#f7ebca;font-size:11px;text-align:left;background:transparent;border:0;white-space:nowrap}
#activity{list-style:none;padding:0 2px 0 0;margin:0;overflow:auto;min-height:0;overscroll-behavior:contain;scrollbar-width:thin;font-size:11px;line-height:1.4;overflow-wrap:anywhere}
#activity li{padding:7px 0;border-bottom:1px solid #c6d7b71a}
#activity li:first-child{color:#fff2c9}
.history-collapsed .table-history{padding-left:0;border:0;bottom:auto}
.history-collapsed #toggle-history{font-size:22px;text-align:center}
@media(max-width:580px){#activity{font-size:9px;line-height:1.35}#activity li{padding:5px 0}#toggle-history{font-size:10px}.history-collapsed #toggle-history{font-size:22px}}

/* Compact, readable chrome on the same green surface as the game. */
.app-header{padding:10px 16px;gap:10px;background:#123d32;color:#fff6dd;border-bottom:1px solid #d3c4912b}
.brand{gap:8px}.brand b{font:600 20px/1.1 Georgia,serif;color:#fff6dd}
.brand small{font-size:10px;line-height:1.3;letter-spacing:.3px;color:#d4dfc8;margin-top:3px}
.brand-mark{width:28px;height:32px;border-radius:7px;background:#ffffff08;color:#e8c578;font-size:24px;transform:none}
.app-header nav{gap:3px}.app-header nav button{min-height:32px;padding:6px 11px;font-size:12px;color:#dce6ce;border-radius:7px}
.app-header nav button:hover{background:#ffffff0d;color:#fff9e8}
.app-header nav button.active{background:#e5c98a;color:#173e32;border-color:#e5c98a}
.in-game.menu-open>.app-header{background:#123d32;border:1px solid #d3c49140;color:#fff6dd}
#mobile-menu-close{color:#fff6dd;background:transparent;border:0}
.in-game .game-top{padding:5px 14px;gap:8px;align-items:center;border-bottom:1px solid #d3c4911a;color:#dce6ce}
.in-game .game-top h1{display:none}.in-game .game-top p{font-size:11px;color:#dce6ce;margin:0}
.in-game .chips{gap:5px}.in-game .chip{padding:3px 8px;border:1px solid #d0dfbb30;background:#ffffff04;color:#dce6ce;font-size:10px;line-height:1.2}
.in-game .opponents{gap:5px;flex-wrap:nowrap}
.in-game .opponent{padding:5px 8px;border-radius:8px;background:#ffffff04;border-color:#d1dfbd25;min-width:0}
.in-game .opponent.current{border-color:#d5bc78;background:#e9c77612}
.in-game .opponent .avatar,.in-game .opponent-cards{display:none}
.in-game .opponent b{font-size:11px;color:#fff4d7;line-height:1.25}
.in-game .opponent small{font-size:10px;line-height:1.25;color:#c4d6bb}
.in-game .phase-bar{margin:7px 0;gap:4px;min-height:32px}
.in-game .phase-bar strong{font-size:12px;color:#fff1cc}
.in-game .phase-bar span{font-size:10px;color:#c4d6bb}
.in-game .hand-toolbar button{border-radius:6px}
.in-game .hand-groups .hand-group{border-color:#b6c99d30;background:#092f251c}
@media(min-width:900px){
 .in-game .hand-heading{flex-wrap:nowrap}
 .in-game .hand-toolbar{width:auto;flex:1;margin-left:8px;justify-content:flex-end}
 .in-game .hand-toolbar button{flex:0 1 auto;padding:5px 9px;min-height:30px}
}
@media(min-width:900px) and (min-height:601px){#remi-app.in-game{--hand-height:260px}}
@media(max-width:580px){
 .app-header{padding:10px 12px}.brand b{font-size:19px}.brand small{font-size:9px}
 .app-header nav{width:100%;gap:2px}.app-header nav button{padding:6px 8px;font-size:11px}
 .in-game .opponent{padding:4px 5px}.in-game .opponent b{font-size:10px}.in-game .opponent small{font-size:9px}
}
.in-game .table-foot{display:none}
.in-game .meld-detail{inset:auto 6px 6px auto;width:min(420px,calc(100% - 12px));max-height:calc(100% - 12px);height:auto;border:1px solid #b9cba64d;box-shadow:0 8px 24px #001c244d;border-radius:10px}
.in-game .detail-heading button{min-height:30px;height:30px;min-width:30px;font-size:21px}
.in-game .detail-cards{flex:0 1 auto;max-height:126px}
.in-game .detail-actions{margin-top:7px;gap:6px}
.in-game .detail-actions button{min-height:34px;padding:5px 8px;font-size:11px;border-radius:6px}

/* Account controls stay outside the playing surface. */
#remi-app .account-trigger{max-width:140px}#remi-app [data-account-label]{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#remi-app .account-dialog{width:min(400px,calc(100vw - 28px));max-height:calc(100dvh - 32px);box-sizing:border-box;margin:auto;padding:24px;border:1px solid #b7c5ae;border-radius:20px;background:#faf9f1;color:#18392e;box-shadow:0 20px 70px #001b1950;overflow:auto}
.account-dialog::backdrop{background:#071c16a6;backdrop-filter:blur(4px)}.account-heading{display:flex;justify-content:space-between;align-items:center;gap:12px}.account-heading h2{margin:0;font-size:22px}.account-heading button{font-size:24px;padding:3px 12px}.account-dialog p{font-size:14px;line-height:1.55}.account-dialog .error{color:#9d2f2f}.account-person{display:flex;align-items:center;gap:12px;margin:20px 0 12px;min-width:0}.account-person img{width:48px;height:48px;border-radius:50%;object-fit:cover}.account-person div{min-width:0}.account-person p{margin:4px 0;overflow-wrap:anywhere}.account-dialog small{overflow-wrap:anywhere;color:#5b6b60;font-size:11px}.account-actions{display:flex;flex-wrap:wrap;gap:8px;margin:20px 0}.account-actions button{min-height:42px}.account-privacy{font-size:12px;color:#40684f}#google-signin{min-height:44px;max-width:100%;overflow:hidden}.room-account{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 0;margin-bottom:14px;border-bottom:1px solid #cfd6c8;font-size:13px}.room-account button{max-width:180px}.account-dialog [hidden]{display:none!important}

.public-rooms{margin:16px 0 24px;padding:16px;border:1px solid #cbd4c4;border-radius:14px;background:#eef1e7}.public-rooms-heading{display:flex;align-items:center;justify-content:space-between;gap:12px}.public-rooms-heading h2{font-size:18px;margin:0}#public-room-status{font-size:13px;color:#566958}#public-room-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:8px}.public-room{display:flex;align-items:center;justify-content:space-between;gap:12px;border:1px solid #d3dacb;background:#fcfcf5;border-radius:10px;padding:12px}.public-room strong,.public-room small{display:block}.public-room small{font-size:12px;color:#63735f;margin-top:4px}.public-room button{flex-shrink:0;min-height:42px}#room-access-settings{border:1px solid #d3dacb;border-radius:10px;padding:12px;margin:12px 0}#room-access-settings summary{cursor:pointer;font-size:13px;font-weight:600}#room-access-settings label{margin-top:12px}#room-view [hidden]{display:none!important}
.app-header nav{min-width:0}.app-header nav button{white-space:nowrap}
@media(max-width:850px){#remi-app:not(.in-game)>.app-header{flex-wrap:wrap;gap:8px}#remi-app:not(.in-game)>.app-header nav{width:100%;flex-wrap:wrap;gap:3px}#remi-app:not(.in-game)>.app-header nav button{min-height:38px;flex:1 1 auto}#remi-app .account-trigger{min-width:0;max-width:140px}}

.round-shortcuts{display:flex;align-items:center;gap:6px;flex:none}.round-shortcuts[hidden]{display:none}#table-next-round{background:#e5c98a;color:#173e32;font-size:12px;white-space:nowrap}#table-next-round:disabled{opacity:.5}

.review-room-actions{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0}.review-room-actions[hidden]{display:none}.room-member-actions{display:flex;align-items:center;justify-content:flex-end;gap:8px;flex-wrap:wrap}.kick-player{font-size:11px;min-height:32px;padding:5px 9px;color:#8c3831;border-color:#d7b5a4;background:#fff7ef}.result-person .kick-player{grid-column:1;justify-self:start}.room-member>span{min-width:0;overflow-wrap:anywhere}.room-member-actions strong{font-size:11px}.room-member-actions{flex-shrink:0}#result-host-note{font-size:12px;line-height:1.5}#review-room-actions [hidden]{display:none!important}
/* Scale loose-card faces with their actual size, including short Fold viewports. */
.hand-group.ungrouped .hand-card:not(.tiny-card) .corner{top:min(4px,calc(var(--ch)*.045));left:min(4px,calc(var(--cw)*.065));font-size:min(19px,calc(var(--ch)*.25),calc(var(--cw)*.45));gap:min(1px,calc(var(--ch)*.018));line-height:1}
.hand-group.ungrouped .hand-card:not(.tiny-card) .corner small{font-size:min(14px,calc(var(--ch)*.18),calc(var(--cw)*.31));line-height:1}
.hand-group.ungrouped .hand-card:not(.tiny-card) .corner.bottom{top:auto;left:auto;right:min(4px,calc(var(--cw)*.065));bottom:min(4px,calc(var(--ch)*.045));font-size:min(12px,calc(var(--ch)*.12))}
.hand-group.ungrouped .hand-card:not(.tiny-card) .corner.bottom small{font-size:inherit}
.hand-group.ungrouped .hand-card .center-suit{top:56%;left:50%;transform:translate(-50%,-50%);font-size:min(33px,calc(var(--ch)*.26),calc(var(--cw)*.4));line-height:1}
.hand-group.ungrouped .hand-card.compact-face .corner.bottom{display:none}
.hand-group.ungrouped .hand-card.compact-face .center-suit{top:70%;font-size:min(30px,calc(var(--ch)*.3),calc(var(--cw)*.56))}
/* Scores open over the table; navigation keeps the completed-round history. */
.table-tools{display:flex;align-items:center;gap:6px;flex:none}#remi-app .table-tools #mobile-menu-toggle{position:static}#show-points{min-width:48px;min-height:36px;padding:5px 9px;font-size:12px;background:#fff8e5;color:#214239;border-color:#d3c49170}
.points-dialog{position:fixed;inset:0;margin:auto;width:min(440px,calc(100vw - 24px));box-sizing:border-box;max-height:calc(100dvh - 24px);overflow:auto;padding:22px;border:1px solid #b7c5ae;border-radius:16px;background:#faf9f1;color:#18392e;box-shadow:0 18px 60px #001e2c66}.points-dialog::backdrop{background:#082c27aa;backdrop-filter:blur(3px)}.points-heading{display:flex;align-items:center;justify-content:space-between;gap:12px}.points-heading h2{font-size:23px;margin:0}.points-heading button{font-size:24px;min-width:40px;min-height:40px;padding:2px 8px}.points-dialog p{font-size:12px;line-height:1.5}.points-dialog table,.history-entry table{min-width:0;width:100%;table-layout:fixed}.points-dialog th,.points-dialog td,.history-entry th,.history-entry td{padding:10px 7px;font-size:12px;overflow-wrap:anywhere}.points-dialog th:first-child,.history-entry th:first-child{width:44%;text-align:left}.points-dialog td strong{font-size:19px}.points-dialog th small{display:block;font-size:10px;color:#63735f}.points-dialog tr.you{background:#e9eedf}#points-back{width:100%;min-height:42px;margin-top:10px}
#history-context{margin:0 0 20px;font-size:13px}#score-history{display:grid;gap:14px;max-width:850px}.history-entry{padding:18px;border:1px solid #d3dacb;background:#fcfcf5;border-radius:12px}.history-entry h2{font-size:18px;margin:0 0 7px}.history-entry p,.history-empty{font-size:13px;line-height:1.5;color:#566958}.history-entry p{margin:0 0 12px}
@media(max-width:1180px),(max-height:500px),(pointer:coarse){.in-game .phase-bar{padding-right:104px}.in-game .table-tools{position:absolute;right:0;top:0}}
@media(max-width:580px){.points-dialog{padding:16px}.history-entry{padding:14px}.points-dialog th,.points-dialog td,.history-entry th,.history-entry td{padding:9px 5px}}

/* Keep account access on the brand row, separate from page navigation. */
.header-identity{display:flex;align-items:center;justify-content:space-between;gap:12px;min-width:0}.header-identity .brand{flex:none}.app-header .account-trigger{min-height:40px;min-width:0;padding:7px 12px;border-radius:8px;border:1px solid #d3c49140;background:#ffffff08;color:#fff6dd;font-size:12px;white-space:nowrap}.app-header .account-trigger:hover{background:#ffffff12}
@media(max-width:850px){#remi-app:not(.in-game)>.app-header .header-identity{width:100%}.app-header .account-trigger{font-size:11px}}
@media(max-width:1180px),(max-height:500px),(pointer:coarse){.in-game.menu-open>.app-header .header-identity{width:100%}}

/* Assistance stays in compact overlays so the playing surface keeps its space. */
.header-account-tools{display:flex;align-items:center;gap:5px;min-width:0}.preferences-trigger{width:34px;min-width:34px;height:40px;padding:4px;font-size:20px;background:#ffffff08;color:#fff6dd;border-color:#d3c49140}.header-account-tools .account-trigger{flex-shrink:1}
.utility-dialog{position:fixed;inset:0;margin:auto;box-sizing:border-box;width:min(460px,calc(100vw - 24px));max-height:calc(100dvh - 24px);overflow:auto;border:1px solid #bcc9b1;border-radius:16px;padding:20px;background:#faf9f1;color:#193d30;box-shadow:0 20px 60px #001e2c66}.utility-dialog::backdrop{background:#082c27b3}.utility-heading{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}.utility-dialog h2{font-size:23px;line-height:1.2;margin:0 0 12px}.utility-heading h2{margin:0}.utility-heading>button{font-size:24px;min-width:40px;min-height:40px;padding:2px 8px}.utility-dialog p{font-size:13px;line-height:1.55}.utility-dialog button{min-height:40px}.preference-option{display:flex;align-items:center;gap:12px;padding:12px 0;font-size:14px}.preference-option input{width:20px;height:20px;accent-color:#235c45}.tutorial-table{display:flex;flex-wrap:wrap;gap:8px;background:#164536;padding:12px;border-radius:12px;min-height:100px}.lesson-target{flex:1 1 100px;padding:10px;color:#f7f3de;background:#ffffff08;border:1px dashed #abc8b2;border-radius:9px;font-size:12px}.lesson-target.chosen-target{border-style:solid;border-color:#e5ca85}.lesson-target.lesson-over{outline:3px solid #9ee9b3;background:#367451}.lesson-table-cards{display:flex;flex-wrap:wrap;justify-content:center;gap:3px;margin-top:8px}.lesson-table-cards>span{background:#fff8e8;color:#183d31;border-radius:3px;padding:3px;font-weight:600}.tutorial-hand{display:flex;justify-content:center;gap:8px;padding:22px 0 10px}.lesson-card{width:48px;height:72px;min-height:72px;padding:6px;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#fffdf5;border:1px solid #b6bfa8;border-radius:6px;font:24px Georgia,serif;touch-action:none;user-select:none}.lesson-card[aria-pressed=true]{transform:translateY(-8px);outline:2px solid #3c7e56}.tutorial-dialog .red{color:#ae2940}.tutorial-actions{display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap}.tutorial-actions button{flex:1}.utility-dialog .error{color:#a72c32}#tutorial-status{min-height:60px}#kick-confirm{background:#9b3933;color:white;border-color:#9b3933}
.drop-feedback{position:fixed;z-index:10000;pointer-events:none;left:50%;top:calc(env(safe-area-inset-top,0px) + 12px);transform:translateX(-50%);width:max-content;max-width:calc(100vw - 32px);padding:9px 13px;border:1px solid #a6dbb7;border-radius:10px;background:#153e31f2;color:#f7ffe8;font-size:12px;text-align:center;box-shadow:0 4px 20px #0003}.drop-feedback.error{background:#702e2cf2;border-color:#e3a5a0}.drop-ready{box-shadow:inset 0 0 0 2px #80c99c!important}.in-game .table-surface.drop-hover:not(.drop-invalid){outline:2px solid #9ce0a9!important;background-color:#6bc47b18!important}.drop-hover.drop-invalid{outline:2px solid #ef9c94!important}
.connection-banner{position:fixed;z-index:10001;top:calc(env(safe-area-inset-top,0px) + 6px);left:50%;transform:translateX(-50%);width:min(540px,calc(100vw - 20px));display:flex;align-items:center;gap:8px;padding:9px 12px;border-radius:10px;border:1px solid #e0c98e;background:#fff4d6;color:#463a21;box-shadow:0 4px 18px #0003;font-size:12px;box-sizing:border-box}.connection-banner span{flex:1}.connection-banner button{min-height:36px;white-space:nowrap;font-size:11px;padding:5px 8px}#remi-app .connection-banner[hidden],#remi-app .drop-feedback[hidden]{display:none}
@media(max-width:350px){.header-identity{gap:6px}.header-account-tools .account-trigger{padding:6px 8px;max-width:108px!important}.utility-dialog{padding:15px}.tutorial-hand{gap:5px}.lesson-card{width:44px}}
.account-statistics{margin-top:20px;padding-top:14px;border-top:1px solid #d5dccb}.statistics-heading{display:flex;align-items:center;justify-content:space-between;gap:8px}.statistics-heading h3{font-size:16px;margin:0}.statistics-heading button{font-size:11px;padding:6px;min-height:36px}.statistics-tabs{display:flex;gap:6px;margin-top:12px}.statistics-tabs button{flex:1;font-size:12px;min-height:40px}.statistics-tabs button[aria-pressed=true]{background:#215943;color:#fff7de}.statistics-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:12px 0}.statistics-list>div{padding:10px 5px;background:#eaf0e1;border-radius:8px;text-align:center}.statistics-list dt{font-size:10px}.statistics-list dd{margin:6px 0 0;font-size:22px;font-variant-numeric:tabular-nums}.account-dialog #statistics-note,.account-dialog #statistics-status{font-size:11px}
.group-joker{flex:none;padding:1px 3px;min-width:25px;min-height:22px;border:1px solid #d3c49160;border-radius:5px;background:#fff8e514;color:inherit;font-size:9px;white-space:nowrap}.group-heading .group-drag{min-width:0}.group-heading .group-drag b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block}#joker-options{display:grid;gap:10px}.joker-choice{display:flex;flex-direction:column;align-items:center;gap:8px;padding:12px;background:#edf1e4;border:1px solid #bac9ad;border-radius:10px;font-size:12px}.joker-choice:hover,.joker-choice:focus-visible{background:#dce9cd;outline:2px solid #548b63}.joker-choice-cards{display:flex;justify-content:center;gap:4px}.joker-choice-cards .table-card{width:40px;height:60px;flex:0 0 40px;margin:0}.joker-choice-cards .table-card .rank{font-size:15px}.joker-choice-cards .table-card .suit{font-size:12px}
.room-ai-offer{margin-top:14px;padding:14px;background:#fff2cd;border:1px solid #dcc58a;border-radius:12px;color:#4d4025}.room-ai-offer p{margin:0 0 12px;font-size:13px;line-height:1.5}.room-ai-offer .room-actions{margin:0}#room-add-ai,#room-fill-ai{background:#e5ca85;color:#183d30}.room-member-actions [data-remove-ai]{font-size:11px;min-height:32px;padding:5px 8px}
.online-count{display:inline-flex;align-items:center;gap:5px;white-space:nowrap;font:11px/1.5 system-ui,sans-serif;color:#d4dfc8;letter-spacing:0}.online-count::before{content:'';width:6px;height:6px;flex:none;border-radius:50%;background:#9aa99e}.online-count[data-state=ready]::before{background:#88dba4;box-shadow:0 0 0 2px #88dba414}.brand .online-count{margin-top:3px}.phase-bar .table-online-count{font-size:10px;flex:none}.online-count[data-state=unavailable]{opacity:.65}
#remi-app .phase-bar .table-online-count{display:inline-flex}
.brand .online-count{display:flex;margin-top:2px}

/* Android installer stays accessible without crowding the game table. */
.apk-download{display:grid;gap:8px;max-width:360px;margin:24px 0}.apk-download-button{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:10px 22px;border-radius:12px;background:#174d3d;color:#fff7df;text-decoration:none;font-weight:700;box-sizing:border-box}.apk-download-button:hover{background:#103b2e}.apk-download-button:focus-visible,.apk-download-link:focus-visible{outline:3px solid #c99932;outline-offset:4px}.apk-download small{font-size:13px;line-height:1.5;color:#51645b}.apk-download-link{color:inherit;white-space:nowrap}.native-app .apk-download,.native-app .apk-download-link{display:none}

/* Subtle, seat-stable colors on opponents' newly played table cards. */
.table-card.recent-play{box-shadow:inset 0 0 0 1px rgba(var(--recent-play-rgb),.85),0 0 5px 1px rgba(var(--recent-play-rgb),.42)}
.table-card.recent-play::after{content:"";position:absolute;inset:0;border-radius:inherit;border:1px solid rgba(var(--recent-play-rgb),.8);background:rgba(var(--recent-play-rgb),.10);pointer-events:none}
.player-color-dot{display:inline-block;width:6px;height:6px;margin-right:4px;border-radius:50%;background:rgb(var(--recent-play-rgb));box-shadow:0 0 3px rgba(var(--recent-play-rgb),.3);vertical-align:middle;flex:none}

.language-setting{display:grid;gap:6px;margin:12px 0 18px;font-size:14px}.language-setting select{width:100%;min-height:44px;max-width:100%;font:inherit}

.joker-direction{display:flex;align-items:center;gap:6px;color:#164b39;font-size:15px}.joker-choice{min-height:44px;touch-action:manipulation}

/* Optional compact hand: small, unlabeled fans directly above loose cards. */
#remi-app:is([data-hand-layout="compact"],.mobile-landscape) .hand-groups{align-self:center;max-width:100%}
#remi-app:is([data-hand-layout="compact"],.mobile-landscape) .hand-groups .hand-group{position:relative;background:transparent;border:0;border-radius:0;padding:0;overflow:visible}
#remi-app:is([data-hand-layout="compact"],.mobile-landscape) .hand-groups .group-heading{position:absolute;inset:0;height:auto;min-height:0;z-index:4;pointer-events:none}
#remi-app:is([data-hand-layout="compact"],.mobile-landscape) .hand-groups .group-drag{position:absolute;inset:0;min-height:0;height:auto;width:100%;pointer-events:auto;border:0;background:transparent;border-radius:6px}
#remi-app:is([data-hand-layout="compact"],.mobile-landscape) .hand-groups .group-drag b,#remi-app:is([data-hand-layout="compact"],.mobile-landscape) .hand-groups .group-drag span{display:none}
#remi-app:is([data-hand-layout="compact"],.mobile-landscape) .hand-groups .group-release,#remi-app:is([data-hand-layout="compact"],.mobile-landscape) .hand-groups .group-joker{display:none}
#remi-app:is([data-hand-layout="compact"],.mobile-landscape) .ungrouped .group-heading{display:none}
#remi-app:is([data-hand-layout="compact"],.mobile-landscape) .hand-groups .group-expanded{z-index:10}
#remi-app:is([data-hand-layout="compact"],.mobile-landscape) .hand-groups .group-expanded .fan{position:absolute;left:var(--detail-left,0px);bottom:calc(100% + 4px);width:var(--detail-width,220px);height:102px!important;min-height:102px;background:#0d3327;border:1px solid #d9c88b;border-top:0;border-radius:0 0 12px 12px;box-shadow:0 8px 18px #001d2455}
#remi-app:is([data-hand-layout="compact"],.mobile-landscape) .hand-groups .group-expanded .group-heading{inset:auto;left:var(--detail-left,0px);bottom:calc(100% + 106px);width:var(--detail-width,220px);height:36px;min-height:36px;display:flex;gap:4px;padding:2px 5px;background:#0d3327;border:1px solid #d9c88b;border-bottom:0;border-radius:12px 12px 0 0;pointer-events:auto}
#remi-app:is([data-hand-layout="compact"],.mobile-landscape) .hand-groups .group-expanded .group-drag{position:static;flex:1;min-height:32px;width:auto}
#remi-app:is([data-hand-layout="compact"],.mobile-landscape) .hand-groups .group-expanded .group-drag:after{content:'↥';font-size:20px;color:#fff6dc;margin:auto}
#remi-app:is([data-hand-layout="compact"],.mobile-landscape) .hand-groups .group-expanded .group-release,#remi-app:is([data-hand-layout="compact"],.mobile-landscape) .hand-groups .group-expanded .group-joker{display:block;min-width:36px;min-height:32px;height:32px;font-size:14px}
#remi-app:is([data-hand-layout="compact"],.mobile-landscape) .hand-groups .group-expanded .fan.drop-hover{background:#0d3327!important;opacity:1}
#remi-app:is([data-hand-layout="compact"],.mobile-landscape) .hand-groups .group-expanded .hand-card{pointer-events:auto}

#remi-app.in-game:is([data-hand-layout="compact"],.mobile-landscape){--hand-height:clamp(215px,32dvh,290px)}
@media(max-height:500px){#remi-app.in-game:is([data-hand-layout="compact"],.mobile-landscape){--hand-height:clamp(150px,40dvh,200px)}}

.table-viewport{height:100%;min-height:0;overflow:hidden}.landscape-bar,.landscape-control{display:none}
/* Mobile landscape: one table with an anchored hand, fit by default. */
#remi-app.in-game.mobile-landscape{--landscape-hand:clamp(170px,24vw,235px)}
.in-game.mobile-landscape #game-view{display:flex;flex-direction:column}
.in-game.mobile-landscape .game-top{display:none}
.in-game.mobile-landscape .landscape-bar{display:flex;align-items:center;gap:6px;flex:none;min-height:44px;padding:3px 7px;background:#123d32;border-bottom:1px solid #ffffff20}
.in-game.mobile-landscape .landscape-control{display:block}
.in-game.mobile-landscape .table-tools{position:static;display:flex;gap:4px;flex:none;align-items:center}
.in-game.mobile-landscape .table-tools button,.in-game.mobile-landscape #landscape-mode{min-height:36px;padding:5px 7px;font-size:11px;max-width:136px;background:#123d32;color:#fff4d8;border:1px solid #ffffff30;border-radius:7px}
.in-game.mobile-landscape #mobile-menu-toggle{display:block;min-width:34px;font-size:20px}
.in-game.mobile-landscape .opponents{flex:1;min-width:0;gap:3px;margin:0}
.in-game.mobile-landscape .opponent{background:none;border:0;padding:0 3px;border-radius:0;min-width:0;flex:1}
.in-game.mobile-landscape .opponent-top>div{min-width:0;max-width:100%}
.in-game.mobile-landscape .opponent b{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11px}
.in-game.mobile-landscape .opponent small{display:block;white-space:nowrap;font-size:10px;overflow:hidden;text-overflow:ellipsis}
.in-game.mobile-landscape .opponent small:last-child{display:none}
.in-game.mobile-landscape .opponent.current{border-bottom:2px solid #e5c98a}
.in-game.mobile-landscape .opponent.dead b{text-decoration:line-through}
.in-game.mobile-landscape .game-layout{padding:0 var(--landscape-hand) 0 0;display:flex;flex:1;min-height:0}
.in-game.mobile-landscape .table-wrap{flex:1;min-width:0;padding:4px 6px 6px;display:flex;flex-direction:column}
.in-game.mobile-landscape .phase-bar{padding:0;min-height:24px;margin:0 0 3px;flex-direction:row;align-items:center;gap:8px;flex-wrap:wrap}
.in-game.mobile-landscape #phase-detail{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0;font-size:10px}
.in-game.mobile-landscape .table-online-count{display:none}
.in-game.mobile-landscape .table-surface{border:0;border-radius:0;padding:2px;background:transparent;overflow:hidden}
.in-game.mobile-landscape .table-surface>.table-viewport,.in-game.mobile-landscape .table-surface>.opening-table{width:100%;height:100%}
.in-game.mobile-landscape .table-viewport{overflow:hidden;overscroll-behavior:contain}
.in-game.mobile-landscape .meld-table{display:flex;flex-wrap:wrap;width:100%;height:100%;gap:6px;align-content:flex-start;justify-content:flex-start;padding:0 2px}.in-game.mobile-landscape .meld{flex:0 0 var(--landscape-tile-w);width:var(--landscape-tile-w);height:var(--landscape-row-h);border:0;background:transparent;border-radius:6px}
.in-game.mobile-landscape .meld-inspect{padding:0 4px;gap:1px;justify-content:flex-start;min-width:0}
.in-game.mobile-landscape .meld-cards{width:min(100%,var(--landscape-fan-w));max-width:none}
.in-game.mobile-landscape .meld-header{display:flex;min-width:0}
.in-game.mobile-landscape .meld-header b{overflow:hidden;text-overflow:ellipsis}
.in-game.mobile-landscape .fan-slot{transform:rotate(var(--tilt));transform-origin:center bottom}
.in-game.mobile-landscape .fan-slot .table-card .rank,.in-game.mobile-landscape .fan-slot .table-card .suit{font-size:var(--table-rank-size)}
.in-game.mobile-landscape[data-landscape-table="fit"] .fan-slot .art{display:none}
.in-game.mobile-landscape .hand-area{inset:44px 0 0 auto;width:var(--landscape-hand);height:auto;padding:5px 7px;min-height:0;border-left:1px solid #ffffff22;background:transparent}
.in-game.mobile-landscape .hand-heading{display:contents}
.in-game.mobile-landscape .hand-heading>div:first-child{order:0;flex-wrap:wrap;gap:2px}
.in-game.mobile-landscape .hand-heading h2{font-size:12px}
.in-game.mobile-landscape #hand-count{max-width:none;font-size:10px}
.in-game.mobile-landscape #you-status{font-size:10px}
.in-game.mobile-landscape .hand{order:1;flex:1;min-height:0;overflow:visible}
.in-game.mobile-landscape .hand-toolbar{order:2;display:flex;flex-wrap:wrap;margin:0;width:100%;gap:3px;flex:none}
.in-game.mobile-landscape .hand-toolbar button{flex:1 1 44%;padding:3px 4px;white-space:normal;font-size:10px;min-height:30px}
.in-game.mobile-landscape .hand-message{order:3;font-size:10px;max-height:24px;overflow:hidden}
.in-game.mobile-landscape .table-history{display:none}
.in-game.mobile-landscape.landscape-history-open .table-history{display:flex;position:absolute;inset:0 0 0 auto;width:min(280px,100%);padding:8px;background:#0d3327;border:1px solid #a8bea2;border-radius:10px;z-index:24;box-shadow:0 5px 20px #001e2566}
.in-game.mobile-landscape.landscape-history-open #toggle-history{font-size:12px;min-height:36px;text-align:right}
.in-game.mobile-landscape .meld-detail{z-index:25;max-width:calc(100% - 12px)}
.in-game.mobile-landscape[data-landscape-table="pan"] .table-viewport{overflow-x:auto;overflow-y:hidden;touch-action:pan-x;scrollbar-width:thin;scrollbar-color:#a2b79b #ffffff14}
.in-game.mobile-landscape[data-landscape-table="pan"] .meld-table{display:grid;width:max-content;min-width:100%;grid-template-columns:none;grid-auto-columns:max-content;grid-template-rows:repeat(var(--pan-rows,2),var(--landscape-row-h));grid-auto-flow:column;gap:6px 10px;padding:0 8px}
.in-game.mobile-landscape[data-landscape-table="pan"] .meld{grid-column:auto;width:var(--landscape-tile-w,140px)}
.in-game.mobile-landscape[data-landscape-table="pan"] .meld-inspect{touch-action:pan-x}
.in-game.mobile-landscape[data-landscape-table="pan"] .meld-owner{display:block;font-size:11px}
@media(max-width:700px){.in-game.mobile-landscape .opponent b,.in-game.mobile-landscape .opponent small{font-size:9px}.in-game.mobile-landscape .table-tools{gap:2px}.in-game.mobile-landscape .table-tools button,.in-game.mobile-landscape #landscape-mode{padding:4px;max-width:115px;font-size:10px}}
#remi-app.in-game.mobile-landscape .hand-groups .group-expanded .fan{bottom:auto;top:calc(var(--landscape-detail-y,0px) + 36px)}
#remi-app.in-game.mobile-landscape .hand-groups .group-expanded .group-heading{bottom:auto;top:var(--landscape-detail-y,0px)}
.public-room-actions{display:flex;flex-wrap:wrap;gap:6px}
#remi-app.watching{height:100dvh;min-height:0;display:flex;flex-direction:column;background:var(--felt);overflow:hidden}
.watching>.app-header,.watching>footer{display:none}
#spectator-view{min-height:0;flex:1;display:flex;flex-direction:column;gap:8px;padding:10px;color:#fff6dd;background:radial-gradient(ellipse at top,#245b49,#10392e)}
.watch-heading{display:flex;align-items:center;gap:6px;flex:none}.watch-heading>div{flex:1;min-width:0}.watch-heading strong{display:block;font-size:15px}.watch-heading small{display:block;font-size:12px;color:#d3dfc8;overflow-wrap:anywhere}
.watch-heading button{min-height:40px;padding:6px 10px;background:#123d32;color:#fff6dd;border-color:#ffffff30;font-size:12px}
#watch-status{margin:0;min-height:16px;font-size:11px;color:#c4d7bd}#watch-status.error{color:#ffd3a3}
#watch-players{display:flex;gap:5px;flex:none}.watch-player{flex:1;min-width:0;padding:6px 8px;border:1px solid #ffffff30;border-radius:8px;background:#102f28}.watch-player>b{display:flex;align-items:baseline;gap:4px;font-size:18px;line-height:1.35;font-variant-numeric:tabular-nums;color:#f4d88d}.watch-player>b small{font-size:10px;font-weight:400}.watch-player strong{display:block;font-size:12px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.watch-player span,.watch-player small{display:block;font-size:11px;color:#d3dfc8}.watch-player.current{border-color:#e5ca89;background:#335443}
#watch-surface{display:flex;gap:8px;flex:1;min-height:0;overflow:hidden;padding:5px;border:1px solid #ffffff24;border-radius:10px;background:#0c2d2540}
#watch-table{display:flex;flex-wrap:wrap;align-content:flex-start;justify-content:flex-start;gap:6px;flex:1;min-width:0;min-height:0;overflow:hidden;padding:6px}
#watch-history-panel{display:flex;flex-direction:column;flex:0 0 clamp(88px,24vw,190px);width:clamp(88px,24vw,190px);min-height:0;padding-left:8px;border-left:1px solid #ffffff24}
#watch-history{flex:none;min-height:32px;padding:3px 0;text-align:left;background:none;border:0;color:#fff5da;font-size:11px;white-space:nowrap}
#watch-activity{flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#b9c9b466 transparent;list-style:none;margin:0;padding:0;font-size:11px;color:#d3dfc8;overflow-wrap:anywhere}
#watch-activity li{padding:8px 0;border-bottom:1px solid #ffffff18}
#watch-surface.history-collapsed #watch-history-panel{flex-basis:24px;width:24px;padding-left:4px}
.watch-meld{flex:0 0 var(--watch-tile-w,110px);width:var(--watch-tile-w,110px);height:var(--watch-row-h,100px);min-width:0;min-height:0;padding:0 2px;background:none;border:0;border-radius:6px;color:#fff5da;display:flex;align-items:center;justify-content:flex-start;flex-direction:column;gap:2px}
.watch-meld>span:first-child{display:flex;justify-content:space-between;gap:4px;width:100%;font-size:10px;line-height:12px;flex:none;text-align:left;white-space:nowrap;overflow:hidden}
.watch-meld small{font-size:10px;color:#d1dfd7}.watch-owner{width:100%;font-size:10px;line-height:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:left;color:#d1dfd7}
.watch-fan{height:calc(var(--watch-card-h,60px) + 6px);width:min(100%,var(--watch-fan-w));display:block;position:relative;flex:none}
.watch-slot{position:absolute;left:calc(var(--i) * (100% - var(--watch-card-w,40px)) / max(1,var(--n) - 1));top:3px;transform:rotate(var(--tilt,0deg));transform-origin:center bottom}
.watch-card{display:block;position:relative;width:var(--watch-card-w,48px);height:var(--watch-card-h,72px);border:1px solid #b3baa4;border-radius:4px;background:#fffbed;color:#173b31;overflow:hidden;text-align:left}.watch-card.red{color:#a4263a}.watch-card>b{position:absolute;left:1px;top:1px;font:bold var(--watch-font,16px)/1 Georgia,serif}.watch-card>span{position:absolute;left:1px;top:calc(var(--watch-font,16px) + 2px);font:var(--watch-font,16px)/1 Georgia,serif}.watch-card>.art{left:45%;width:52%;bottom:1px}.watch-card>small{position:absolute;right:1px;bottom:1px;font-size:9px;background:#f4dda5;color:#173b31}
.watch-note{font-size:11px;color:#c4d7bd;margin:0}.watch-opening{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;grid-template-rows:auto!important}.watch-packet{padding:8px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px}.watch-packet strong,.watch-packet span{font-size:12px}.watch-packet .back{width:44px;height:66px}
.watch-score{display:grid;grid-template-columns:1fr auto;gap:4px 12px;padding:10px 0;border-bottom:1px solid #b9c9b4}.watch-score small{grid-column:1/-1;font-size:12px}.watch-log{padding-left:20px;font-size:13px}.watch-log li{padding:8px 0;border-bottom:1px solid #c9d2bf}.watch-detail-cards{display:flex;gap:5px;flex-wrap:wrap;justify-content:center}.watch-detail-cards .watch-card{--watch-card-w:48px;--watch-card-h:72px;--watch-font:17px}
@media(max-width:580px){.watch-heading{flex-wrap:wrap}.watch-heading>div{flex-basis:100%}.watch-heading button{flex:1;padding:5px 7px;font-size:11px}.watch-player{padding:5px 3px}.watch-player span,.watch-player small{font-size:10px}.watch-player strong{font-size:11px}.watch-player>b{font-size:16px}.watch-player>b small{display:none}}
@media(orientation:landscape) and (max-height:500px){#spectator-view{padding:5px 8px;gap:4px}.watch-player{padding:3px 7px;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:0 6px}.watch-player>b{font-size:15px;grid-column:2;grid-row:1/3}.watch-player small{display:none}.watch-player strong,.watch-player>span{grid-column:1}.watch-heading>div{flex-basis:auto}.watch-heading button{flex:none}.watch-heading strong{font-size:13px}.watch-note,#watch-status{font-size:10px;min-height:12px}}

/* Room discovery fills the page; creation/join settings live in dialogs. */
/* Room directory: one toolbar and aligned rows, without nested panels. */
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
#room-view{padding:20px 24px;min-height:calc(100dvh - 145px)}
.room-browser-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:16px}
#room-view .room-browser-heading h1{font-size:26px;margin:0}
.room-browser-actions{display:flex;gap:6px}.room-browser-actions button{min-height:42px;font-size:12px;padding:8px 14px}.room-browser-actions [aria-pressed=true]{background:#e9c776;color:#153e31}
#room-status{margin-bottom:10px}#room-status:empty{display:none}
#room-view .public-rooms{width:100%;max-width:none;margin:0;padding:0;background:transparent;border:0;border-radius:0}
.public-rooms-heading{display:flex;flex-wrap:nowrap;gap:8px;align-items:center}
.room-filter-label{display:block;flex:1;min-width:0;max-width:320px}.room-filter-label select{width:100%;margin:0;font-size:12px;padding:9px 30px 9px 12px;min-height:42px;background:var(--surface)}
.public-rooms-heading>button{padding:8px 12px;min-height:42px;font-size:12px}
#public-room-status{font-size:11px;margin:10px 0 7px;color:var(--muted)}
#public-room-list{display:flex;flex-direction:column;gap:6px;width:100%}
#public-room-list .public-room{display:flex;align-items:center;border:1px solid var(--line);border-radius:10px;padding:12px;gap:12px;background:var(--surface)}
.public-room-main{flex:1;min-width:0}.public-room-title{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.public-room-main strong{min-width:0;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:13px}
.public-room-main small{display:flex;gap:4px 10px;flex-wrap:wrap;font-size:11px;margin-top:4px;line-height:1.5}.public-room-main small>span{white-space:nowrap}
.public-room-actions{display:flex;flex-wrap:nowrap;flex-shrink:0;gap:6px}.public-room-actions button{min-height:42px;padding:8px 12px;font-size:12px}
.room-phase{font-size:10px;padding:2px 7px;border-radius:20px;white-space:nowrap;background:#e7ecdf;color:#365740}.room-phase-playing{background:#d9eadf;color:#175339}.room-phase-finished{background:#efe5cf;color:#795924}
.room-pagination{display:flex;align-items:center;justify-content:space-between;gap:8px;padding-top:12px;font-size:12px}.room-pagination button{font-size:11px;min-height:42px;padding:6px 9px}
.room-entry-dialog[open]{display:flex;flex-direction:column;gap:14px}.room-entry-dialog label{display:grid;gap:5px;font-size:13px}.room-entry-dialog input{font:inherit;font-size:16px;width:100%;min-height:44px;padding:9px;border:1px solid var(--line);background:var(--paper);color:var(--ink);border-radius:8px}.room-entry-dialog form{display:grid;gap:14px}.room-action-status{font-size:12px}.room-action-status:empty{display:none}.room-action-status.error{color:#a4263a}
.session-results{margin-top:18px;border-top:1px solid #bac9b4;padding-top:14px}.session-results>h3{margin:0 0 8px;font-size:15px}.results-status{font-size:12px;color:var(--muted)}.results-status:empty{display:none}.session-result{padding:12px 0;border-bottom:1px solid var(--line)}.session-result h3{font-size:13px;margin:0 0 5px}.session-result p{font-size:11px;margin:0 0 6px}.session-result table{min-width:0;width:100%;table-layout:fixed}.session-result th,.session-result td{padding:7px 4px;font-size:11px;overflow-wrap:anywhere}.session-result th:first-child{width:44%}.results-more{margin-top:12px;width:100%;font-size:12px}
.watch-card.recent-play{box-shadow:inset 0 0 0 1px rgba(var(--recent-play-rgb),.85),0 0 6px 2px rgba(var(--recent-play-rgb),.55)}.watch-card.recent-play::after{content:"";position:absolute;inset:0;border-radius:inherit;border:1px solid rgba(var(--recent-play-rgb),.9);background:rgba(var(--recent-play-rgb),.10);pointer-events:none}
.hand-card.joker{color:#19322d;--joker-h:var(--ch,108px)}.table-card.joker{--joker-h:var(--table-card-h,63px)}.watch-card.joker{--joker-h:var(--watch-card-h,72px)}.deck-card.joker{--joker-h:150px}.lesson-card{position:relative;--joker-h:80px}
.joker-index{position:absolute;left:2px;top:2px;display:flex;flex-direction:column;align-items:center;gap:1px;line-height:1;z-index:2;pointer-events:none;color:inherit}.joker-index>b{font:bold clamp(6px,calc(var(--joker-h)*.22),24px)/1 Georgia,serif}.joker-index>small{font:700 clamp(3px,calc(var(--joker-h)*.095),11px)/1 Arial,sans-serif;writing-mode:vertical-rl;text-orientation:upright;letter-spacing:0}.joker .art{left:35%;width:63%}.deck-gallery{grid-template-columns:repeat(6,minmax(0,1fr))}
@media(max-width:580px){
 #room-view{padding:16px 12px}.room-browser-heading{gap:12px;margin-bottom:12px}#room-view .room-browser-heading h1{font-size:24px}
 .room-browser-actions{width:100%;display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}.room-browser-actions button{padding:8px 6px}
 .room-filter-label{max-width:none}.public-room-title{gap:4px 7px}.public-room-main small{font-size:10px;gap:2px 8px}.room-phase{font-size:9px}
 .public-room-actions{flex-direction:column;gap:4px}.public-room-actions button{min-width:64px;padding:8px}.deck-gallery{grid-template-columns:repeat(2,minmax(0,1fr))}
 #remi-app.browsing-rooms>.app-header{padding:10px 12px 0;gap:8px}
 .browsing-rooms .brand b{font-size:19px}.browsing-rooms .brand small{font-size:9px}.browsing-rooms .brand .online-count{font-size:10px}
 .browsing-rooms .app-header .account-trigger{font-size:10px;padding:6px 8px;min-height:36px;max-width:100px}
 .browsing-rooms .preferences-trigger{min-height:36px;width:36px;padding:4px}
 #remi-app.browsing-rooms>.app-header nav{gap:0;display:grid;grid-template-columns:auto 1.4fr auto 1fr;border-top:1px solid #ffffff12}
 #remi-app.browsing-rooms>.app-header nav button{border-radius:0;min-height:40px;font-size:11px;padding:8px 5px;border:0;border-bottom:3px solid transparent}
 #remi-app.browsing-rooms>.app-header nav button.active{background:transparent;color:var(--gold);border-bottom-color:var(--gold)}
}

.joker:not(.red) .art{filter:grayscale(1) contrast(1.12)}

.watch-card>.joker-index{top:2px;left:2px;font:inherit}

/* One continuous header surface; only the underline marks the active tab. */
#remi-app>.app-header{flex-wrap:wrap;padding-bottom:0;border-bottom:0}
#remi-app>.app-header .header-identity{width:100%}
#remi-app>.app-header nav.app-tabs{position:relative;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));width:100%;min-width:0;gap:0;border:0;flex-wrap:nowrap}
#remi-app>.app-header nav.app-tabs>button{position:relative;min-width:0;min-height:44px;margin:0;padding:8px 2px 12px;border:0;border-radius:0;background:transparent;color:#c7d8ca;font-size:12px;box-shadow:none;white-space:nowrap}
#remi-app>.app-header nav.app-tabs>button.active{background:transparent;color:#e9cc87;border:0}
.app-tab-indicator{position:absolute;bottom:0;left:0;width:20%;height:3px;pointer-events:none;transition:transform .22s ease}
.app-tab-indicator:after{content:"";display:block;width:28px;height:3px;margin:auto;background:#e9cc87;border-radius:2px 2px 0 0}
#remi-app>.app-header .header-leave{margin:0 0 8px auto;min-height:36px;padding:5px 10px;background:transparent;border:1px solid #d3c49140;color:#fff6dd;font-size:11px}
#remi-app:not(.in-game):not(.watching){touch-action:pan-y pinch-zoom;overscroll-behavior-x:contain}
#competition-view{padding:24px;min-height:calc(100dvh - 150px)}
#competition-view h1{font:26px/1.2 Georgia,serif;margin:0 0 20px}
.competition-empty{display:flex;flex-direction:column;align-items:center;gap:16px;text-align:center;padding:30px 12px 48px;max-width:480px;margin:auto}
.competition-emblem{display:grid;place-items:center;width:68px;height:68px;border-radius:20px;background:#e9e1c7;color:#8d7131;font:38px Georgia,serif}
.competition-soon{font-size:11px;letter-spacing:2px;color:var(--muted)}
.competition-empty h2{font-size:19px;font-weight:500}.competition-empty p{font-size:14px;line-height:1.6;color:var(--muted);max-width:310px}.competition-empty button{margin-top:6px}
#tab-swipe-cue{position:fixed;z-index:160;width:28px;height:60px;display:grid;place-items:center;background:#123e32e8;color:#e9cc87;font:30px Georgia,serif;pointer-events:none;box-shadow:0 2px 10px #071e2730}
#tab-swipe-cue[data-side=left]{left:0;border-radius:0 30px 30px 0}#tab-swipe-cue[data-side=right]{right:0;border-radius:30px 0 0 30px}
@media(max-width:580px){#remi-app>.app-header nav.app-tabs>button{font-size:11px}#competition-view{padding:20px 12px}.competition-empty{padding-top:20px}}
@media(prefers-reduced-motion:reduce){.app-tab-indicator{transition:none}}
/* Fit mode has no horizontal scroller; reserve horizontal edge gestures for tabs.
   Optional pan mode retains native horizontal scrolling inside the table. */
#remi-app.in-game:not(.mobile-landscape),#remi-app.in-game.mobile-landscape[data-landscape-table="fit"]{touch-action:pan-y pinch-zoom;overscroll-behavior-x:contain}
#landscape-bar,.app-header,.in-game .phase-bar,.in-game .table-foot{touch-action:pan-y pinch-zoom}
@media(max-width:580px){
 #remi-app>.app-header nav.app-tabs{width:calc(100% + 24px);margin-left:-12px;margin-right:-12px}
 #remi-app.in-game.menu-open>.app-header nav.app-tabs{width:calc(100% + 56px);margin-right:-44px}
}
@media(max-width:580px){#remi-app>.app-header nav.app-tabs>button{padding-left:0;padding-right:0}}