*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;font-family:Arial,sans-serif}button,select{font:inherit}button{cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent}button:disabled{opacity:.38;cursor:default}button:focus-visible,select:focus-visible{outline:3px solid #dd9f46;outline-offset:3px}[hidden]{display:none!important}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
#play-app{--paper:#f0ede4;--ink:#23382f;--muted:#59695e;--line:#2a453326;--table:#b9c9b0;--table-light:#d5deca;--edge:#9bab91;--accent:#375b43;--accent-text:#fffcf0;--tile:#fff9e9;--tile-side:#78896d;--tile-edge:#c5c1a8;--menu-width:340px;--safe-top:env(safe-area-inset-top,0px);--safe-bottom:env(safe-area-inset-bottom,0px);position:fixed;top:var(--viewport-top,0px);left:var(--viewport-left,0px);color:var(--ink);background:radial-gradient(ellipse at 50% 38%,var(--table-light),var(--table));width:var(--app-width,100%);height:100vh;height:var(--app-height,100dvh);min-height:0;overflow:hidden}
.play-header{position:absolute;top:max(10px,env(safe-area-inset-top,0px));right:max(10px,env(safe-area-inset-right,0px));width:96px;height:44px;z-index:20}
#header-actions.header-actions{display:flex;align-items:center;gap:8px;width:96px;height:44px}
#header-actions .pill{display:flex;align-items:center;justify-content:center;flex:none;width:44px;height:44px;min-width:44px;min-height:44px;padding:9px;border:1px solid #b58a35;border-radius:50%;background:#fffaf0;color:#163226;box-shadow:0 2px 7px #17332722}
#header-actions .pill svg{display:block;width:23px;height:23px}
#header-actions .menu-pill{background:#163226;color:#f8f0dc}
#header-actions .pill:hover{box-shadow:0 0 0 3px #c8952c30}
#header-actions .pill:focus-visible{outline-offset:3px}
.game-surface{position:absolute;inset:0;min-height:0;min-width:0;isolation:isolate;background:radial-gradient(ellipse at 50% 38%,var(--table-light),var(--table));overflow:hidden}

#play-app.dialog-open .game-surface{visibility:hidden}
#play-app.dialog-open .play-header{visibility:hidden}
.surface-label{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font:36px Georgia,serif;letter-spacing:1px;opacity:.07;z-index:-1;pointer-events:none;white-space:nowrap}.surface-label span{display:block;font:7px Arial,sans-serif;letter-spacing:3px;text-align:center;margin-top:8px}
#scroller{position:absolute;inset:calc(var(--board-top,0px) + env(safe-area-inset-top,0px)) calc(var(--board-right,0px) + env(safe-area-inset-right,0px)) calc(var(--board-bottom,0px) + env(safe-area-inset-bottom,0px)) env(safe-area-inset-left,0px);overflow:auto;overscroll-behavior:contain;scrollbar-width:none;touch-action:pan-x pan-y;cursor:grab}
#scroller::-webkit-scrollbar{display:none}#scroller.dragging{cursor:grabbing}#play-board{position:relative;isolation:isolate}
.play-tile{position:absolute;padding:0;border:0;background:transparent;border-radius:6px;display:flex;align-items:center;justify-content:center;transition:opacity .16s,filter .12s;isolation:isolate;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent}.tile-body{position:absolute;inset:0 3px 5px 0;border-radius:5px;border:1px solid #fffaf0;background:linear-gradient(125deg,#fffdf4,var(--tile));box-shadow:1px 2px 0 var(--tile-edge),3px 5px 0 var(--tile-side),4px 7px 5px #10291c30;display:flex;align-items:center;justify-content:center;padding:8%;pointer-events:none}.tile-body img{display:block;width:100%;height:100%;object-fit:contain;pointer-events:none;-webkit-user-drag:none}.play-tile.blocked .tile-body{background:linear-gradient(120deg,#d6d2c4,#c8c8ba);border-color:#dbd8cb}.play-tile.exklusiv .tile-body{background:linear-gradient(120deg,#293a31,#17251e);border-color:#ba9d62;--tile-edge:#7e744b;--tile-side:#384a38}.play-tile.exklusiv.blocked .tile-body{background:#26332b;border-color:#81754f}.play-tile.selected .tile-body{outline:3px solid #e7ae48;outline-offset:1px}.play-tile.selected:after{content:"✓";position:absolute;top:-3px;right:0;border-radius:50%;background:#ebbb64;color:#193827;width:17px;height:17px;display:grid;place-items:center;font:bold 11px Arial;box-shadow:0 1px 3px #0002}.play-tile.hinted .tile-body{outline:3px solid #edbd5c;outline-offset:1px}.play-tile.jade .tile-body{padding:0;border:0;box-shadow:none;background:transparent}.play-tile.jade .tile-body img{width:100%;height:100%}.play-tile.jade.blocked{filter:brightness(.78)}.play-tile.removing{opacity:0}
.toast{position:fixed;z-index:1000;bottom:max(14px,env(safe-area-inset-bottom,0px));left:50%;transform:translateX(-50%);width:max-content;max-width:min(92vw,570px);padding:11px 16px;border-radius:12px;background:var(--ink);color:var(--paper);font-size:12px;line-height:1.5;box-shadow:0 5px 25px #0002;display:none;pointer-events:none}
dialog{max-width:calc(100vw - 24px);width:580px;max-height:calc(var(--app-height,100dvh) - 24px);overflow:auto;background:var(--paper);color:var(--ink);border:1px solid var(--line);border-radius:20px;padding:26px;box-shadow:0 20px 80px #0004;overscroll-behavior:contain}dialog::backdrop{background:#1428208a;backdrop-filter:blur(4px)}.close-dialog,.close-menu{flex-shrink:0;width:44px;height:44px;border:1px solid var(--line);border-radius:50%;background:var(--paper);color:var(--ink);font-size:24px}.close-dialog{float:right;position:sticky;top:0;z-index:5;margin:-10px -10px 4px 8px}dialog h2{font:30px Georgia,serif;letter-spacing:-.6px;margin:5px 0 12px}dialog p,dialog li{font-size:14px;line-height:1.65;color:var(--muted)}dialog h3{font-size:11px;text-transform:uppercase;letter-spacing:1.4px;margin:22px 0 10px}dialog .choice-row{display:flex;gap:8px;flex-wrap:wrap}dialog .choice{padding:12px;min-height:46px;border:1px solid var(--line);border-radius:10px;background:transparent;color:var(--ink);font-size:13px}dialog .choice.active{background:var(--accent);color:var(--accent-text)}dialog .set-choice{display:flex;flex-direction:column;align-items:center;gap:8px;flex:1;min-width:85px}dialog .set-choice img{height:65px;max-width:60px;object-fit:contain}dialog .dialog-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}dialog .dialog-actions button{min-height:44px;padding:10px 20px;background:var(--accent);color:var(--accent-text);border:0;border-radius:10px;font-size:13px}dialog .dialog-actions .secondary{background:none;color:var(--ink);border:1px solid var(--line)}.win-mark{font:64px Georgia,serif;color:var(--accent);margin:5px 0 15px}.status-note{padding:14px 16px;background:var(--table);border-radius:12px;color:var(--ink)}.eyebrow{font-size:9px;letter-spacing:1.7px;color:var(--muted)}

/* The opened menu has its own area. It never floats across the board. */
dialog.game-menu{--paper:#163226;--ink:#f4ecd8;--muted:#cfc8b6;--line:#ffffff17;--accent:#dfb87a;--accent-text:#19372d;--menu-gold:#dfb87a;--menu-hover:#ffffff10;position:fixed;inset:0 0 0 auto;width:var(--menu-width);max-width:100vw;height:var(--app-height,100dvh);max-height:var(--app-height,100dvh);margin:0;padding:env(safe-area-inset-top,0px) 0 env(safe-area-inset-bottom,0px);background:var(--paper);color:var(--ink);border:0;border-left:1px solid #b58a35;border-radius:0;box-shadow:none;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#c8952c70 transparent}
dialog.game-menu::backdrop{background:transparent;backdrop-filter:none}
.menu-heading{position:sticky;top:0;z-index:5;display:flex;gap:10px;align-items:center;min-height:60px;padding:8px 10px;background:var(--paper);border-bottom:1px solid var(--line)}
.menu-emblem{width:36px;height:36px;flex:none;display:flex;align-items:center;justify-content:center;background:#fffaf0;border:1px solid #c8952c;color:#163226;border-radius:50%}.menu-emblem svg{width:21px;height:21px}
.menu-heading-copy{min-width:0;flex:1}.menu-heading h2{margin:0;color:var(--menu-gold);font:700 22px/1.2 Georgia,serif;letter-spacing:0}.menu-subtitle{display:block;margin-top:3px;font-size:10px;color:var(--muted)}
.game-menu .close-menu,.menu-back{display:flex;align-items:center;justify-content:center;flex:none;width:44px;height:44px;min-width:44px;min-height:44px;padding:0;border:1px solid var(--line);border-radius:50%;background:transparent;color:var(--ink)}.menu-back svg{width:20px;height:20px}.game-menu .close-menu{font-size:26px}
.settings-open .menu-emblem{display:none}.settings-open .menu-heading h2{font-size:18px}.settings-open .menu-subtitle{display:none}
.quick-help{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;padding:8px 10px;border-bottom:1px solid var(--line)}
.quick-help button{display:flex;align-items:center;justify-content:center;gap:5px;min-width:0;min-height:44px;padding:6px 3px;border:1px solid var(--line);border-radius:10px;background:transparent;color:var(--ink);font-size:12px}.quick-help svg{display:block;width:18px;height:18px;flex:none;color:var(--menu-gold)}
.quick-help button:hover,.game-menu-row:hover,.game-menu-row:focus-visible{background:var(--menu-hover)}
.game-menu-row{display:grid;grid-template-columns:24px minmax(0,1fr) 12px;gap:11px;align-items:center;width:100%;min-height:50px;padding:10px 15px;border:0;border-bottom:1px solid var(--line);background:transparent;color:var(--ink);text-align:left;font-size:15px;font-weight:600;line-height:1.25}.game-menu-row:last-child{border-bottom:0}.menu-row-icon{display:flex;color:var(--menu-gold)}.menu-row-icon svg{width:23px;height:23px}.menu-row-arrow{text-align:right;opacity:.5;font-size:22px}
.menu-settings{padding:0 16px 20px}.menu-metrics{display:flex;gap:14px;align-items:center;padding:16px 0 0;color:var(--muted);font-size:12px;font-variant-numeric:tabular-nums}.menu-metrics b{font-weight:500}.menu-metrics>span:last-child{margin-left:auto;font-size:10px}.menu-settings h3{margin:20px 0 10px}
.board-picker{display:flex;gap:8px}.board-picker button{flex:1;min-width:0;border:1px solid var(--line);background:transparent;color:var(--ink);padding:11px 7px;border-radius:11px;min-height:46px;font-size:13px}.board-picker button[aria-pressed=true]{background:var(--ink);color:var(--paper)}.board-picker small{display:block;font-size:10px;opacity:.75;margin-top:3px}
.zoom-controls{display:flex;gap:5px}.zoom-controls button{min-width:44px;min-height:44px;padding:7px;border:1px solid var(--line);background:transparent;color:var(--ink);border-radius:11px;font-size:20px}.zoom-controls #fit-button{flex:1;min-width:0;font-size:11px}.zoom-controls #fullscreen-button{font-size:11px;padding:7px 9px}
.view-toggle{min-height:44px;padding:8px 14px;border:1px solid var(--line);border-radius:11px;background:transparent;color:var(--ink)}.menu-tip{font-size:11px!important;margin:10px 0 18px!important}
.menu-links{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--line);gap:0 14px;padding-top:8px}.menu-links button{min-height:46px;display:flex;justify-content:space-between;align-items:center;text-align:left;gap:7px;border:0;background:transparent;color:var(--ink);font-size:12px;padding:6px 0}.menu-links .link-label{display:inline-flex;align-items:center;gap:5px}.menu-links .link-label svg{width:17px;height:17px;flex:none}.menu-links button>span:last-child{color:var(--muted)}
.resume-button{width:100%;min-height:44px;margin-top:12px;border:0;border-radius:24px;background:var(--accent);color:var(--accent-text);font-size:13px}
.game-start{position:absolute;inset:0;z-index:4;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:24px;text-align:center;background:radial-gradient(ellipse at 50% 38%,var(--table-light),var(--table));color:var(--ink)}.game-start h2{margin:0;font:42px/1.1 Georgia,serif}.game-start p{margin:0;font-size:15px;line-height:1.5}.game-start .choice-row{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:8px}.game-start .choice-row button{min-height:44px;padding:10px 20px;border:1px solid var(--ink);border-radius:24px;background:var(--paper);color:var(--ink);font-size:14px}
.scroll-cue{position:absolute;right:calc(var(--board-right,0px) + max(2px,env(safe-area-inset-right,0px)));top:14%;height:72%;width:4px;border-radius:4px;background:var(--line);pointer-events:none;z-index:3}.scroll-cue>span{position:absolute;top:var(--thumb-top,0%);height:var(--thumb-size,30%);left:0;width:4px;background:var(--ink);opacity:.4;border-radius:4px}
#play-app[data-orientation=portrait] dialog.game-menu{--paper:#fffdf7;--ink:#222a23;--muted:#6b6556;--line:#342b1b14;--accent:#375b43;--accent-text:#fffdf7;--menu-gold:#7a5a12;--menu-hover:#c8952c12;inset:0;width:100%;max-width:100%;border:0}
@media(max-width:1024px){#play-app{--menu-width:300px}dialog.game-menu{--paper:#fffdf7;--ink:#222a23;--muted:#6b6556;--line:#342b1b14;--accent:#375b43;--accent-text:#fffdf7;--menu-gold:#7a5a12;--menu-hover:#c8952c12}}
@media(max-width:600px){dialog{padding:22px;max-width:calc(100vw - 16px);max-height:calc(var(--app-height,100dvh) - 16px)}.close-dialog{margin:-8px -8px 4px 8px}.surface-label{font-size:30px}.toast{font-size:11px}.game-menu .menu-settings{padding-left:18px;padding-right:18px}}
@media(max-height:400px){.game-menu .menu-heading{min-height:44px;padding:0 8px;gap:9px}.menu-emblem{width:31px;height:31px}.menu-emblem svg{width:19px;height:19px}.menu-heading h2{font-size:20px}.menu-subtitle{display:none}.quick-help{padding:4px 8px}.game-menu-row{min-height:44px;padding:8px 13px;font-size:14px}.game-start{gap:8px;padding:16px}.game-start h2{font-size:32px}.game-start .choice-row{margin-top:2px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}

#play-app[data-theme=jade]{--paper:#122c29;--ink:#f6eddb;--muted:#b6c8bb;--line:#f9edc530;--table:#24574b;--table-light:#3b7561;--edge:#63836c;--accent:#dfb87a;--accent-text:#19372d;--tile-side:#6a866e}#play-app[data-theme=jade] h1>span{color:#dfb87a}#play-app[data-theme=club]{--paper:#132235;--ink:#f6efe1;--muted:#b0bfce;--line:#d4e3f030;--table:#2a425b;--table-light:#3d5c74;--edge:#647c91;--accent:#dfaa80;--accent-text:#1c2938;--tile-side:#718997}#play-app[data-theme=club] h1>span{color:#dfaa80}

/* Compact table controls, with separate space for each group. */
#play-app{--controls-width:128px;--board-right:var(--controls-width);--board-top:0px;--board-bottom:0px;--install-space:var(--install-height,0px);--install-safe-top:env(safe-area-inset-top,0px);--menu-width:280px}
.play-header{top:calc(10px + env(safe-area-inset-top,0px));right:calc(10px + env(safe-area-inset-right,0px))}
.table-layouts{position:absolute;z-index:19;top:calc(64px + env(safe-area-inset-top,0px));right:calc(10px + env(safe-area-inset-right,0px));display:grid;grid-template-columns:1fr;width:calc(var(--controls-width) - 20px);height:88px}
.table-layouts button{display:flex;align-items:center;justify-content:space-between;gap:4px;min-width:44px;min-height:44px;height:44px;padding:7px 8px;border:1px solid var(--line);background:transparent;color:var(--ink);font-size:11px;line-height:1.2;white-space:nowrap}
.table-layouts button:first-child{border-radius:10px 10px 0 0}.table-layouts button+button{border-top:0;border-radius:0 0 10px 10px}
.table-layouts button[aria-pressed=true]{background:var(--accent);color:var(--accent-text);border-color:var(--accent)}
.table-layouts small{font-size:9px;opacity:.76}.table-layouts button:hover{box-shadow:inset 0 0 0 1px currentColor}
.table-tools{position:absolute;z-index:19;right:calc(10px + env(safe-area-inset-right,0px));top:calc(160px + env(safe-area-inset-top,0px));display:flex;flex-direction:column;gap:0;width:calc(var(--controls-width) - 20px)}
.table-tools button{display:flex;flex-direction:row;align-items:center;justify-content:flex-start;gap:8px;min-width:44px;min-height:44px;height:44px;padding:8px;border:0;border-bottom:1px solid var(--line);border-radius:0;background:transparent;color:var(--ink);font-size:12px;line-height:1.2}
.table-tools button:first-child{border-top:1px solid var(--line)}.table-tools button svg{display:block;flex:none;width:19px;height:19px}.table-tools button:hover{background:var(--line)}
.table-tools #abort-button{margin-top:8px;border:1px solid var(--line);border-radius:9px}
.table-fit{position:absolute;z-index:19;right:calc(10px + env(safe-area-inset-right,0px));bottom:calc(10px + env(safe-area-inset-bottom,0px));width:calc(var(--controls-width) - 20px);min-height:44px;border:1px solid var(--line);border-radius:12px;background:var(--paper);color:var(--ink);font-size:11px;padding:6px}
#play-app[data-orientation=portrait]{--controls-width:0px;--board-right:0px;--board-top:64px;--board-bottom:64px}
#play-app[data-orientation=portrait][data-zoomed=true]{--board-bottom:116px}
#play-app[data-orientation=portrait] .table-layouts{top:calc(10px + env(safe-area-inset-top,0px));left:calc(10px + env(safe-area-inset-left,0px));right:calc(116px + env(safe-area-inset-right,0px));width:auto;height:44px;grid-template-columns:1.3fr 1fr}
#play-app[data-orientation=portrait] .table-layouts button{font-size:12px;padding:7px 6px}
#play-app[data-orientation=portrait] .table-layouts button:first-child{border-radius:10px 0 0 10px}
#play-app[data-orientation=portrait] .table-layouts button+button{border-top:1px solid var(--line);border-left:0;border-radius:0 10px 10px 0}
#play-app[data-orientation=portrait] .table-tools{left:calc(10px + env(safe-area-inset-left,0px));right:calc(10px + env(safe-area-inset-right,0px));top:auto;bottom:calc(10px + env(safe-area-inset-bottom,0px));width:auto;height:44px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:5px}
#play-app[data-orientation=portrait][data-hints=off] .table-tools{grid-template-columns:repeat(3,minmax(0,1fr))}
#play-app[data-orientation=portrait] .table-tools button{flex-direction:column;justify-content:center;padding:3px 1px;border:1px solid var(--line);border-radius:10px;gap:2px;font-size:10px}
#play-app[data-orientation=portrait] .table-tools #abort-button{margin:0 0 0 4px}
#play-app[data-orientation=portrait] .table-fit{bottom:calc(64px + env(safe-area-inset-bottom,0px));right:calc(10px + env(safe-area-inset-right,0px));width:126px}
#play-app[data-orientation=landscape][data-controls=short],#play-app[data-orientation=landscape][data-controls=compact]{--controls-width:180px}
#play-app[data-orientation=landscape][data-controls=short] .play-header,#play-app[data-orientation=landscape][data-controls=compact] .play-header{top:calc(4px + env(safe-area-inset-top,0px))}
#play-app[data-orientation=landscape][data-controls=short] .table-layouts,#play-app[data-orientation=landscape][data-controls=compact] .table-layouts{top:calc(52px + env(safe-area-inset-top,0px))}
#play-app[data-orientation=landscape][data-controls=short] .table-tools,#play-app[data-orientation=landscape][data-controls=compact] .table-tools{top:calc(144px + env(safe-area-inset-top,0px));display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px}
#play-app[data-orientation=landscape][data-controls=short] .table-tools button,#play-app[data-orientation=landscape][data-controls=compact] .table-tools button{flex-direction:row;justify-content:center;gap:3px;height:44px;padding:3px 1px;border:1px solid var(--line);border-radius:9px;font-size:10px;margin:0}
#play-app[data-orientation=landscape][data-controls=compact]{--controls-width:216px}
#play-app[data-orientation=landscape][data-controls=compact] .table-layouts{height:44px;grid-template-columns:1.3fr 1fr}
#play-app[data-orientation=landscape][data-controls=compact] .table-layouts button:first-child{border-radius:9px 0 0 9px}
#play-app[data-orientation=landscape][data-controls=compact] .table-layouts button+button{border-top:1px solid var(--line);border-left:0;border-radius:0 9px 9px 0}
#play-app[data-orientation=landscape][data-controls=compact] .table-tools{top:calc(100px + env(safe-area-inset-top,0px))}
/* Zoom reset owns a bottom strip, clear of both tiles and table controls. */
#play-app[data-orientation=landscape][data-zoomed=true]{--board-bottom:54px}
#play-app[data-orientation=landscape][data-zoomed=true] .table-fit{right:calc(var(--controls-width) + 10px + env(safe-area-inset-right,0px));width:126px}
#play-app .game-surface{top:var(--install-space);bottom:var(--feedback-height,0px)}
#play-app .play-header,#play-app .table-layouts,#play-app[data-orientation=landscape] .table-tools{transform:translateY(var(--install-space))}
#play-app.menu-open[data-orientation=landscape]{--board-right:var(--menu-board-right,300px);--board-bottom:0px}
#play-app.menu-open[data-orientation=portrait]{--board-top:var(--menu-board-top,294px);--board-bottom:0px}
#play-app.menu-open .table-layouts,#play-app.menu-open .table-tools,#play-app.menu-open .table-fit,#play-app.dialog-open .table-layouts,#play-app.dialog-open .table-tools,#play-app.dialog-open .table-fit{visibility:hidden}
#play-app.dialog-open{--install-space:0px}
#play-app.dialog-open #tenpai-install-banner{visibility:hidden}
#toast{bottom:auto;transform:none;font-size:12px;line-height:1.45;padding:10px 12px;max-width:calc(100vw - 20px);pointer-events:none}
/* A normal Safari document can participate in toolbar-collapse gestures.
   This permits native browser behavior; it does not force Safari fullscreen. */
html.ios-safari{overflow-x:hidden;overflow-y:auto;height:100%;scrollbar-width:none}
html.ios-safari body{height:calc(100vh + 1px);height:calc(100lvh + 1px);overflow:visible}
html.ios-safari #play-app[data-zoomed=false] #scroller{overscroll-behavior:auto}
html.ios-safari.table-overlay-open,html.ios-safari.table-overlay-open body{overflow:hidden}

/* Preserve supplied artwork; only frame its transparent padding consistently. */
.tenpai-art-frame{display:block;position:relative;width:100%;height:100%;overflow:hidden;flex-shrink:0;pointer-events:none}