:root{font-family:ui-sans-serif,system-ui,-apple-system,sans-serif;color:#f4f0df;background:#102b26;color-scheme:dark;--gold:#dfc788;--muted:#a7b9ae}*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at top,#255346,#102b26 75%);min-height:100dvh}header{height:70px;display:flex;justify-content:space-between;align-items:center;max-width:1100px;margin:auto;padding:0 22px;border-bottom:1px solid #ffffff12}.brand{color:var(--gold);text-decoration:none;font-family:serif;font-size:26px}.brand span{font-family:inherit;color:#f4f0df;margin-left:10px}#connection{font-size:12px;color:var(--muted)}main{max-width:1100px;margin:auto;padding:24px}h1{font-family:Georgia,serif;font-weight:normal;font-size:clamp(36px,7vw,56px);line-height:1.1;margin:14px 0 20px}h2{font-family:Georgia,serif;font-weight:normal}.eyebrow{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold)}p{color:var(--muted);line-height:1.65}.landing{max-width:530px;margin:5vh auto}.panel{border:1px solid #ffffff20;background:#ffffff05;padding:24px;border-radius:18px;margin-top:26px}label{display:block;font-size:13px;color:#d9e2d8;margin:16px 0 8px}input,select{font:inherit;padding:13px;width:100%;background:#102e28;border:1px solid #ffffff30;border-radius:8px;color:#f4f0df}button{font:inherit;cursor:pointer;min-height:44px;padding:11px 18px;border-radius:9px;border:1px solid #ffffff25;color:#f4f0df;background:#ffffff09;touch-action:manipulation}button.primary{background:var(--gold);border-color:var(--gold);color:#263b30;font-weight:650}button:disabled{opacity:.4;cursor:default}button:hover:not(:disabled){filter:brightness(1.12)}.wide{width:100%;margin-top:20px}.rules{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}.rules label{font-size:12px}.rules select{font-size:13px}summary{cursor:pointer;color:var(--gold);padding:18px 0}.seats{display:grid;grid-template-columns:1fr 1fr;gap:10px}.seat-card{border:1px solid #ffffff20;border-radius:12px;padding:18px}.online{color:#b5db98}.offline{color:#dbb286}.small{font-size:12px}.room-head{display:flex;justify-content:space-between;align-items:center;gap:12px}.table{position:relative;margin-top:18px;border-radius:24px;border:8px solid #775838;background:radial-gradient(ellipse,#376753,#1c4738);box-shadow:0 20px 60px #0005,inset 0 0 35px #0004;padding:18px;display:grid;grid-template-columns:1fr 1fr;gap:18px;min-height:470px}.player{min-width:0;padding:10px;border-radius:12px;background:#0000000e}.player.you{grid-column:1/-1;border-top:1px solid #ffffff20}.player.active{box-shadow:inset 0 0 0 1px #dfc78880}.player-name{display:flex;justify-content:space-between;font-size:12px;margin-bottom:9px;gap:4px}.player-name strong{font-weight:550}.river{display:grid;grid-template-columns:repeat(6,25px);gap:3px;min-height:40px;margin-top:12px;transform:skewY(-3deg)}.tile{display:inline-flex;align-items:center;justify-content:center;padding:0;width:40px;height:55px;background:#f4efd9;border:1px solid #d8d0b9;border-radius:5px;box-shadow:2px 4px 0 #beb494,3px 6px 0 #0e5748;transform:rotateX(12deg) rotateY(-9deg);flex-shrink:0;min-height:0;position:relative}.tile svg{width:100%;height:100%}.tile.back{background:linear-gradient(130deg,#4e9a7b,#23705b);border-color:#94b39a}.tile.small-tile{width:25px;height:34px;border-radius:3px;box-shadow:1px 2px 0 #beb494,2px 3px 0 #14523f}.tile.called{opacity:.45}.tile.riichi{transform:rotate(90deg);margin:0 6px}.tile.selected{transform:translateY(-12px);box-shadow:0 0 0 2px var(--gold),2px 5px 0 #9f9477}.tile.drawn{margin-left:12px}.tile:disabled{opacity:1}.concealed{display:flex;gap:2px}.concealed .tile{width:13px;height:20px;box-shadow:1px 2px 0 #aaa}.center{grid-column:1/-1;grid-row:2;display:flex;justify-content:space-between;align-items:center;padding:12px 8px;border-top:1px solid #ffffff15;border-bottom:1px solid #ffffff15}.round{font-family:Georgia,serif;font-size:25px}.dora{display:flex;gap:5px}.dock{position:sticky;bottom:0;z-index:5;margin:18px -24px -24px;padding:18px 18px calc(18px + env(safe-area-inset-bottom));background:linear-gradient(#173e35f5,#102b26);border-top:1px solid #ffffff15}.hand{display:flex;justify-content:center;gap:4px;padding:12px 0 8px;perspective:800px}.actions{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:14px}.instruction{text-align:center;font-size:12px;color:var(--muted);min-height:18px}.melds{display:flex;gap:12px;margin-top:10px}.meld{display:flex;gap:2px}.result{padding:20px;background:#102d26;border:1px solid var(--gold);border-radius:12px;margin:20px 0}.result p{margin:6px 0}#toast{position:fixed;top:80px;left:50%;transform:translateX(-50%);background:#f4e6bf;color:#27382e;padding:12px 20px;border-radius:10px;max-width:90%;z-index:20;display:none}.demo-tiles{display:flex;gap:10px;margin:26px 0 30px;transform:rotate(-4deg)}.demo-tiles .tile{width:49px;height:66px}.invite-note{overflow-wrap:anywhere}.table-label{font-size:11px;color:var(--gold)}@media(min-width:750px){.table{grid-template-columns:1fr 1fr 1fr;min-height:430px}.center{grid-column:1/-1}.player.you{grid-column:1/-1}.river{grid-template-columns:repeat(6,32px)}.river .tile{width:32px;height:43px}.dock{border-radius:18px}.hand .tile{width:48px;height:64px}}@media(max-width:480px){header{height:58px;padding:0 16px}main{padding:16px}.landing{margin:20px auto}.panel{padding:20px}.table{padding:9px;border-width:5px;gap:8px;border-radius:18px;min-height:420px}.player{padding:5px}.player:nth-child(3){grid-column:1/-1}.river{gap:3px}.player:nth-child(3) .river{grid-template-columns:repeat(12,23px)}.player-name{font-size:11px}.center{padding:7px 2px;grid-row:3}.dock{margin:14px -16px -16px;padding-left:8px;padding-right:8px}.hand{gap:3px}.hand .tile{width:calc((100vw - 66px)/14);height:calc((100vw - 66px)/14 * 1.45);border-radius:3px}.tile.drawn{margin-left:7px}.rules{gap:0 10px}.round{font-size:21px}}@media(prefers-reduced-motion:no-preference){.tile{transition:transform .12s}.panel{animation:appear .3s ease-out}@keyframes appear{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}}
.concealed .tile{flex-shrink:1;min-width:0}.concealed{max-width:100%}
@media(max-width:600px){.hand{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:9px 5px;max-width:390px;margin:auto;padding-top:16px}.hand .tile{width:100%;height:auto;aspect-ratio:40/55;min-height:44px}.hand .tile.drawn{margin-left:0;box-shadow:0 0 0 1px var(--gold),2px 4px 0 #beb494,3px 6px 0 #0e5748}.dock{padding-top:10px}.tile.selected{transform:translateY(-6px)}}
/* Ceramic faces and a restrained ivory/green sidewall. */
.tile{background:linear-gradient(135deg,#fffefb 0%,#faf8f2 65%,#ece9df 100%);border:1px solid #e5dfd0;border-radius:5px;box-shadow:inset 1px 1px 0 #fff,1px 1.5px 0 #dcd6c5,2px 3px 0 #c5bcaa,2px 4.5px 0 #216351,3px 6px 8px #061d2440;transform:rotateX(8deg) rotateY(-7deg) skewY(-2deg)}
.tile svg{width:89%;height:90%;overflow:visible;pointer-events:none}
.tile:has(>.tile-label){container-type:inline-size}
.tile-label{position:absolute;top:1px;left:1px;max-width:calc(100% - 2px);font-size:clamp(6px,26cqw,11px);font-weight:800;line-height:1;letter-spacing:-.02em;color:#8f1f1f;text-shadow:0 0 2px #fffef8,0 0 1px #fffef8;pointer-events:none;z-index:1;overflow:hidden}
@container (max-width:10px){.tile-label{font-size:6px;top:0;left:0;text-shadow:0 0 1px #fffef8}}
.tile.small-tile{box-shadow:inset 1px 1px 0 #fff,1px 1.5px 0 #d7d0be,1px 2.25px 0 #216351}
.tile.back{background:linear-gradient(135deg,#5b9b7b,#37795f 75%,#2c684f);border-color:#80a68f;box-shadow:inset 1px 1px 0 #a9c4aa70,1px 2px 0 #ede9dc,2px 4px 0 #cdc6b5}
.tile.selected{transform:translateY(-8px) rotateX(8deg) rotateY(-7deg) skewY(-2deg);box-shadow:0 0 0 2px #dfc788,inset 1px 1px 0 #fff,1px 2.25px 0 #d7d0be,2px 4.5px 0 #216351,3px 7px 12px #0006}
@media(max-width:600px){.hand{gap:11px 7px;padding:16px 4px 10px}.hand .tile{aspect-ratio:3/4;border-radius:5px}.hand .tile.drawn{box-shadow:0 0 0 1px #dfc788,inset 1px 1px 0 #fff,1px 1.5px 0 #dcd6c5,2px 3px 0 #c5bcaa,2px 4.5px 0 #216351}.tile.selected{transform:translateY(-6px) rotateX(8deg) rotateY(-7deg) skewY(-2deg)}}
.text-link{color:var(--gold);font-size:12px;text-decoration:none}.text-link:hover{text-decoration:underline}.header-tools{display:flex;align-items:center;gap:14px}.muted{color:var(--muted)}textarea{width:100%;font:inherit;line-height:1.6;padding:13px;background:#102e28;color:#f4f0df;border:1px solid #ffffff30;border-radius:8px;resize:vertical}.draft-note{margin-top:8px;color:var(--muted)}.checkbox-label{display:flex;align-items:flex-start;gap:10px;line-height:1.5}.checkbox-label input{width:18px;height:18px;flex-shrink:0;margin:2px 0 0;accent-color:var(--gold)}[hidden]{display:none!important}.room-buttons{display:flex;gap:7px;flex-wrap:wrap}.spectator-note{color:var(--gold);text-align:center;padding:20px;font-size:13px}.spectator-table .player{grid-column:auto}.spectator-table .center{grid-row:3}.spectator-table{grid-template-columns:1fr 1fr}.spectator-table .river{grid-template-columns:repeat(6,25px)}.spectator-table .player:nth-child(3) .river{grid-template-columns:repeat(6,25px)}
.bot-controls{display:flex;flex-direction:column;gap:8px;margin-top:14px}.bot-controls button{padding:9px 10px;font-size:12px}.bot-level{padding:10px;font-size:13px}.room-head .room-buttons{justify-content:flex-end}.room-head .room-buttons button{font-size:12px;padding:8px 10px}
.join-roles{border:0;padding:0;margin:20px 0}.join-roles legend{font-size:13px;color:#d9e2d8}.join-roles label{display:flex;gap:12px;align-items:center;padding:14px;border:1px solid #ffffff25;border-radius:10px}.join-roles label:has(input:checked){border-color:var(--gold);background:#dfc7880c}.join-roles input{width:18px;height:18px;accent-color:var(--gold);flex-shrink:0}.join-roles strong{font-size:14px;font-weight:600}.join-roles small{display:block;color:var(--muted);margin-top:4px}
.melds{flex-wrap:wrap}.spectator-table .river,.spectator-table .player:nth-child(3) .river{grid-template-columns:repeat(6,minmax(0,25px))}.spectator-table .river .tile{max-width:100%}
.tile-library{position:absolute;width:0;height:0;overflow:hidden;pointer-events:none}.header-tools{gap:10px}#connection{max-width:90px;text-align:right;line-height:1.2}.brand{white-space:nowrap}.chat-toggle{padding:7px 10px;font-size:12px;min-height:36px}.chat-unread{display:inline-block;background:var(--gold);color:#183e35;border-radius:10px;padding:1px 5px;margin-left:4px}.chat-backdrop{position:fixed;inset:0;z-index:29;background:#071d2866;backdrop-filter:blur(2px)}.chat-panel{position:fixed;z-index:30;right:16px;bottom:16px;width:min(390px,calc(100vw - 32px));height:min(500px,70dvh);display:flex;flex-direction:column;border:1px solid #b6c6b440;border-radius:18px;background:#173c33;box-shadow:0 14px 60px #0007;padding:16px;padding-bottom:calc(16px + env(safe-area-inset-bottom))}.chat-panel-head{display:flex;align-items:center;justify-content:space-between}.chat-panel-head h2{font-family:inherit;font-size:17px;font-weight:600;margin:0}.chat-close{font-size:22px;width:44px;padding:0}.chat-status{font-size:11px;color:var(--muted);margin:10px 0}.chat-messages{flex:1;min-height:0;overflow-y:auto;list-style:none;padding:0;margin:0;overscroll-behavior:contain}.chat-message,.chat-emote-message{display:grid;grid-template-columns:1fr auto;gap:4px 12px;padding:12px 0;border-bottom:1px solid #ffffff10}.chat-message strong,.chat-emote-message strong{font-size:11px;color:var(--gold);font-weight:500}.chat-message span,.chat-emote-message span{grid-row:2;grid-column:1/-1;overflow-wrap:anywhere;font-size:14px;line-height:1.5;white-space:pre-wrap}.chat-emote-message span{font-size:28px;line-height:1.1}.chat-message time,.chat-emote-message time{grid-column:2;grid-row:1;font-size:10px;color:var(--muted)}.chat-emotes{display:flex;gap:7px;margin-top:10px;justify-content:space-between}.chat-emotes button{width:44px;height:44px;padding:0;font-size:23px}.chat-form{display:flex;gap:8px;margin-top:10px}.chat-form input{min-width:0;flex:1;font-size:16px;padding:11px}.chat-form button{padding:10px 14px}.chat-label{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
@media(max-width:360px){header{padding:0 12px}.brand{font-size:21px}.brand span{margin-left:5px}.header-tools{gap:7px}#connection{font-size:10px;max-width:66px}.header-tools .text-link{font-size:11px}.chat-emotes{gap:3px}.chat-panel{right:12px;width:calc(100vw - 24px)}}
.river{grid-template-columns:repeat(6,minmax(0,25px))}.river .tile{max-width:100%}.river .tile.riichi{grid-column:span 2;justify-self:center;margin:0;transform:rotate(90deg)}
@media(min-width:750px){.river{grid-template-columns:repeat(6,minmax(0,32px))}}
@media(max-width:480px){.player:nth-child(3) .river{grid-template-columns:repeat(12,minmax(0,23px))}.spectator-table .player:nth-child(3) .river{grid-template-columns:repeat(6,minmax(0,25px))}}
@media(max-width:360px){.hand{grid-template-columns:repeat(6,minmax(0,1fr));gap:10px 6px}}
.chat-notice{position:fixed;top:calc(66px + env(safe-area-inset-top));left:50%;transform:translateX(-50%);width:min(460px,calc(100vw - 32px));z-index:25;background:#eff0d9;color:#173c33;border:1px solid #dfc788;box-shadow:0 8px 24px #0004;text-align:left;font-size:14px;line-height:1.5;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:13px 16px}.hand-summary{padding:0 14px;margin-bottom:14px;border:1px solid #dfc78840;border-radius:10px;background:#dfc78807}.hand-summary summary{font-size:13px;line-height:1.5;padding:12px 0}.hand-summary p{margin:6px 0 12px}
.feedback-board{max-width:1100px}.feedback-board h1{font-size:clamp(32px,5vw,48px)}.feedback-board>p{max-width:620px}.feedback-layout{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:30px}.feedback-compose,.request-section{min-width:0}.feedback-compose .panel{margin-top:0}.board-heading{display:flex;justify-content:space-between;align-items:center;gap:12px}.board-heading h2{font-size:23px}.board-filters{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:18px}.board-filters label{margin:12px 0 0}.board-filters select{margin-top:7px}.review-strip{font-size:12px;color:#d9dbb7;padding:14px 0 20px;line-height:1.7;border-bottom:1px solid #ffffff18;margin-bottom:24px}.request-card{padding:20px 0;border-bottom:1px solid #ffffff20;scroll-margin-top:20px}.request-card h3{font-size:19px;line-height:1.4;margin:12px 0 8px;overflow-wrap:anywhere}.request-top,.request-bottom{display:flex;justify-content:space-between;align-items:center;gap:12px}.request-body{font-size:14px;white-space:pre-wrap;overflow-wrap:anywhere;margin:8px 0 16px}.request-status{font-size:10px;letter-spacing:.08em;text-transform:uppercase;border:1px solid #ffffff30;border-radius:20px;padding:5px 9px}.status-in_progress{color:#dfc788;border-color:#dfc78880}.status-done{color:#bbd8a2;border-color:#bbd8a280}.status-planned{color:#a6cdd3;border-color:#a6cdd380}.status-dismissed{color:#adb9b0}.vote-button{font-size:12px;min-height:44px;padding:9px 13px}.vote-button:disabled{opacity:.8}.request-update{padding:12px 14px;margin:14px 0;background:#ffffff05;border-left:2px solid #dfc78880}.request-update p{margin:6px 0}.board-empty{padding:26px 0;font-size:14px}.feedback-compose{scroll-margin-top:20px}
@media(max-width:720px){.feedback-layout{grid-template-columns:1fr;gap:30px}.feedback-compose{grid-row:1}.request-section{grid-row:2}.feedback-board{padding-top:22px}.board-heading{align-items:baseline}.board-heading h2{font-size:21px}.board-heading .text-link{font-size:11px}}
.room-head>button{font-size:12px;padding:9px 12px;white-space:nowrap;flex-shrink:0}.player-name strong{min-width:0;overflow-wrap:anywhere}.player-name>span{white-space:nowrap;font-variant-numeric:tabular-nums}
@media(max-width:740px){.table .center{grid-row:1}.feedback-layout .request-section{grid-row:1}.feedback-layout .feedback-compose{grid-row:2}}

.table-navigation{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:18px}.table-navigation .small{flex:1;min-width:120px}
@media(max-width:480px){.demo-tiles{gap:7px;transform:none}.demo-tiles .tile{flex:1;min-width:0;width:auto;height:auto;aspect-ratio:49/66}}

/* Short phone screens: keep the hand reachable while the public table scrolls. */
@media (orientation:landscape) and (max-height:500px) {
  body:has(main > .dock) header{height:40px;padding:0 max(12px,env(safe-area-inset-right)) 0 max(12px,env(safe-area-inset-left))}
  body:has(main > .dock) .brand{font-size:21px}
  body:has(main > .dock) main{height:calc(100dvh - 40px);display:flex;flex-direction:column;gap:6px;padding:4px max(10px,env(safe-area-inset-right)) 0 max(10px,env(safe-area-inset-left));max-width:none}
  main:has(> .dock) > .room-head{flex:none;min-height:32px;gap:8px}
  main:has(> .dock) > .room-head p{display:none}
  main:has(> .dock) > .room-head .eyebrow{font-size:10px;letter-spacing:.12em}
  main:has(> .dock) > .room-head button{padding:4px 10px;min-height:32px}
  main:has(> .dock) > .table{flex:1;min-height:75px;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;margin:0;border-width:4px;border-radius:12px;padding:7px;gap:8px;grid-template-columns:repeat(3,minmax(0,1fr));align-content:start}
  main:has(> .dock) .table .center{grid-row:1;padding:3px 5px;gap:12px}
  main:has(> .dock) .round{font-size:18px}
  main:has(> .dock) .center .small{font-size:10px}
  main:has(> .dock) .dora .tile{width:19px;height:26px}
  main:has(> .dock) .player{padding:4px;grid-column:auto}
  main:has(> .dock) .player.you{grid-column:1/-1}
  main:has(> .dock) .player-name{font-size:11px;margin-bottom:5px}
  main:has(> .dock) .concealed .tile{height:12px;width:9px}
  main:has(> .dock) .river{margin-top:6px;grid-template-columns:repeat(6,minmax(0,22px));gap:3px;min-height:0}
  main:has(> .dock) .river .tile{width:22px;height:29px}
  main:has(> .dock) .player.you .river{grid-template-columns:repeat(12,minmax(0,22px))}
  main:has(> .dock) .melds{margin-top:5px;gap:7px}
  main:has(> .dock) .meld .tile{width:20px;height:27px}
  main:has(> .dock) > .dock{position:relative;flex:none;margin:0;border-radius:10px 10px 0 0;padding:4px 0 calc(5px + env(safe-area-inset-bottom));background:#14382f}
  main:has(> .dock) .instruction{font-size:11px;min-height:14px;line-height:14px}
  main:has(> .dock) .hand{display:flex;max-width:none;gap:3px;margin:0;padding:9px 3px 5px;justify-content:center}
  main:has(> .dock) .hand .tile{width:clamp(36px,6.1vw,44px);height:53px;min-height:44px;aspect-ratio:auto;border-radius:4px}
  main:has(> .dock) .hand .tile.drawn{margin-left:5px}
  main:has(> .dock) .actions{gap:6px;margin-top:4px;max-height:96px;overflow-y:auto}
  main:has(> .dock) .actions button{min-height:44px;padding:7px 14px;font-size:12px}
  main:has(> .dock) > .hand-summary{flex:none;margin:0;padding:0 10px;max-height:28vh;overflow:auto}
  main:has(> .dock) > .hand-summary summary{font-size:11px;padding:5px 0}
  main:has(> .dock) > .result{flex:none;margin:0;padding:8px 12px;max-height:30vh;overflow:auto}
  .chat-panel{top:8px;bottom:8px;height:auto;padding:10px;width:min(440px,calc(100vw - 32px))}
  .chat-status{margin:4px 0}.chat-emotes,.chat-form{margin-top:5px}
  .chat-notice{top:44px;padding:8px 14px}
}
@media (orientation:landscape) and (max-height:500px) {
  main:has(> .dock){position:relative;text-size-adjust:100%;-webkit-text-size-adjust:100%}
  main:has(> .dock) > .table-navigation{position:absolute;right:max(10px,env(safe-area-inset-right));top:4px;margin:0;z-index:6}
  main:has(> .dock) > .table-navigation .small{display:none}
  main:has(> .dock) > .table-navigation button{min-height:32px;padding:4px 10px;font-size:12px}
  main:has(> .dock) > .room-head{padding-right:90px}
}
@media (orientation:landscape) and (max-height:500px) {
  body:has(.spectator-table) header{height:40px;padding:0 max(12px,env(safe-area-inset-right)) 0 max(12px,env(safe-area-inset-left))}
  body:has(.spectator-table) .brand{font-size:21px}
  main:has(> .spectator-table){height:calc(100dvh - 40px);display:flex;flex-direction:column;gap:6px;padding:4px max(10px,env(safe-area-inset-right)) 0 max(10px,env(safe-area-inset-left));max-width:none}
  main:has(> .spectator-table) .table-navigation{margin:0;min-height:32px}
  main:has(> .spectator-table) .table-navigation button{min-height:32px;font-size:12px;padding:4px 10px}
  main:has(> .spectator-table) .room-head{min-height:32px}
  main:has(> .spectator-table) .room-head p{display:none}
  main:has(> .spectator-table) .room-head button{min-height:32px;padding:4px 10px}
  .spectator-table{flex:1;min-height:70px;overflow:auto;overscroll-behavior:contain;align-content:start;margin:0;padding:7px;border-width:4px;gap:8px;border-radius:12px;grid-template-columns:repeat(4,minmax(0,1fr))}
  .spectator-table .center{grid-row:1;padding:3px 5px}.spectator-table .round{font-size:18px}
  .spectator-table .player{padding:4px}.spectator-table .player-name{font-size:11px}
  .spectator-table .river,.spectator-table .player:nth-child(3) .river{grid-template-columns:repeat(6,minmax(0,20px));margin-top:6px}
  .spectator-table .river .tile{width:20px;height:27px}
  .spectator-table .concealed .tile{width:9px;height:12px}
  main:has(> .spectator-table) .spectator-note{padding:4px;font-size:11px}
  main:has(> .spectator-table) > .result,main:has(> .spectator-table) > .hand-summary{margin:0;padding:4px 10px;max-height:28vh;overflow:auto;flex:none}
}
/* Pointer events cover mouse, pen and touch without native image dragging. */
.hand button.tile{touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.hand .drag-source{opacity:.35}
.drag-ghost{position:fixed;z-index:60;pointer-events:none;transform:translate(-50%,-65%) rotate(-5deg);box-shadow:3px 8px 18px #0008}
.discard-drop{position:fixed;left:50%;transform:translateX(-50%);z-index:55;width:min(350px,calc(100vw - 32px));min-height:60px;display:flex;align-items:center;justify-content:center;border:2px dashed #dfc788;border-radius:14px;background:#14382ff2;color:#f4f0df;font-size:14px;box-shadow:0 5px 24px #0005;pointer-events:auto}
.discard-drop.over{background:#dfc788;color:#173c33;border-style:solid}
.player.you.discard-hover{box-shadow:inset 0 0 0 2px #dfc788}

/* Upright hand faces retain the ceramic depth from their layered shadows. */
.hand .tile{transform:none}
.hand .tile.selected{transform:translateY(-8px)}
@media(max-width:600px){.hand .tile.selected{transform:translateY(-6px)}}
/* Concealed hands shrink uniformly instead of compressing just tile width. */
.concealed .tile{width:13px;height:auto;aspect-ratio:40/55;flex:0 1 13px;min-width:0;border-radius:2px;transform:none}
@media(orientation:landscape) and (max-height:500px){
  main:has(> .dock) .concealed .tile,.spectator-table .concealed .tile{width:9px;height:auto;flex-basis:9px}
}
.concealed{align-items:flex-start}
/* Engine feedback. On phones the card floats in the band above the hand and yields to action buttons. */
.coach-setting{display:flex;align-items:center;gap:10px;min-height:44px;margin:4px 0 8px;font-size:12px;line-height:1.5;color:#d9e2d8}
.coach-setting input{width:18px;height:18px;padding:0;flex:none;accent-color:var(--gold)}
.coach-best{--coach:#9fd38a}.coach-good{--coach:#c9dba6}.coach-inaccuracy{--coach:#e7c46d}.coach-mistake{--coach:#ef9a7a}
.coach-card{max-width:440px;margin:0 auto 8px;padding:4px 10px 5px;border:1px solid #dfc78855;border-left:4px solid var(--coach);border-radius:8px;background:#10352bf2;font-size:11px;line-height:1.35;text-align:left}
.coach-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 8px;margin:0 0 2px}
.coach-verdict{color:var(--coach);font-size:12px}
.coach-note{color:var(--muted);min-width:0;overflow-wrap:anywhere}
.coach-row{display:grid;grid-template-columns:50px auto minmax(0,1fr);align-items:center;gap:6px;min-height:19px}
.coach-who{color:var(--muted);font-size:9px;letter-spacing:.08em;text-transform:uppercase}
.coach-move{display:inline-flex;align-items:center;gap:4px;white-space:nowrap}
.coach-meld{display:inline-flex;gap:1px}
.coach-card .tile.small-tile,.coach-review .tile.small-tile{width:13px;height:18px;transform:none;border-radius:2px;box-shadow:inset 1px 1px 0 #fff,1px 1px 0 #d7d0be,1px 1.75px 0 #216351}
.coach-facts{min-width:0;color:#d9e2d8;overflow-wrap:anywhere}
body.table-immersive #app>.dock>.coach-card{position:absolute;z-index:7;left:max(8px,env(safe-area-inset-left));right:max(8px,env(safe-area-inset-right));bottom:calc(100% + 4px);margin:0 auto;pointer-events:none;box-shadow:0 4px 14px #0006}
body.table-immersive #app>.dock:has(>.own-melds)>.coach-card{bottom:calc(100% + 4px + var(--own-meld-row))}
body.table-immersive #app>.dock:has(>.actions:not(:empty))>.coach-card{display:none}
.coach-review{margin-top:12px;padding-top:2px;border-top:1px solid #dfc78840}
.coach-review h2{margin:8px 0 0;font-family:inherit;font-size:14px;color:var(--gold)}
.coach-seat>summary{padding:9px 0;font-size:12px;line-height:1.5;overflow-wrap:anywhere}
.coach-seat>summary span{color:var(--muted);font-size:11px}
.coach-seat ol{list-style:none;margin:0 0 6px;padding:0}
.coach-entry{margin:0 0 6px;padding:4px 0 4px 8px;border-left:3px solid var(--coach);font-size:11px;line-height:1.35}
body.table-immersive #app>.coach-review{position:absolute;z-index:12;top:58px;left:12px;right:12px;max-height:calc(100dvh - 100px);overflow:auto;margin:0;padding:4px 14px 10px;background:#10352bf5;border:1px solid var(--gold);border-radius:12px}
.history-page{max-width:720px;margin:0 auto 40px}
.history-page h1{font-size:clamp(30px,6vw,44px);margin:8px 0 14px}
.history-page h2{margin:26px 0 10px;font-size:20px}
.history-nav{margin-bottom:16px}
.history-list,.history-standings{list-style:none;margin:18px 0;padding:0}
.history-card{display:flex;flex-direction:column;gap:6px;width:100%;margin:0 0 10px;padding:14px 16px;text-align:left;border-radius:12px}
.history-card-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px 12px}
.history-card-head strong{color:var(--gold);font-size:16px}
.history-card-players{color:var(--muted);overflow-wrap:anywhere}
.history-standings li{display:flex;align-items:baseline;gap:12px;padding:10px 0;border-top:1px solid #ffffff14}
.history-standings li.you strong{color:var(--gold)}
.history-standings strong{flex:1;min-width:0;overflow-wrap:anywhere}
.history-rank{width:36px;color:var(--muted)}
.history-rules>summary{color:var(--gold);font-size:13px;padding:8px 0}
.history-hand{border:1px solid #ffffff1c;background:#ffffff05;border-radius:12px;margin:0 0 10px}
.history-hand>summary{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 12px;padding:12px 14px;cursor:pointer}
.history-hand-title{font-weight:600}
.history-hand-outcome{color:var(--gold);font-size:13px;overflow-wrap:anywhere}
.history-hand-body{padding:0 14px 12px}
.history-dora{display:flex;flex-wrap:wrap;gap:8px 20px;margin-bottom:8px}
.history-tiles,.history-river{display:flex;flex-wrap:wrap;gap:2px;margin-top:4px}
.history-result{padding:8px 0 8px 10px;border-left:3px solid var(--gold);margin:8px 0}
.history-result p{margin:4px 0}
.history-seat{padding:10px 0;border-top:1px solid #ffffff14}
.history-seat-head{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 12px;font-size:13px}
.history-seat.you .history-seat-head strong{color:var(--gold)}
.history-points .gain{color:#9fd38a}
.history-points .loss{color:#ef9a7a}
.history-note{color:var(--muted);margin:4px 0}
.history-label{display:block;margin-top:8px;color:var(--muted);font-size:10px;letter-spacing:.12em;text-transform:uppercase}
.history-seat .result-hand{margin:4px 0}
.history-page .tile.small-tile{width:clamp(16px,4.5vw,24px);height:auto;aspect-ratio:1 / 1.34;transform:none}
.history-river .tile.riichi-discard{outline:2px solid var(--gold);outline-offset:1px}

/* Generated table layout: edit public/table-layout.css */
/* Landscape table: one viewport, four seats, stable space for every action. */
#app>.table{isolation:isolate}
#app>.table::before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;border-radius:inherit;background:radial-gradient(ellipse at center,#756035,#44321e 80%);opacity:0;transition:opacity .45s ease}
#app>.table.local-discard-turn::before{opacity:1}
#app>.table.local-turn-enter::before{animation:local-turn-fade .45s ease}
@keyframes local-turn-fade{from{opacity:0}to{opacity:1}}
@media(prefers-reduced-motion:reduce){#app>.table::before{transition:none}#app>.table.local-discard-turn::before{animation:none}}
.table-tools{display:none}
/* The same settings remain available when the phone is upright. */
body.table-view .table-tools{position:relative;display:flex;justify-content:space-between;gap:8px;margin:8px 0;z-index:15;pointer-events:none}
body.table-view .table-tools>button{pointer-events:auto;min-height:44px;font-size:13px;padding:8px 12px}
body.table-view .table-popover{position:absolute;top:50px;width:min(330px,calc(100vw - 36px));max-height:min(500px,70dvh);overflow:auto;overscroll-behavior:contain;background:#14382ff7;border:1px solid #dfc78860;border-radius:14px;padding:16px;box-shadow:0 12px 45px #0009;pointer-events:auto}
body.table-view .scores-menu{left:0}body.table-view .table-menu,body.table-view .settings-menu{right:0}
body.table-view .table-popover h2{font-family:inherit;font-size:16px;margin:0 0 12px}
body.table-view .table-popover button,body.table-view .table-popover a.table-feedback{display:block;width:100%;min-height:44px;margin:5px 0;text-align:left;font-size:13px;padding:11px 12px;border-radius:8px}
body.table-view .table-feedback{color:var(--gold);text-decoration:none}
body.table-view .scores-menu ol{padding:0;list-style:none;margin:0}
body.table-view .scores-menu li{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 0;border-top:1px solid #ffffff14}
body.table-view .scores-menu strong{font-size:13px;overflow-wrap:anywhere}
body.table-view .scores-menu small{display:block;color:var(--muted);font-size:10px;margin-top:4px}
body.table-view .scores-menu li>span{color:var(--gold);font-variant-numeric:tabular-nums}
body.table-view .table-menu-status,body.table-view .table-room-code{font-size:11px;margin:6px 0 12px}
body.table-view .table-popover summary{padding:13px 0;font-size:13px}
body.table-view .setting-toggle,body.table-view .coach-setting{display:flex;align-items:flex-start;gap:10px;line-height:1.5;font-size:12px;margin:0 0 8px;min-height:44px}
body.table-view .setting-toggle input,body.table-view .coach-setting input{width:18px;height:18px;flex:none;margin-top:2px;accent-color:var(--gold)}
body.table-view .setting-toggle span{display:flex;flex-direction:column;gap:3px;min-width:0}
body.table-view .setting-toggle small,body.table-view .coach-setting small{display:block;color:var(--muted);font-size:10px;line-height:1.4;font-weight:400}
body.table-view .table-rule{display:flex;justify-content:space-between;gap:12px;font-size:10px;line-height:1.5;margin:8px 0}
body.table-view .table-rule strong{font-weight:500;white-space:nowrap}

@media (max-width:740px), (orientation:landscape) and (max-height:600px){
 body.table-immersive{height:100dvh;min-height:0;overflow:hidden;overscroll-behavior:none;background:#1c4738}
 body.table-immersive>header{display:none}
 body.table-immersive #app{position:fixed;inset:0;width:100%;height:100dvh;max-width:none;margin:0;padding:0;display:block;overflow:hidden;isolation:isolate}
 body.table-immersive #app>.room-head,body.table-immersive #app>.table-navigation{display:none}
 body.table-immersive #app>.table{--river-tile:clamp(15px,4.1dvh,20px);position:absolute;inset:0 0 calc(128px + env(safe-area-inset-bottom));display:block;min-height:0;margin:0;padding:0;overflow:hidden;border:0;border-radius:0;box-shadow:inset 0 0 100px #071d2855;background:radial-gradient(ellipse at center,#376753,#1c4738 80%)}
 body.table-immersive #app>.table>.player{position:absolute;grid-column:auto;padding:2px 4px;min-width:0;border:0;border-radius:0;background:none;box-shadow:none;overflow:hidden;display:flex;align-items:center;flex-direction:column;gap:3px;width:min(290px,calc(100vw - 300px));height:86px;transform-origin:center}
 body.table-immersive #app>.table>.player.active::after{content:'';position:absolute;left:50%;bottom:0;width:28px;height:2px;background:var(--gold);transform:translateX(-50%);border-radius:2px}
 body.table-immersive .table>.player>.player-name{display:none}
 body.table-immersive #app>.table>.seat-top{left:50%;top:2px;transform:translateX(-50%) rotate(180deg)}
 body.table-immersive #app>.table>.seat-bottom{left:50%;bottom:3px;transform:translateX(-50%);height:64px;width:min(360px,calc(100vw - 270px));justify-content:flex-end}
 body.table-immersive #app>.table>.seat-left,body.table-immersive #app>.table>.seat-right{top:50%;width:calc(100dvh - 148px);height:122px;max-width:280px;min-width:110px}
 body.table-immersive #app>.table>.seat-left{left:calc(max(6px,env(safe-area-inset-left)) + 58px);transform:translate(-50%,-50%) rotate(-90deg)}
 body.table-immersive #app>.table>.seat-right{right:calc(max(6px,env(safe-area-inset-right)) + 58px);transform:translate(50%,-50%) rotate(90deg)}
 body.table-immersive #app>.table .concealed{justify-content:center;flex:none;gap:1px;max-width:100%;height:14px}
 body.table-immersive #app>.table .concealed .tile{width:9px;height:auto;flex:0 1 9px;aspect-ratio:40/55}
 body.table-immersive #app>.table .melds{flex:none;justify-content:center;flex-wrap:nowrap;gap:5px;margin:0;max-width:100%;min-height:0}
 body.table-immersive #app>.table .melds:empty{display:none}
 body.table-immersive #app>.table .meld .tile{width:15px;height:20px}
 body.table-immersive #app>.table .river,body.table-immersive #app>.table .player:nth-child(3) .river{display:grid;grid-template-columns:repeat(6,var(--river-tile));gap:2px;margin:2px 0 4px;min-height:0;min-width:0;max-height:100%;overflow:auto;overscroll-behavior:contain;scrollbar-width:none;transform:none;flex:1;align-content:start;flex-shrink:1;padding:1px 3px 4px}
 body.table-immersive #app>.table .river::-webkit-scrollbar{display:none}
 body.table-immersive #app>.table .river .tile{width:var(--river-tile);height:calc(var(--river-tile)*1.34);max-width:100%;transform:none;border-radius:2px}
 body.table-immersive #app>.table .river .tile.riichi{transform:rotate(90deg);grid-column:span 2;margin:0;justify-self:center}
 body.table-immersive #app>.table .seat-bottom .river{grid-template-columns:repeat(12,var(--river-tile));flex:0 1 auto}
 body.table-immersive #app>.table>.center{position:absolute;left:50%;top:48%;transform:translate(-50%,-50%);width:144px;height:auto;grid-row:auto;grid-column:auto;display:flex;justify-content:center;align-items:center;gap:10px;padding:7px 10px;border:0;border-radius:10px;background:none;text-align:center;pointer-events:none}
 body.table-immersive #app>.table .center .round{font-size:18px}
 body.table-immersive #app>.table .center .table-label{font-size:9px;line-height:1.5}
 body.table-immersive #app>.table .center>div:first-child>.table-label{color:#fff6dc;font-weight:600;text-shadow:0 1px 2px #0009}
 body.table-immersive #app>.table .center .round{text-shadow:0 1px 3px #0009}
 body.table-immersive #app>.table .center .dora{gap:2px;margin-top:3px;justify-content:center;flex-wrap:wrap;max-width:82px}
 body.table-immersive #app>.table .center .dora .tile{width:15px;height:20px}
 body.table-immersive #app>.dock{position:absolute;inset:auto 0 0;z-index:5;height:calc(128px + env(safe-area-inset-bottom));display:grid;grid-template-rows:48px 15px calc(65px + env(safe-area-inset-bottom));gap:0;margin:0;padding:0 max(6px,env(safe-area-inset-right)) 0 max(6px,env(safe-area-inset-left));border:0;border-radius:0;background:linear-gradient(#194c3bcc,#10382e)}
 body.table-immersive #app>.dock>.actions{grid-row:1;margin:0;padding:0;min-height:48px;max-height:48px;overflow:auto;flex-wrap:nowrap;align-items:center;justify-content:center;gap:6px;scrollbar-width:thin}
 body.table-immersive #app>.dock>.actions button{min-height:44px;max-height:44px;flex:none;padding:5px 13px;font-size:12px;white-space:nowrap}
 body.table-immersive #app>.dock>.actions .tile{width:17px;height:23px}
 body.table-immersive #app>.dock>.instruction{grid-row:2;min-height:15px;font-size:10px;line-height:15px;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}
 body.table-immersive #app>.dock>.hand{grid-row:3;display:flex;align-items:flex-end;justify-content:center;width:100%;max-width:none;min-width:0;margin:0;padding:7px 0 max(6px,env(safe-area-inset-bottom));gap:clamp(1px,.3vw,3px);overflow:visible;perspective:none}
 body.table-immersive #app>.dock>.hand .tile{width:clamp(30px,5.8vw,44px);height:50px;min-height:44px;aspect-ratio:auto;border-radius:4px;transform:none;flex:0 1 44px;min-width:0;box-shadow:inset 1px 1px #fff,1px 1.5px #dcd6c5,1px 3px #216351}
 body.table-immersive #app>.dock>.hand .tile.drawn{margin-left:5px}
 body.table-immersive #app>.dock>.hand .tile.selected{transform:translateY(-6px);box-shadow:0 0 0 2px var(--gold),1px 3px #216351}
 body.table-immersive .table-tools{position:absolute;inset:0;display:block;pointer-events:none;z-index:15;margin:0}
 body.table-immersive .table-tools>button{position:absolute;top:max(4px,env(safe-area-inset-top));min-height:44px;padding:7px 12px;pointer-events:auto;background:#123c32ee;border-color:#dfc78838;font-size:17px}
 body.table-immersive .table-tools>button span{font-size:11px;vertical-align:middle;margin-left:4px}
 body.table-immersive .scores-toggle{left:max(6px,env(safe-area-inset-left))}
 body.table-immersive .table-menu-toggle{right:max(6px,env(safe-area-inset-right))}
 body.table-immersive .table-popover{position:absolute;top:52px;width:min(330px,calc(100vw - 24px));max-height:calc(100dvh - 64px - env(safe-area-inset-bottom));padding:16px;background:#14382ff7;border:1px solid #dfc78860;box-shadow:0 12px 45px #0009;border-radius:14px;overflow:auto;overscroll-behavior:contain;pointer-events:auto}
 body.table-immersive .scores-menu{left:max(6px,env(safe-area-inset-left))}
 body.table-immersive .table-menu,body.table-immersive .settings-menu{right:max(6px,env(safe-area-inset-right))}
 body.table-immersive .table-popover h2{margin:0 0 12px;font-family:inherit;font-size:16px}
 body.table-immersive .table-popover button,body.table-immersive .table-popover a.table-feedback{display:block;width:100%;min-height:44px;margin:5px 0;text-align:left;font-size:13px;padding:11px 12px;border-radius:8px}
 body.table-immersive .table-feedback{color:var(--gold);text-decoration:none}
 body.table-immersive .scores-menu ol{padding:0;list-style:none;margin:0}
 body.table-immersive .scores-menu li{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 0;border-top:1px solid #ffffff14}
 body.table-immersive .scores-menu strong{font-size:13px;overflow-wrap:anywhere}
 body.table-immersive .scores-menu small{display:block;color:var(--muted);font-size:10px;margin-top:4px}
 body.table-immersive .scores-menu li>span{color:var(--gold);font-variant-numeric:tabular-nums}
 body.table-immersive .table-menu-status,body.table-immersive .table-room-code{font-size:11px;margin:6px 0 12px}
 body.table-immersive .table-popover summary{padding:13px 0;font-size:13px}
 body.table-immersive .setting-toggle,body.table-immersive .coach-setting{display:flex;align-items:flex-start;gap:10px;line-height:1.5;font-size:12px;margin:0 0 8px;min-height:44px}
 body.table-immersive .setting-toggle input,body.table-immersive .coach-setting input{width:18px;height:18px;flex:none;margin-top:2px;accent-color:var(--gold)}
 body.table-immersive .setting-toggle span{display:flex;flex-direction:column;gap:3px;min-width:0}
 body.table-immersive .setting-toggle small,body.table-immersive .coach-setting small{display:block;color:var(--muted);font-size:10px;line-height:1.4;font-weight:400}
 body.table-immersive .table-rule{display:flex;justify-content:space-between;gap:12px;font-size:10px;line-height:1.5;margin:8px 0}
 body.table-immersive .table-rule strong{font-weight:500;white-space:nowrap}
 body.table-immersive #app>.hand-summary{display:none;position:absolute;z-index:14;left:50%;top:50px;transform:translateX(-50%);width:min(390px,calc(100vw - 220px));max-height:calc(100dvh - 190px);margin:0;padding:0 12px;overflow:auto;background:#14382ff7;flex:none}
 body.table-immersive.show-table-history #app>.hand-summary{display:block}
 body.table-immersive #app>.result{position:absolute;z-index:12;left:50%;top:12px;transform:translateX(-50%);width:min(410px,calc(100vw - 220px));max-height:calc(100dvh - 160px);overflow:auto;margin:0;padding:12px 16px;background:#10352bf5}
 body.table-immersive #app>.result h2{margin:0 0 8px;font-size:19px}
 body.table-immersive #app>.result p{font-size:12px}
 body.table-immersive .chat-notice{top:5px;width:min(420px,calc(100vw - 240px));min-height:44px;padding:8px 12px;font-size:12px}
 body.table-immersive #toast{top:55px;z-index:40;padding:10px 15px;font-size:12px}
 body.table-immersive.table-watching #app>.table{bottom:25px}
 body.table-immersive.table-watching #app>.table>.seat-left,body.table-immersive.table-watching #app>.table>.seat-right{width:calc(100dvh - 90px)}
 body.table-immersive.table-watching #app>.table>.seat-bottom{height:90px}
 body.table-immersive.table-watching #app>.spectator-note{position:absolute;left:0;right:0;bottom:0;height:25px;padding:4px;font-size:10px}
}
/* Small browser windows and an open mobile keyboard need a compact board. */
@media (orientation:landscape) and (max-width:520px) and (max-height:330px){
 body.table-immersive #app>.dock{height:calc(104px + env(safe-area-inset-bottom));grid-template-rows:44px 12px calc(48px + env(safe-area-inset-bottom))}
 body.table-immersive #app>.dock>.actions{min-height:44px;max-height:44px;gap:3px;justify-content:flex-start;padding:0 4px}
 body.table-immersive #app>.dock>.actions button{padding:4px 8px;font-size:11px}
 body.table-immersive #app>.dock>.instruction{min-height:12px;line-height:12px;font-size:9px}
 body.table-immersive #app>.dock>.hand{padding-top:3px;padding-bottom:max(4px,env(safe-area-inset-bottom));gap:1px}
 body.table-immersive #app>.dock>.hand .tile{height:40px;min-height:40px;width:25px;flex-basis:25px;border-radius:3px}
 body.table-immersive #app>.dock>.hand .tile.drawn{margin-left:3px}
 body.table-immersive #app>.table{--river-tile:11px;bottom:calc(104px + env(safe-area-inset-bottom))}
 body.table-immersive #app>.table>.seat-top{width:124px;height:48px;top:0;padding:0 2px;gap:1px}
 body.table-immersive #app>.table>.seat-bottom{width:174px;height:44px;bottom:0;padding:0 2px;gap:1px}
 body.table-immersive #app>.table>.seat-left,body.table-immersive #app>.table>.seat-right{width:calc(100dvh - 154px);min-width:80px;max-width:140px;height:84px;top:calc(50% + 23px);gap:1px;padding:0 2px}
 body.table-immersive #app>.table>.seat-left{left:44px}
 body.table-immersive #app>.table>.seat-right{right:44px}
 body.table-immersive #app>.table .concealed{height:9px;gap:1px}
 body.table-immersive #app>.table .concealed .tile{width:6px;flex-basis:6px}
 body.table-immersive #app>.table .melds{gap:2px}
 body.table-immersive #app>.table .meld .tile{width:9px;height:12px}
 body.table-immersive #app>.table .river,body.table-immersive #app>.table .player:nth-child(3) .river{gap:1px;margin:0;padding:0 1px 3px}
 body.table-immersive #app>.table>.center{width:104px;min-height:38px;top:51%;padding:3px 5px;gap:5px;border-radius:7px}
 body.table-immersive #app>.table .center .round{font-size:14px}
 body.table-immersive #app>.table .center .table-label{font-size:8px;line-height:1.3}
 body.table-immersive #app>.table .center>div:last-child>.table-label{display:none}
 body.table-immersive #app>.table .center .dora{max-width:43px;gap:1px;margin:0}
 body.table-immersive #app>.table .center .dora .tile{width:11px;height:15px}
 body.table-immersive .table-tools>button{min-height:44px;padding:6px 9px;font-size:16px}
 body.table-immersive .table-tools>button span{display:none}
 body.table-immersive .chat-notice{width:calc(100vw - 110px);font-size:10px}
 body.table-immersive.table-watching #app>.table{bottom:25px}
 body.table-immersive.table-watching #app>.table>.seat-left,body.table-immersive.table-watching #app>.table>.seat-right{width:calc(100dvh - 104px);top:55%}
 body.table-immersive.table-watching #app>.table>.seat-top{height:65px}
 body.table-immersive.table-watching #app>.table>.seat-bottom{height:60px}
}
@media (max-width:740px), (orientation:landscape) and (max-height:600px){
 body.table-immersive #app>.dock>.actions{justify-content:flex-start}
 body.table-immersive #app>.dock>.actions>button:first-child{margin-left:auto}
 body.table-immersive #app>.dock>.actions>button:last-child{margin-right:auto}
}

/* Actions overlay the felt only when needed. The hand and board never move. */
@media (max-width:740px), (orientation:landscape) and (max-height:600px){
 body.table-immersive #app{--hand-height:65px}
 body.table-immersive #app>.table{bottom:calc(var(--hand-height) + env(safe-area-inset-bottom));--river-tile:clamp(18px,4.9dvh,24px)}
 body.table-immersive #app>.dock{height:calc(var(--hand-height) + env(safe-area-inset-bottom));display:block;overflow:visible;background:linear-gradient(#194c3b88,#10382e)}
 body.table-immersive #app>.dock>.instruction{position:absolute;width:1px;height:1px;min-height:0;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
 body.table-immersive #app>.dock>.hand{height:100%;padding-top:7px}
 body.table-immersive #app>.dock>.actions{position:absolute;bottom:calc(100% + 7px);left:max(6px,env(safe-area-inset-left));right:max(6px,env(safe-area-inset-right));min-height:0;max-height:52px;padding:3px 2px;gap:6px;z-index:8;overflow-x:auto;overflow-y:hidden;filter:drop-shadow(0 3px 7px #0005);scrollbar-width:none}
 body.table-immersive #app>.dock>.actions:empty{display:none}
 body.table-immersive #app>.dock>.actions button{background:#174638f5;border-color:#dfc78890}
 body.table-immersive #app>.dock>.actions button.primary{background:var(--gold);color:#263b30}
 body.table-immersive #app>.table>.seat-top{height:110px;width:min(310px,calc(100vw - 280px))}
 body.table-immersive #app>.table>.seat-bottom{height:86px}
 body.table-immersive #app>.table>.seat-left,body.table-immersive #app>.table>.seat-right{width:calc(100dvh - 115px);max-width:330px;height:132px}
 body.table-immersive #app>.table .concealed{height:18px}
 body.table-immersive #app>.table .concealed .tile{width:12px;flex-basis:12px}
 body.table-immersive #app>.table .meld .tile{width:18px;height:24px}
 body.table-immersive #app>.table>.center{top:49%}
 body.table-immersive #app>.hand-summary{max-height:calc(100dvh - 140px)}
 body.table-immersive #app>.result{max-height:calc(100dvh - var(--hand-height) - 36px)}
 body.table-immersive.table-watching #app>.table{bottom:25px}
}
/* Portrait uses the same four edges while keeping a two-row, touch-sized hand. */
@media (orientation:portrait) and (max-width:740px){
 body.table-immersive #app{--hand-height:clamp(126px,35vw,154px)}
 body.table-immersive #app>.table{--river-tile:clamp(18px,5vw,23px);--side-depth:calc(48px + var(--river-tile)*4.02)}
 body.table-immersive #app>.table>.seat-top{width:min(300px,calc(100vw - 118px));height:clamp(108px,20dvh,160px);top:5px;gap:4px}
 body.table-immersive #app>.table>.seat-bottom{width:calc(100vw - 36px);height:clamp(90px,17dvh,130px);bottom:5px}
 /* Side seats are rotated, so height is felt depth: the hand line plus three river rows. */
 body.table-immersive #app>.table>.seat-left,body.table-immersive #app>.table>.seat-right{width:min(300px,calc(100dvh - 280px));max-width:300px;min-width:140px;height:var(--side-depth);top:50%;gap:4px}
 body.table-immersive #app>.table>.seat-left{left:calc(var(--side-depth)/2 + 2px)}
 body.table-immersive #app>.table>.seat-right{right:calc(var(--side-depth)/2 + 2px)}
 body.table-immersive #app>.table>.center{width:clamp(112px,30vw,148px);top:49%;gap:7px;padding:7px;flex-direction:column}
 body.table-immersive #app>.table .center .round{font-size:21px}
 body.table-immersive #app>.table .center .table-label{font-size:10px}
 body.table-immersive #app>.table .center>div:last-child>.table-label{display:none}
 body.table-immersive #app>.table .center .dora{max-width:150px;gap:4px;margin:2px 0}
 body.table-immersive #app>.table .center .dora .tile{width:20px;height:27px}
 body.table-immersive #app>.dock>.hand{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));align-items:stretch;max-width:440px;margin:auto;padding:8px 4px max(9px,env(safe-area-inset-bottom));gap:7px 5px}
 body.table-immersive #app>.dock>.hand .tile{width:100%;height:100%;min-height:44px;max-height:66px;aspect-ratio:auto;flex:none;border-radius:5px}
 body.table-immersive #app>.dock>.hand .tile.drawn{margin-left:0;box-shadow:0 0 0 1px var(--gold),1px 3px #216351}
 body.table-immersive .table-tools>button span{display:none}
 body.table-immersive .table-tools>button{padding:7px 12px}
 body.table-immersive .table-popover{top:55px;max-height:calc(100dvh - 75px)}
 body.table-immersive .chat-notice{top:55px;width:calc(100vw - 24px);font-size:12px}
 body.table-immersive #app>.hand-summary,body.table-immersive #app>.result{top:58px;width:calc(100vw - 24px);max-height:calc(100dvh - var(--hand-height) - 95px)}
 body.table-immersive.table-watching #app>.table>.seat-bottom{height:clamp(110px,20dvh,160px)}
 body.table-immersive.table-watching #app>.table>.seat-left,body.table-immersive.table-watching #app>.table>.seat-right{width:min(330px,calc(100dvh - 210px));top:50%}
}
@media (orientation:landscape) and (max-width:520px) and (max-height:330px){
 body.table-immersive #app{--hand-height:48px}
 body.table-immersive #app>.table{--river-tile:12px}
 body.table-immersive #app>.table>.seat-top{width:124px;height:60px}
 body.table-immersive #app>.table>.seat-bottom{height:52px}
 body.table-immersive #app>.table>.seat-left,body.table-immersive #app>.table>.seat-right{width:calc(100dvh - 105px);min-width:80px;max-width:180px;height:86px;top:calc(50% + 15px)}
 body.table-immersive #app>.table .concealed{height:10px}
 body.table-immersive #app>.table .concealed .tile{width:7px;flex-basis:7px}
 body.table-immersive #app>.table .meld .tile{width:10px;height:13px}
 body.table-immersive #app>.table>.center{top:49%;width:104px}
}
/* The floating controls sit below, rather than on top of, public discards. */
@media (max-width:740px), (orientation:landscape) and (max-height:600px){
 body.table-immersive #app>.table>.seat-bottom{bottom:57px}
 body.table-immersive.table-watching #app>.table>.seat-bottom{bottom:5px}
}
@media (orientation:landscape) and (max-width:520px) and (max-height:330px){
 body.table-immersive #app>.table{--river-tile:11px}
 body.table-immersive #app>.table>.seat-bottom{bottom:54px}
 body.table-immersive #app>.dock>.actions{bottom:calc(100% + 1px)}
 body.table-immersive.table-watching #app>.table>.seat-bottom{bottom:0}
}
@media (orientation:landscape) and (max-width:520px) and (max-height:330px){
 body.table-immersive #app>.table>.center{top:46%}
}

/* Keep the opposite river readable without reversing discard chronology. */
@media (max-width:740px), (orientation:landscape) and (max-height:600px){
 body.table-immersive #app>.table .seat-top .river .tile{transform:rotate(180deg)}
 body.table-immersive #app>.table .seat-top .river .tile.riichi{transform:rotate(270deg)}
}

/* Opponents use twelve columns; only cramped seats scale below the readable tile size. */
@media (max-width:740px), (orientation:landscape) and (max-height:600px){
 body.table-immersive #app>.table>.player:not(.seat-bottom)>.river{grid-template-columns:repeat(12,minmax(0,1fr));width:min(100%,calc(var(--river-tile)*12 + 28px));grid-auto-rows:min-content}
 body.table-immersive #app>.table>.player:not(.seat-bottom)>.river .tile{width:100%;max-width:var(--river-tile);height:auto;aspect-ratio:1 / 1.34}
}

/* Melds share the hand line, with a fixed group boundary and no move controls. */
body.table-view .hand-line{container-type:inline-size;display:flex;align-items:center;justify-content:center;gap:4px;width:100%;min-width:0}
body.table-view .hand-line>.melds{display:flex;flex:none;gap:3px;margin:0}
body.table-view .hand-line>.concealed{min-width:0}
body.table-view .meld[aria-label="Locked meld"]{border-bottom:2px solid #dfc78899;border-radius:4px;padding:2px;background:#102f2870;display:flex;gap:1px;min-width:0}
@media (max-width:740px), (orientation:landscape) and (max-height:600px){
 body.table-immersive #app>.table .hand-line{--inline-tile:min(17px,calc(100cqw/var(--hand-units) - 2px));gap:3px;flex:none;min-height:24px}
 body.table-immersive #app>.table .hand-line>.concealed{height:auto;gap:1px;flex:none}
 body.table-immersive #app>.table .hand-line .tile{width:var(--inline-tile);height:auto;aspect-ratio:40/55;flex:0 0 var(--inline-tile)}
 body.table-immersive #app>.table .hand-line>.melds{max-width:none;gap:2px}
 body.table-immersive #app>.table .hand-line .meld{padding:1px;gap:0}
}
@media (orientation:landscape) and (max-width:520px) and (max-height:330px){
 body.table-immersive #app>.table .hand-line{--inline-tile:5px;min-height:12px}
}

/* Your called tiles sit in their own row above the hand; actions float above both. */
body.table-view .dock>.own-melds{display:flex;justify-content:flex-start;align-items:flex-end;flex-wrap:wrap;gap:8px;margin:0 0 8px}
body.table-view .dock>.own-melds .meld{gap:1px}
body.table-view .dock>.own-melds .tile{width:34px;height:auto;aspect-ratio:1 / 1.34;flex:none;transform:none;pointer-events:none;opacity:1;will-change:transform}
body.table-view:not(.table-immersive) .dock:has(>.own-melds){display:flex;flex-direction:column}
body.table-view:not(.table-immersive) .dock:has(>.own-melds)>.actions{order:1;margin:0 0 10px}
body.table-view:not(.table-immersive) .dock:has(>.own-melds)>.own-melds{order:2}
body.table-view:not(.table-immersive) .dock:has(>.own-melds)>.hand{order:3}
@media (max-width:740px), (orientation:landscape) and (max-height:600px){
 body.table-immersive #app{--own-meld-max:30px;--own-meld-tile:min(var(--own-meld-max),calc((100vw - 24px - var(--own-meld-groups,1)*12px)/var(--own-meld-tiles,1)));--own-meld-row:calc(var(--own-meld-tile)*1.34 + 10px)}
 body.table-immersive #app>.dock>.own-melds{position:absolute;left:10px;right:10px;bottom:calc(100% + 4px);z-index:7;flex-wrap:nowrap;gap:6px;margin:0;pointer-events:none}
 body.table-immersive #app>.dock>.own-melds .meld{padding:2px}
 body.table-immersive #app>.dock>.own-melds .tile{width:var(--own-meld-tile);height:calc(var(--own-meld-tile)*1.34);aspect-ratio:auto;border-radius:3px}
 body.table-immersive #app>.dock:has(>.own-melds)>.actions{bottom:calc(100% + 7px + var(--own-meld-row))}
}
@media (orientation:portrait) and (max-width:740px){
 body.table-immersive #app{--own-meld-max:34px}
 body.table-immersive #app:has(>.dock>.own-melds)>.table>.seat-bottom{bottom:calc(57px + var(--own-meld-row))}
}
@media (orientation:landscape) and (max-width:520px) and (max-height:330px){
 body.table-immersive #app{--own-meld-max:20px}
 body.table-immersive #app>.dock:has(>.own-melds)>.actions{bottom:calc(100% + 1px + var(--own-meld-row))}
}

/* Keep the opposite hand at the outer edge and its river toward the centre. */
body.table-immersive #app>.table>.seat-top{transform:translateX(-50%);top:0}
body.table-immersive #app>.table .seat-top .river .tile{transform:none}
body.table-immersive #app>.table .seat-top .river .tile.riichi{transform:rotate(90deg)}
.seat-winds{display:none}
/* Winds sit on the felt; hands and rivers always paint above them. */
body.table-immersive #app>.table{isolation:isolate}
body.table-immersive #app>.table>.player{z-index:2}
body.table-immersive #app>.table>.player.active::after{display:none}
body.table-immersive #app>.table>.center{z-index:1}
body.table-immersive .seat-winds{display:block;position:absolute;inset:0;pointer-events:none;z-index:0}
body.table-immersive .seat-wind{position:absolute;display:grid;place-items:center;width:40px;height:40px;border:1px solid #e8d9a166;border-radius:50%;background:#204b3d;color:#e8d9a1;font-size:26px;line-height:1;box-sizing:border-box;transform:translate(-50%,-50%)}
/* Markers form a compass at the middle of the felt; --wind-spread is each marker's distance from it. */
body.table-immersive #app>.table{--wind-spread:34px}
body.table-immersive .wind-top{left:50%;top:calc(50% - var(--wind-spread))}
body.table-immersive .wind-bottom{left:50%;top:calc(50% + var(--wind-spread))}
body.table-immersive .wind-left{left:calc(50% - var(--wind-spread));top:50%}
body.table-immersive .wind-right{left:calc(50% + var(--wind-spread));top:50%}
body.table-immersive .seat-wind.current-turn{background:#ffe39a;color:#18382d;border:2px solid #fff5cf;box-shadow:0 0 0 3px #ffe39a55;font-weight:800}

/* Yaku overlay: inset from every edge so the felt, turn glow and hand stay visible behind it. */
body.table-view .table-popover.yaku-overlay{position:fixed;z-index:30;top:calc(56px + env(safe-area-inset-top));bottom:calc(var(--hand-height,0px) + env(safe-area-inset-bottom) + 12px);left:50%;transform:translateX(-50%);width:min(440px,calc(100vw - 32px));max-height:none;padding:0 14px 14px;background:#14382fec}
body.table-view .yaku-overlay-head{position:sticky;top:0;z-index:1;display:grid;grid-template-columns:1fr auto;grid-template-areas:'title close' 'hide hide';align-items:center;column-gap:16px;margin:0 -14px;padding:6px 14px 0;background:#14382f;border-bottom:1px solid #dfc78830}
body.table-view .yaku-overlay h2{grid-area:title;margin:0}
body.table-view .table-popover .yaku-close{grid-area:close}
body.table-view .yaku-hide{grid-area:hide}
@media (max-height:500px){body.table-view .yaku-overlay-head{grid-template-columns:auto 1fr auto;grid-template-areas:'title hide close'}}
body.table-view .table-popover .yaku-close{width:44px;min-height:44px;margin:0 -8px 0 0;padding:0;text-align:center;background:none;border:0;font-size:16px}
body.table-view .yaku-hide{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:44px;font-size:13px;cursor:pointer}
body.table-view .yaku-hide small{color:var(--muted);font-size:11px;margin-left:4px}
body.table-view .yaku-hide input{position:absolute;opacity:0;width:1px;height:1px;margin:0;pointer-events:none}
body.table-view .yaku-switch{position:relative;flex:none;width:44px;height:26px;border:1px solid #dfc78866;border-radius:13px;background:#0d2a23;transition:background .2s,border-color .2s}
body.table-view .yaku-switch::after{content:'';position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#a7b9ae;box-shadow:0 1px 3px #0007;transition:transform .2s,background .2s}
body.table-view .yaku-hide input:checked+.yaku-switch{background:var(--gold);border-color:var(--gold)}
body.table-view .yaku-hide input:checked+.yaku-switch::after{transform:translateX(18px);background:#fff}
body.table-view .yaku-hide input:focus-visible+.yaku-switch{outline:2px solid #fff;outline-offset:2px}
body.table-view .yaku-intro{font-size:11px;line-height:1.5;color:var(--muted);margin:10px 0 0}
body.table-view .yaku-tier h3{margin:16px 0 2px;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--gold)}
body.table-view .yaku-tier ul{list-style:none;margin:0;padding:0}
/* Each row paints in its own contained compositor layer: expanding one row moves the rows below it without re-laying-out or repainting their tile SVGs on every frame. */
body.table-view .yaku-row{border-top:1px solid #ffffff1a;contain:content;will-change:transform}
/* Paint containment would clip an outset focus ring at the row edge. */
body.table-view .table-popover .yaku-toggle:focus-visible{outline-offset:-2px}
/* The global button hover brightens the whole row of tiles and forces an offscreen filter surface; sticky touch hover made it look like the tiles changed on tap. */
body.table-view .table-popover .yaku-toggle:hover:not(:disabled){filter:none}
body.table-view .table-popover .yaku-toggle{display:block;width:100%;min-height:44px;margin:0;padding:8px 2px;background:none;border:0;border-radius:0;color:inherit;text-align:left}
body.table-view .yaku-line{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
body.table-view .yaku-name{font-size:13px;font-weight:700}
body.table-view .yaku-name::after{content:'›';display:inline-block;margin-left:6px;color:var(--muted);transition:transform .25s ease}
body.table-view .yaku-row.expanded .yaku-name::after{transform:rotate(90deg)}
body.table-view .yaku-kind{flex:none;font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:#d6d9be}
/* Tiles share the row width; the cap keeps short examples such as nagashi from ballooning. */
body.table-view .yaku-example{container-type:inline-size;display:flex;gap:5px;margin-top:6px;padding:0 2px 2px 0}
body.table-view .yaku-example-group{display:flex;gap:1px}
body.table-view .yaku-example .tile.small-tile{width:min(30px,calc((100cqw - (var(--groups) - 1)*5px - var(--tiles)*1px)/var(--tiles)));height:auto;aspect-ratio:1 / 1.34;transform:none;box-shadow:inset 1px 1px 0 #fff,1px 1px 0 #d7d0be,1px 1.75px 0 #216351}
body.table-view .yaku-unavailable .yaku-toggle{opacity:.5}
body.table-view .yaku-body{display:grid;grid-template-rows:0fr;opacity:0;transition:grid-template-rows .25s ease,opacity .25s ease}
body.table-view .yaku-row.expanded .yaku-body{grid-template-rows:1fr;opacity:1}
body.table-view .yaku-body>div{overflow:hidden;font-size:12px;line-height:1.5}
body.table-view .yaku-body p{margin:0 2px 6px}
body.table-view .yaku-body .yaku-value{color:var(--gold)}
body.table-view .yaku-body strong{display:block;margin:0 2px 8px;color:#ffd1a2}
body.table-view .yaku-good-luck{margin:20px 0 4px;text-align:center;font-style:italic;color:var(--gold)}
@media(prefers-reduced-motion:reduce){body.table-view .yaku-body,body.table-view .yaku-name::after{transition:none}}

/* Call announcements float above play without taking layout space. */
.call-banner{position:fixed;z-index:45;left:50%;top:38%;transform:translate(-50%,-50%);display:grid;justify-items:center;gap:3px;max-width:calc(100vw - 32px);padding:10px 22px;background:#143b32f2;border:2px solid #dfc788;border-radius:10px;color:#fff0c9;box-shadow:0 6px 24px #0006;pointer-events:none;text-align:center}
.call-banner strong{font:900 36px/1.15 'Yu Mincho','Hiragino Mincho ProN',serif;text-shadow:2px 2px #8b3e29;letter-spacing:.12em}
.call-banner span{font-size:15px;overflow-wrap:anywhere;max-width:100%}

/* Public result cards keep sorted tiles and locked groups readable on phones. */
.hand-result-entry{border-bottom:1px solid #dfc78825;padding-bottom:8px;margin-bottom:10px}
.hand-result-entry:last-child{border-bottom:0;margin-bottom:0}
.hand-result-entry>summary{font-size:13px;line-height:1.5;padding:10px 0;color:var(--gold)}
.result-hand{display:flex;flex-wrap:wrap;gap:6px 10px;margin:8px 0}
.result-hand>.melds{gap:2px;margin:0;max-width:100%;align-items:center}
.result-hand .tile.small-tile{width:clamp(16px,4.5vw,25px);height:auto;aspect-ratio:1 / 1.34;transform:none}
body.table-immersive .hand-summary>.hand-result-entry>summary{padding:9px 0}
body.table-immersive.show-table-history #app>.result{visibility:hidden;pointer-events:none}

/* A static ring stays legible during calls and for reduced-motion players. */
#app>.table .river .tile.latest-discard{z-index:2}
/* The ring reaches past the face to cover the tile's lower-right 3D edge. */
#app>.table .river .tile.latest-discard::after{content:"";position:absolute;inset:-2px -3px -4px -2px;border:2px solid #ffe278;border-radius:4px;pointer-events:none}

/* Round, counts and dora sit in a bar at the top, between the Players and Table buttons;
   the opposite seat moves down beneath it. */
.felt-info{display:none}
.stick-count::before{content:' · '}
.dora .tile.small-tile,.felt-dora .tile.small-tile{box-shadow:inset 1px 1px 0 #fff,1px 1px 0 #d7d0be,1px 1.75px 0 #216351}
@media (max-width:740px), (orientation:landscape) and (max-height:600px){
 body.table-immersive #app>.table{--info-bar:calc(44px + max(4px,env(safe-area-inset-top)))}
 body.table-immersive #app>.table>.center{top:max(4px,env(safe-area-inset-top));left:50%;transform:translateX(-50%);width:auto;max-width:calc(100vw - 130px);height:44px;min-height:0;flex-direction:row;align-items:center;gap:10px;padding:0 4px;white-space:nowrap}
 body.table-immersive #app>.table .center>div:first-child{display:grid;grid-template-columns:auto auto;grid-template-rows:auto auto;column-gap:8px;align-items:center;text-align:left}
 body.table-immersive #app>.table .center .round{grid-row:1 / span 2;font-size:20px;line-height:1}
 body.table-immersive #app>.table .center>div:last-child{display:flex;align-items:center;gap:5px}
 body.table-immersive #app>.table .center>div:last-child>.table-label{display:block;font-size:8px;line-height:1.2;white-space:normal;width:44px;text-align:right}
 body.table-immersive #app>.table .center .dora{flex-wrap:nowrap;max-width:none;margin:0}
 body.table-immersive #app>.table .center .dora .tile{width:18px;height:24px}
 body.table-immersive #app>.table>.seat-top{top:var(--info-bar)}
}
/* Portrait has open felt around the wind compass: the wall frame sits above it and dora below,
   leaving round, honba and sticks in the top bar. Landscape rivers cover that space. */
@media (orientation:portrait) and (max-width:740px){
 body.table-immersive #app>.table{--info-bar:calc(32px + max(4px,env(safe-area-inset-top)))}
 body.table-immersive #app>.table>.center{height:32px}
 /* Equal side columns keep the round name centred between honba and sticks. */
 body.table-immersive #app>.table .center>div:first-child{display:grid;grid-template-columns:1fr auto 1fr;grid-template-rows:auto;column-gap:10px}
 body.table-immersive #app>.table .center .round{grid-row:auto;grid-column:2}
 body.table-immersive #app>.table .center .round-counts{display:contents}
 body.table-immersive #app>.table .center .honba-count{grid-column:1;grid-row:1;justify-self:end}
 body.table-immersive #app>.table .center .stick-count{grid-column:3;grid-row:1;justify-self:start}
 body.table-immersive #app>.table .center .stick-count::before{content:none}
 body.table-immersive #app>.table .center .round+.table-label,body.table-immersive #app>.table .center>div:last-child{display:none}
 body.table-immersive #app>.table>.felt-info{display:block;position:absolute;inset:0;z-index:1;pointer-events:none}
 body.table-immersive .felt-info>*{position:absolute;left:50%;transform:translateX(-50%)}
 body.table-immersive .felt-frame{display:flex;flex-direction:column;align-items:center;gap:3px;padding:6px 7px;border:1px solid #dfc78840;border-radius:6px;background:#143d32d9}
 body.table-immersive .felt-frame-label{color:var(--gold);font-size:9px;font-weight:600;line-height:1;letter-spacing:.12em;text-transform:uppercase}
 body.table-immersive .felt-wall-wrap{bottom:calc(50% + var(--wind-spread) + 34px)}
 body.table-immersive .felt-dora-wrap{top:calc(50% + var(--wind-spread) + 34px)}
 /* Tile rows pad right and bottom by the 3D edge so centring uses each tile's full visible bounds. */
 body.table-immersive .felt-wall-tiles,body.table-immersive .felt-dora{padding:0 1px 1.75px 0}
 /* Sized for four tiles so the frame keeps its width as the wall runs out. */
 body.table-immersive .felt-wall{position:relative;width:79px;height:25.75px}
 body.table-immersive .felt-wall-tiles{display:flex;justify-content:center;gap:2px;height:100%}
 body.table-immersive .felt-wall-tiles .tile{width:18px;height:24px;transform:none;box-shadow:inset 1px 1px 0 #a9c4aa70,1px 1px 0 #ede9dc,1px 1.75px 0 #cdc6b5}
 body.table-immersive .felt-wall-count{position:absolute;inset:0;display:grid;place-items:center;color:#fff6dc;font-size:13px;font-weight:800;line-height:1;text-shadow:0 0 3px #000,0 1px 2px #000c}
 body.table-immersive .felt-dora{display:flex;flex-wrap:wrap;justify-content:center;gap:2px;width:max-content;max-width:62px;margin:0}
 body.table-immersive .felt-dora .tile{width:18px;height:24px;transform:none}
}
@media (orientation:landscape) and (max-width:520px) and (max-height:330px){
 body.table-immersive #app>.table{--info-bar:calc(36px + max(2px,env(safe-area-inset-top)))}
 body.table-immersive #app>.table>.center{top:max(2px,env(safe-area-inset-top));height:36px;max-width:calc(100vw - 100px);gap:6px}
 body.table-immersive #app>.table .center .round{font-size:15px}
 body.table-immersive #app>.table .center>div:last-child>.table-label{display:none}
 body.table-immersive #app>.table .center .dora .tile{width:13px;height:17px}
}

/* Opponents' face-down tiles use a shallower edge than the default tile back. */
#app>.table .concealed .tile.back{box-shadow:inset 1px 1px 0 #a9c4aa70,.5px 1px 0 #ede9dc,1px 2px 0 #cdc6b5}