/* RUMMIKUB TERMINAL 0.9 / visual system, desktop and landscape-first responsive design.
   This is intentionally a single final override layer. No rules engine changes. */
:root{--v09-ink:#effaff;--v09-muted:#aec8d5;--v09-line:#41687b88;--v09-blue:#6ce9e4;--v09-gold:#fac17b}
body{background:#050b15;color:var(--v09-ink)}
.ambient-lights{background:
 radial-gradient(ellipse 48% 48% at 7% -12%,#17617d63 0%,transparent 78%),
 radial-gradient(ellipse 40% 55% at 98% 95%,#283a7d47 0%,transparent 84%),
 radial-gradient(ellipse 55% 35% at 48% 44%,#092c435c,transparent 90%),
 linear-gradient(140deg,#06101d 0%,#081625 44%,#080d1c 100%)}
.ambient-lights:before{content:"";position:absolute;inset:0;background-image:radial-gradient(#b4f9ff8c 0.65px,transparent 1.2px),radial-gradient(#b4f9ff75 0.7px,transparent 1.5px);background-size:93px 91px,147px 131px;background-position:16px 17px,78px 69px;opacity:.3;pointer-events:none}
.ambient-lights:after{opacity:.28;transform:perspective(600px) rotateX(22deg) scale(1.14);transform-origin:50% 90%;background-size:60px 60px}
.noise-overlay{opacity:.018}
.btn,.mini-btn,.icon-btn,.level-pill,.wallet-pill{font-family:Inter,'Segoe UI',system-ui,sans-serif;letter-spacing:.025em}
.btn{border-radius:10px;background:linear-gradient(175deg,#1a3547,#122335);border:1px solid #3b6078;color:#d2e7f5;box-shadow:inset 0 1px #ffffff0b}
.btn.primary{background:linear-gradient(115deg,#83f3e7,#55c9e1);color:#072233;border:1px solid #a7fff3;box-shadow:0 8px 26px #24c4d128,inset 0 1px #ffffff92}
.btn.primary:hover{background:linear-gradient(115deg,#a2fbee,#79d6f1);box-shadow:0 9px 26px #3fe4de44}
.btn.violet{background:linear-gradient(140deg,#273e58,#242e50);border:1px solid #647fa6;color:#f0f6ff}
.btn.warning{background:#3c3233;border-color:#8b6662;color:#ffd6a2}
.btn:hover:not(:disabled),.mini-btn:hover:not(:disabled){transform:translateY(-1px);filter:brightness(1.1)}
.btn:disabled{opacity:.36}
.btn:focus-visible,.mini-btn:focus-visible,.tile:focus-visible{outline:2px solid #9ffdf1;outline-offset:3px}
/* App chrome: retain understated premium details but avoid a heavy dashboard. */
.app-shell.in-game{height:100dvh;max-height:100dvh;min-height:0;max-width:none;overflow:hidden;padding:7px 13px 7px;gap:7px}
.in-game .topbar{min-height:43px;height:43px;max-height:43px;flex:0 0 43px;border-bottom:1px solid #41657b36;padding:0 3px 5px}
.in-game .brand-mark{background:radial-gradient(circle at 34% 20%,#1f7a87,#082638 74%);color:#b4fffa;border-color:#4996a0;box-shadow:0 0 18px #0e7e9770}
.in-game .top-actions{gap:6px}
.in-game .icon-btn{height:32px;width:33px}
.in-game .header-menu-btn{min-width:105px;height:33px}
.level-pill,.wallet-pill{white-space:nowrap}
/* Expansive, layered board with a little atmosphere instead of heavy solid cards. */
.in-game .layout{min-height:0;flex:1;display:grid;grid-template-columns:94px minmax(0,1fr) 151px;gap:8px;overflow:hidden}
.in-game .main-column{min-width:0;min-height:0;overflow:hidden;display:flex}
.in-game .rt-player-column{min-height:0;overflow:hidden;padding:7px 6px;border:1px solid #3d697a77;background:linear-gradient(155deg,#152a3bb8,#0b1c2cb8);border-radius:13px;box-shadow:inset 0 1px #ffffff0b}
.in-game .hud{height:100%;width:100%;display:flex;flex-direction:column;gap:8px;min-width:0}
.in-game .player-card{min-height:0;flex:0 0 auto;padding:7px 4px 8px;background:#142e3f91;border:1px solid #4e6d7a29;border-radius:10px;gap:4px}
.in-game .player-card.is-you{margin-top:auto}
.in-game .player-card.active{background:linear-gradient(145deg,#1c5a63c2,#123043);border-color:#6ceddeaa;box-shadow:inset 0 0 14px #28c9b32f,0 0 20px #56d4d41b}
.in-game .avatar{width:32px;height:32px;flex:0 0 32px;border-radius:11px;background:linear-gradient(155deg,#455870,#1e3152);box-shadow:inset 0 1px #ffffff18}
.in-game .player-meta .name{font-size:10px;letter-spacing:.03em}.in-game .player-meta .stats{font-size:9px;margin:0}
.in-game .player-meta .stats strong{font-size:12px}
.in-game .player-card .player-turn-dot{top:3px;right:5px}
.in-game .table-card{min-width:0;min-height:0;height:100%;flex:1;border:1px solid #4f87938a;border-radius:15px;
 background:radial-gradient(ellipse at 50% 35%,var(--table-a) 0%,var(--table-b) 77%),#0b1d2c;
 box-shadow:inset 0 0 92px #0005,0 0 0 1px #ffffff08,0 16px 38px #0003;isolation:isolate}
.in-game .table-card:before{content:"";inset:0;opacity:.25;background:linear-gradient(#a8f9ff0a 1px,transparent 1px),linear-gradient(90deg,#a8f9ff0a 1px,transparent 1px);background-size:35px 35px;mask-image:radial-gradient(ellipse at 50% 50%,#000b,transparent 77%)}
.in-game .table-card:after{content:"";position:absolute;inset:12% 0 0;z-index:-1;pointer-events:none;background:radial-gradient(ellipse 40% 23% at 50% 54%,#38e9e308,transparent 99%)}
.in-game .table-head{min-height:41px;height:41px;padding:6px 12px;background:#04182775;border-bottom:1px solid #86f6f51c;align-items:center}
.in-game .table-head .counter{font-size:10px;margin-top:2px;color:#8db6c9}
.in-game .table-inner{inset:43px 5px 4px;padding:8px 8px 13px;scroll-padding:20px;overscroll-behavior:contain}
.in-game .meld-grid{gap:15px 10px;padding:12px 8px 44px;align-content:flex-start}
/* Lighter, more spacious melds: outlines never touch the tile contours. */
.in-game .meld{padding:12px 12px 7px;min-height:0;gap:7px;background:linear-gradient(155deg,#17354972,#0b243285);border:1px solid #6b9db642;border-radius:13px;box-shadow:0 6px 17px #0003;overflow:visible}
.in-game .meld:hover,.in-game .meld:focus-within{border-color:#75cdde8a;background:#2043599c}
.in-game .meld.changed{border-color:#78f1e9a6;background:#164455ad;box-shadow:0 0 0 1px #79e6dd26,0 9px 20px #0003}
.in-game .meld.invalid{border-color:#ed8c9e99;background:#52344271}
.in-game .meld-title{top:-9px;left:11px;position:absolute;font-size:8px;background:#123042;border:1px solid #376578;letter-spacing:.07em;border-radius:6px;color:#c5e6ed;padding:2px 7px;box-shadow:0 3px 7px #0004}
.in-game .meld-tiles{display:flex;align-items:center;gap:0;overflow:visible;max-width:100%}
.in-game .meld .tile{width:42px;height:55px;min-width:42px;flex-basis:42px;margin:0;border-radius:8px}
.in-game .meld .tile-number{font-size:24px}
.in-game .meld .tile-mark{font-size:8px}
.in-game .meld .insert-slot{width:5px;min-width:5px;height:43px;z-index:2;margin:0 1px}
.in-game .meld .insert-slot:hover,.in-game .meld .insert-slot.is-over{width:12px;min-width:12px;margin:0 -2px}
.in-game .meld-append{border-radius:7px;min-height:21px;padding:2px 8px;margin-left:auto}
.in-game .board-drop-area{min-height:78px;min-width:116px;background:#6ac9cb08;border:1px dashed #7cbec34d;border-radius:13px;color:#a0bfc9}
.in-game .board-drop-area:hover{background:#64d9df1a;border-color:#83efebaa}
.in-game .empty-board{min-height:0;max-width:450px;padding:0 16px;gap:10px;margin:auto;align-self:center;flex-basis:100%}
.in-game .empty-board .empty-symbol{width:56px;height:56px;font-size:28px;background:#13435363;box-shadow:0 0 38px #4cbbc22a;border-radius:16px}
.in-game .empty-board span{max-width:360px;font-size:12px;line-height:1.6}
/* Controls and rack: visual breathing room; tiles do not get cropped by container rims. */
.in-game .rack-panel{flex:0 0 192px;max-height:192px;min-height:192px;padding:8px 11px 8px;border:1px solid #4e86917a;border-radius:14px;background:linear-gradient(160deg,#112b3cde,#0c1b2ae8);box-shadow:inset 0 1px #ffffff18,0 10px 28px #0003;overflow:visible}
.in-game .rack-top{min-height:23px;margin-bottom:3px;align-items:center}
.in-game .rack-heading{gap:9px}.in-game .rack-heading strong{color:#e5fbfb}
.in-game .rack-utilities .mini-btn{min-height:22px;padding:2px 8px}
.in-game .rack-scroll-row{grid-template-columns:23px minmax(0,1fr) 23px;gap:5px}
.in-game .rack-arrow{width:23px;min-width:23px;height:112px;min-height:112px;background:#20435870;border-color:#54839a68}
.in-game .rack{height:112px;min-height:112px;display:grid;grid-template-rows:repeat(2,52px);grid-auto-columns:42px;grid-auto-flow:column;align-content:center;justify-content:center;column-gap:8px;row-gap:4px;padding:3px 12px;scroll-padding:12px;border-radius:10px;background:linear-gradient(#183849,#0d2638);border:1px solid #4a7b8d70;overflow-x:auto;overflow-y:hidden}
.in-game .rack .tile{width:41px;height:49px;min-width:41px;flex-basis:41px;transform:none}
.in-game .rack .tile.selected{transform:translateY(-3px);box-shadow:0 2px 0 #8da5bc,0 0 0 3px #5eeade,0 0 16px #73fff477}
.in-game .rack .tile:hover:not(.selected){transform:translateY(-1px)}
.in-game .rack .tile-number{font-size:23px}.in-game .rack .tile-mark{font-size:7px}
.in-game .selection-tip,.in-game .selection-bar{min-height:18px;height:18px;font-size:10px;margin-top:2px;overflow:hidden}
.in-game .rack-actions{height:29px;min-height:29px;margin-top:3px;gap:6px}
.in-game .rack-action-group{gap:5px}.in-game .rack-action-group .btn{height:28px;min-height:28px;max-height:28px;font-size:10px;padding:0 9px;border-radius:8px}
.in-game .rack-action-primary .btn.primary{min-width:132px}
.in-game .btn-compose{background:linear-gradient(145deg,#1d646c,#174451);border-color:#6fc1c2;color:#ccfff8}
.in-game .stage-row{position:relative;z-index:3;background:#102d3bee;border:1px solid #4a8c91;padding:5px;border-radius:9px;margin-top:3px;min-height:35px;box-shadow:0 6px 14px #0004}
.in-game .stage{min-height:30px;max-height:52px}
/* Legible side rail, visually subordinate to table. */
.in-game .side-panel{padding:8px;gap:8px;border:1px solid #406d806c;border-radius:13px;background:linear-gradient(160deg,#122c3dbb,#0a1b29d1);min-width:0;overflow-x:hidden;overflow-y:auto}
.in-game .rail-timer{padding:10px 5px;background:#0c2335a6;border-color:#365d728c}
.in-game .turn-clock{font-size:31px;margin:6px 0;color:#effffc}
.in-game .rail-pool{padding:10px 6px 8px;gap:1px;background:#16354888;border-color:#517c8b68}
.in-game .rail-pool>strong{font-size:30px}.in-game .rail-draw{min-height:50px;margin-top:7px;border-color:#4f98a5a1;background:#22606b8c;font-size:26px}
.in-game .rail-draw small{font-size:10px;margin-top:2px}
.in-game .rail-info>div{padding:8px 3px;gap:5px}
.in-game .rail-info strong{font-size:14px}
.in-game .rail-link{padding:6px 2px;font-size:10px}
.in-game .rail-feedback{font-size:10px;margin-top:auto;padding:9px;border-color:#56859673;background:#19384a85}
.in-game .footline{flex:0 0 10px;max-height:10px;min-height:10px;padding:0 2px;font-size:8px;color:#7898ac}
/* Backgrounds of player-earned themes still retain individuality. */
.in-game[data-theme="synth"] .table-card{box-shadow:inset 0 0 65px #0b0b29,0 0 30px #ae65fe12}
.in-game[data-theme="gold"] .table-card{box-shadow:inset 0 0 55px #131006,0 0 30px #c9a16b15}
/* AI move preview deliberately unfolds visually, instead of an instantaneous unlabeled replacement. */
@keyframes rt09MeldReveal{0%{opacity:.12;transform:translateY(-12px) scale(.97);filter:brightness(2)}65%{opacity:1;transform:translateY(1px)}100%{opacity:1;transform:translateY(0);filter:brightness(1)}}
.in-game .meld.ai-arriving{animation:rt09MeldReveal .48s cubic-bezier(.2,.75,.15,1) backwards;animation-delay:calc(var(--move-index) * 95ms)}
.v09-ai-move{display:flex;align-items:center;gap:10px;background:#0c3947f0;border-top:1px solid #72eadd9d;color:#d4fffc;padding:8px 14px;min-width:0}
.v09-ai-move .ai-move-beacon{font-size:24px;color:#73e6e6}
.v09-ai-move>div{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.v09-ai-move strong{font-size:10px;letter-spacing:.05em}
.v09-ai-move small{font-size:10px;color:#b9e7e7;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.v09-ai-move .ai-move-chip{border:1px solid #bdf7fa6c;border-radius:99px;padding:5px 8px;font-size:8px;letter-spacing:.08em}
/* Menu is a genuine screen, not a tall list of same-weight buttons. */
.v09-menu.menu-shell{width:100%;max-width:1600px;min-height:100dvh;padding:13px clamp(18px,3vw,48px) 13px;gap:12px}
.v09-menu .topbar{min-height:51px;flex:0 0 51px;padding-bottom:9px}
.v09-menu-layout{display:grid;grid-template-columns:minmax(0,.98fr) minmax(0,.95fr);align-items:center;gap:clamp(15px,4vw,72px);flex:1;min-height:0;max-width:1300px;margin:auto;width:100%;padding:8px 0 12px}
.v09-menu .hero-copy{min-width:0;max-width:620px}
.v09-menu .hero-title{font-size:clamp(44px,5vw,76px);line-height:.94;margin:11px 0 12px;letter-spacing:-.066em}
.v09-menu .hero-kicker{font-size:10px;color:#9be1e1;letter-spacing:.12em}
.v09-menu .hero-desc{font-size:13px;max-width:535px;line-height:1.52;margin:0 0 12px;color:#a9c5d5}
.v09-menu .menu-main-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px}
.v09-menu .menu-main-actions .btn{min-height:44px;font-size:11px;font-weight:850;justify-content:center}
.v09-menu .menu-main-actions .btn:first-child{background:linear-gradient(113deg,#86f5e8,#60ccdd);color:#082532;border-color:#d5fffb;box-shadow:0 10px 26px #36f7d01b}
.v09-menu .menu-sections{display:grid;grid-template-columns:1fr 1fr;gap:10px 13px;margin-top:15px}
.v09-menu .menu-section{min-width:0}
.v09-menu .menu-section h2{margin:0 0 5px;font-size:9px;color:#77c5cc;letter-spacing:.15em;font-weight:850}
.v09-menu .menu-section-buttons{display:grid;grid-template-columns:1fr;gap:5px}
.v09-menu .menu-section-buttons .btn{min-height:34px;padding:5px 10px;justify-content:flex-start;text-align:left;font-size:10px;font-weight:750;line-height:1.15;white-space:normal}
.v09-menu .menu-spec{gap:6px;margin-top:13px}
.v09-menu .menu-spec span{font-size:9px;padding:5px 8px;background:#0a283852;color:#90c6ce;border-color:#32677c7c}
.v09-menu .hero-graphic{position:relative;height:clamp(345px,65vh,580px);min-height:0;max-height:none;border-radius:28px;background:radial-gradient(ellipse 52% 62% at 50% 55%,#23616d77 0%,#142b49 55%,#091927 100%);border:1px solid #5c9ba36b;box-shadow:inset 0 0 90px #0309158e,0 22px 70px #01071391;overflow:hidden}
.v09-menu .hero-graphic:before{content:"";position:absolute;inset:0;background:radial-gradient(#87f4ed88 .8px,transparent 1px);background-size:47px 41px;opacity:.19;mask-image:linear-gradient(180deg,#000,transparent 85%)}
.v09-menu .hero-graphic:after{content:"";pointer-events:none;position:absolute;inset:0;background:linear-gradient(90deg,#ffffff0a 1px,transparent 1px),linear-gradient(#ffffff0a 1px,transparent 1px);background-size:39px 39px;transform:perspective(360px) rotateX(67deg) translateY(75%) scale(1.5);opacity:.65}
.v09-menu .hero-board-label{z-index:4;color:#92d7d9}
.v09-menu .hero-tiles{position:relative;z-index:4;transform:rotate(-7deg) translateY(-5px)}
.v09-menu .hero-tiles .tile{transform:scale(1.48);margin:0 9px}
.v09-menu .hero-tiles .tile:nth-child(2){transform:scale(1.48) translateY(-8px)}
.v09-menu .hero-chip{z-index:4;bottom:27px;left:25px;right:auto;font-size:10px;color:#a8dbdd}
.v09-menu .hero-floater{position:absolute;z-index:4;top:50px;right:24px;font-size:8px;letter-spacing:.18em;color:#a5d2da80}
.v09-menu .footline{flex:0 0 15px;max-height:15px;min-height:15px;padding:0}
/* Tutorial: deliberate sequence + one visual exercise, much denser and easy to scan. */
.tutorial-backdrop{padding:10px;backdrop-filter:blur(16px);background:#03101ada}
.tutorial-dialog{width:min(780px,100%);max-height:calc(100dvh - 20px);padding:16px 20px 14px;border-radius:18px;border:1px solid #71c4bd78;background:radial-gradient(ellipse at 85% 0%,#214755,#101d2f 60%,#0c1828);box-shadow:0 30px 100px #000d}
.tutorial-top{font-size:9px}.tutorial-progress{margin:12px 0 14px;gap:5px}
.tutorial-main{min-height:210px;grid-template-columns:1fr 1fr;gap:20px;align-items:center}
.tutorial-copy h2{font-size:clamp(21px,2.6vw,30px);margin:8px 0 10px}
.tutorial-copy p{font-size:12px;line-height:1.55;margin:0;color:#bfd5e0}
.tutorial-demo{min-height:190px;padding:14px;gap:12px;background:radial-gradient(ellipse at 48% 10%,#265567,#132a3b 80%);border-color:#5d9b9f91}
.tutorial-demo-title{font-size:9px}.tutorial-tile{width:43px;min-width:43px;height:58px}.tutorial-tile .tile-number{font-size:24px}
.tutorial-demo-note{font-size:11px}.tutorial-bottom{margin-top:14px;padding-top:12px}.tutorial-bottom .btn{min-height:35px}
/* Only a mobile portrait session prompts rotation. On iOS orientation lock is not promised. */
.orientation-guide{display:none}
.landscape-btn{font-size:18px}
@media (max-width:1100px) and (min-width:701px){
 .v09-menu-layout{grid-template-columns:1fr .8fr;gap:15px}
 .v09-menu .hero-title{font-size:clamp(44px,5vw,62px)}
 .v09-menu .hero-graphic{height:clamp(300px,62vh,500px)}
}
@media (max-width:800px) and (orientation:portrait){
 .v09-menu-layout{display:flex;flex-direction:column;align-items:stretch;overflow:visible}
 .v09-menu .hero-graphic{height:200px;min-height:200px;order:-1}
 .v09-menu .hero-copy{max-width:none}
 .v09-menu .hero-tiles .tile{transform:scale(1.12);margin:0 5px}
 .v09-menu .hero-tiles .tile:nth-child(2){transform:scale(1.12) translateY(-6px)}
 .v09-menu .hero-title{font-size:clamp(41px,10vw,62px)}
 .v09-menu .menu-section-buttons .btn{min-height:37px}
}
/* LANDSCAPE PHONE. Override old <=1000px column-stacking rules. */
@media (orientation:landscape) and (max-height:620px) and (max-width:1100px){
 html,body,#app{height:100%;overflow:hidden}
 .app-shell.in-game{height:100dvh!important;min-height:0!important;max-height:100dvh!important;overflow:hidden!important;padding:3px 6px 3px!important;gap:3px!important}
 .in-game .topbar{height:30px!important;min-height:30px!important;max-height:30px!important;flex:0 0 30px!important;padding:0 0 2px!important;gap:3px}
 .in-game .brand-mark{display:none}
 .in-game .brand strong{font-size:10px;letter-spacing:0}.in-game .brand small{display:none}
 .in-game .top-actions{gap:3px}.in-game .top-actions .icon-btn{width:27px;height:26px;font-size:13px}
 .in-game .level-pill,.in-game .wallet-pill{font-size:8px;padding:4px 6px}
 .in-game .wallet-pill span{display:none}
 .in-game .header-menu-btn{height:26px;min-height:26px;min-width:0;padding:0 7px;font-size:9px}
 .in-game .header-menu-btn span{display:none}
 .in-game .layout{display:grid!important;flex:1!important;min-height:0!important;overflow:hidden!important;grid-template-columns:64px minmax(0,1fr) 100px!important;gap:4px!important}
 .in-game .rt-player-column{display:flex!important;padding:3px!important;min-height:0!important;overflow-y:auto;overflow-x:hidden;border-radius:8px}
 .in-game .hud{display:flex!important;flex-direction:column!important;gap:3px!important;flex-wrap:nowrap;height:auto!important;max-height:none!important;min-height:0!important}
 .in-game .player-card{padding:4px 2px!important;min-height:0!important;flex:0 0 auto!important;gap:1px;justify-content:center;border-radius:7px}
 .in-game .player-card.is-you{margin-top:0}
 .in-game .avatar{width:22px;height:22px;flex:0 0 22px;border-radius:7px;font-size:11px}
 .in-game .player-meta .name{font-size:8px}.in-game .player-meta .stats{font-size:8px}.in-game .player-meta .stats strong{font-size:10px}
 .in-game .main-column{min-height:0!important;overflow:hidden!important;display:flex!important}
 .in-game .table-card{height:100%!important;min-height:0!important;flex:1 1 0!important;border-radius:9px!important}
 .in-game .table-head{height:27px!important;min-height:27px!important;padding:2px 6px}
 .in-game .eyebrow{font-size:9px;letter-spacing:0}.in-game .table-separator,.in-game .table-head .counter{display:none}
 .in-game .table-tools{gap:2px}.in-game .table-tools .mini-btn{min-height:21px;min-width:21px;padding:1px 3px}
 .in-game .table-tools .counter{display:block!important;font-size:8px}
 .in-game .table-inner{inset:28px 1px 1px!important;padding:3px 2px!important;overflow:auto!important}
 .in-game .meld-grid{gap:10px 7px;padding:9px 7px 25px}
 .in-game .meld{gap:3px;padding:9px 6px 4px;min-height:0;border-radius:8px}
 .in-game .meld .tile{width:30px;height:39px;min-width:30px;flex-basis:30px;border-radius:5px}
 .in-game .meld .tile-number{font-size:19px}.in-game .meld .tile-mark{font-size:6px;margin-top:1px}
 .in-game .meld-title{font-size:7px;top:-8px;padding:1px 4px}
 .in-game .meld .insert-slot{height:32px;min-width:3px;width:3px;margin:0}
 .in-game .meld-append{font-size:7px;padding:2px 5px;min-height:16px}
 .in-game .empty-board{min-height:0;padding:3px 6px;gap:4px;max-width:240px}
 .in-game .empty-board .empty-symbol{width:32px;height:32px;font-size:18px}
 .in-game .empty-board strong{font-size:10px}.in-game .empty-board span{font-size:9px;line-height:1.3}
 .in-game .board-drop-area{min-width:70px;min-height:50px;font-size:8px;padding:4px}
 .in-game .board-drop-area small{font-size:8px}.in-game .board-drop-area span{font-size:16px}
 .in-game .side-panel{display:flex!important;flex-direction:column!important;min-height:0!important;overflow-y:auto!important;height:100%!important;padding:4px!important;gap:3px!important;border-radius:8px}
 .in-game .rail-timer{padding:6px 3px}.in-game .rail-title{font-size:8px}
 .in-game .turn-clock{font-size:20px;margin:2px 0 3px}
 .in-game .rail-pool{padding:5px 2px}.in-game .rail-pool>strong{font-size:22px}.in-game .rail-pool>small{display:none}
 .in-game .rail-draw{min-height:30px;margin-top:3px;font-size:18px;border-radius:6px}.in-game .rail-draw small{font-size:8px;margin-top:0}
 .in-game .rail-info{gap:3px}.in-game .rail-info>div{padding:5px 1px;gap:2px}.in-game .rail-info span{font-size:7px}.in-game .rail-info strong{font-size:11px}
 .in-game .rail-link{font-size:8px;padding:3px 1px}.in-game .rail-feedback{display:none}
 .in-game .rack-panel{flex:0 0 111px!important;min-height:111px!important;max-height:111px!important;padding:3px 6px!important;overflow:visible!important;border-radius:9px!important}
 .in-game .rack-top{min-height:15px;margin-bottom:1px!important;gap:3px;flex-wrap:nowrap}
 .in-game .rack-heading{min-width:0;gap:5px;flex-wrap:nowrap}.in-game .rack-heading strong{font-size:9px}.in-game .rack-heading small{font-size:8px}
 .in-game .rack-utilities{gap:2px;flex-wrap:nowrap;margin-left:auto}.in-game .rack-utilities .mini-btn{font-size:8px;padding:1px 4px;min-height:17px}
 .in-game .utility-sep{display:none}
 .in-game .rack-scroll-row{grid-template-columns:17px minmax(0,1fr) 17px;gap:2px}
 .in-game .rack-arrow{height:58px;min-height:58px;width:17px;min-width:17px;font-size:17px;border-radius:5px}
 .in-game .rack{height:58px!important;min-height:58px!important;grid-template-rows:repeat(2,25px)!important;grid-auto-flow:column;grid-auto-columns:30px!important;gap:2px 4px!important;padding:2px 7px!important;border-radius:6px;justify-content:center}
 .in-game .rack .tile{width:29px;height:25px;min-width:29px;flex-basis:29px;border-radius:4px;box-shadow:0 1px 0 #7c9fa5,0 3px 5px #0006}
 .in-game .rack .tile-number{font-size:16px}.in-game .rack .tile-mark{display:none}
 .in-game .rack .tile.selected{transform:translateY(-2px)}
 .in-game .selection-tip,.in-game .selection-bar{height:13px;min-height:13px;max-height:13px;margin:0;font-size:8px}
 .in-game .selection-note{display:none}
 .in-game .rack-actions{height:19px!important;min-height:19px!important;max-height:19px!important;margin-top:1px;gap:3px;flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden}
 .in-game .rack-action-group{gap:3px;flex-wrap:nowrap}
 .in-game .rack-action-group .btn{height:19px!important;min-height:19px!important;max-height:19px!important;padding:0 5px!important;font-size:8px!important;border-radius:5px}
 .in-game .rack-action-primary .btn.primary{min-width:96px}
 .in-game .rack-action-group .compact-opt{display:none}
 .in-game .stage-row{position:absolute;bottom:111px;right:7px;left:7px;z-index:10;max-height:62px;overflow:auto}
 .in-game .footline{display:none!important}
 .layout-puzzle .puzzle-status{padding:5px 3px;gap:6px;display:flex;flex-direction:column;flex-wrap:nowrap}
 .layout-puzzle .puzzle-status strong{min-width:0;font-size:10px}.layout-puzzle .puzzle-status small{font-size:7px}
 .layout-puzzle .puzzle-status span{display:none}.layout-puzzle .puzzle-side{padding:2px}
 .layout-puzzle .puzzle-panel{padding:5px;gap:5px}.layout-puzzle .puzzle-panel strong{font-size:10px}.layout-puzzle .puzzle-panel p{font-size:9px}
 .layout-puzzle .puzzle-side .btn{min-height:23px;padding:3px;font-size:8px}
 .v09-ai-move{padding:2px 5px;gap:4px}.v09-ai-move strong{font-size:8px}.v09-ai-move small{font-size:8px}
 .v09-ai-move .ai-move-beacon{font-size:15px}.v09-ai-move .ai-move-chip{display:none}
 /* Landscape menu is scrollable within its content rather than clipping bottom actions. */
 .v09-menu.menu-shell{height:100dvh;max-height:100dvh;min-height:0;padding:3px 9px;gap:3px;overflow:hidden}
 .v09-menu .topbar{height:30px;min-height:30px;flex:0 0 30px;padding:0}.v09-menu .brand-mark{display:none}
 .v09-menu .brand strong{font-size:11px}.v09-menu .brand small{display:none}
 .v09-menu .top-actions{gap:3px}.v09-menu .top-actions .icon-btn{width:26px;height:25px}
 .v09-menu .header-menu-btn{height:25px;min-height:25px;font-size:8px;padding:0 6px}
 .v09-menu .level-pill,.v09-menu .wallet-pill{font-size:8px;padding:4px 5px}
 .v09-menu-layout{display:grid!important;grid-template-columns:minmax(0,1fr) minmax(160px,.74fr)!important;gap:10px!important;max-width:100%;min-height:0;overflow-y:auto;padding:3px 0!important;align-items:start}
 .v09-menu .hero-title{font-size:clamp(29px,5.2vw,48px);margin:3px 0 6px;line-height:.9}
 .v09-menu .hero-kicker{font-size:8px}.v09-menu .hero-desc{font-size:10px;line-height:1.25;margin:0}
 .v09-menu .menu-main-actions{margin-top:7px;gap:5px}.v09-menu .menu-main-actions .btn{min-height:29px;font-size:9px;padding:4px 6px}
 .v09-menu .menu-sections{gap:5px 7px;margin-top:6px}
 .v09-menu .menu-section h2{font-size:8px;margin-bottom:2px}.v09-menu .menu-section-buttons{gap:3px}
 .v09-menu .menu-section-buttons .btn{min-height:24px;padding:3px 6px;font-size:8px;line-height:1.2}
 .v09-menu .menu-spec{margin-top:6px}.v09-menu .menu-spec span{font-size:8px;padding:2px 5px}
 .v09-menu .hero-graphic{height:calc(100dvh - 43px);min-height:0;max-height:none;border-radius:15px;order:initial}
 .v09-menu .hero-tiles .tile{transform:scale(1);margin:0 4px}.v09-menu .hero-tiles .tile:nth-child(2){transform:scale(1) translateY(-5px)}
 .v09-menu .hero-board-label{font-size:8px;left:12px;top:12px}
 .v09-menu .hero-chip{font-size:8px;bottom:12px;left:12px}
 .v09-menu .footline{display:none}
 /* Tutorial must be entirely visible with a small height; keep steps in two columns. */
 .tutorial-backdrop{padding:3px}.tutorial-dialog{width:min(820px,98vw);max-height:calc(100dvh - 6px);padding:7px 11px;border-radius:12px}
 .tutorial-top{font-size:8px}.tutorial-top .mini-btn{min-height:20px;font-size:8px}
 .tutorial-progress{margin:5px 0 7px}.tutorial-main{display:grid!important;grid-template-columns:1fr 1fr!important;gap:10px!important;min-height:0!important}
 .tutorial-copy{padding:0}.tutorial-copy h2{font-size:19px;margin:3px 0 5px}.tutorial-copy p{font-size:10px;line-height:1.3;margin:0}
 .tutorial-demo{min-height:0!important;padding:7px;gap:5px;border-radius:9px}
 .tutorial-demo-title{font-size:8px}.tutorial-tile{height:37px;width:28px;min-width:28px}.tutorial-tile .tile-number{font-size:17px}.tutorial-tile .tile-mark{font-size:6px;margin-top:1px}
 .tutorial-demo-note{font-size:9px}.tutorial-controls{gap:3px}.tutorial-controls span:not(.arr){font-size:8px;padding:4px 6px}.tutorial-controls .arr{font-size:12px}
 .tutorial-bottom{margin-top:6px;padding-top:5px}.tutorial-bottom .btn{min-height:24px;font-size:9px;padding:0 9px}
}
@media (orientation:landscape) and (max-height:400px) and (max-width:1100px){
 .in-game .rack-panel{flex-basis:103px!important;min-height:103px!important;max-height:103px!important}
 .in-game .rack{height:53px!important;min-height:53px!important;grid-template-rows:repeat(2,23px)!important}
 .in-game .rack .tile{height:22px}.in-game .rack-arrow{height:53px;min-height:53px}
 .in-game .rack-action-group .btn{font-size:7px!important;padding:0 4px!important}
 .in-game .rack-actions{overflow-x:auto}
}
/* Portrait prompt only when a phone actually enters gameplay. */
@media (orientation:portrait) and (max-width:600px){
 .in-game[data-portrait="prompt"] .orientation-guide{position:fixed;inset:0;z-index:300;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:20px;background:radial-gradient(ellipse at 50% 20%,#153e57,#050c17 75%);text-align:center}
 .orientation-guide .rotate-glyph{width:76px;height:76px;border:1px solid #7ee6ec99;border-radius:23px;display:grid;place-items:center;font-size:50px;color:#9effee;box-shadow:0 0 55px #38c7cc38}
 .orientation-guide strong{font-size:22px;letter-spacing:-.02em}.orientation-guide p{max-width:300px;margin:0 0 5px;color:#b0c9d6;font-size:13px;line-height:1.55}
 .orientation-guide .btn{min-width:205px;min-height:42px}
 .in-game[data-portrait="allow"] .orientation-guide{display:none}
}
@media (max-width:900px) and (orientation:portrait){
 .app-shell.in-game{height:auto;min-height:100dvh;max-height:none;overflow:visible}
 .in-game .rack-panel{max-height:none;min-height:192px;overflow:hidden}
 .in-game .layout{display:flex;flex-direction:column;overflow:visible;min-height:0}
 .in-game .table-card{height:340px;min-height:340px;flex:0 0 340px}
 .in-game .rt-player-column{min-height:70px;overflow:visible}
 .in-game .hud{flex-direction:row;flex-wrap:wrap}
 .in-game .player-card{flex:1 1 23%;min-height:60px}
 .in-game .side-panel{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));height:auto}
 .in-game .rack-actions{height:auto;min-height:0;flex-wrap:wrap;overflow:visible}
 .in-game .rack-action-group{flex-wrap:wrap}
 .in-game .rack-action-group .btn{height:32px;min-height:32px;max-height:none}
 .v09-menu.menu-shell{overflow:visible}
}
@media (prefers-reduced-motion:reduce){.in-game .meld.ai-arriving{animation:none}.ambient-lights:after{transform:none}}
/* Final compatibility fixes against the v0.5 <=850px fallback and rack controls. */
@media (orientation:landscape) and (max-height:620px) and (max-width:1100px){
 .in-game .layout{grid-template-rows:minmax(0,1fr)!important;grid-auto-rows:minmax(0,1fr)!important}
 .in-game .main-column{height:100%!important;min-height:0!important}
 .in-game .rt-player-column{height:100%!important}
 .in-game .rack-top{min-height:14px!important;height:14px!important}
 .in-game .selection-tip,.in-game .selection-bar{min-height:12px!important;height:12px!important}
 .in-game .rack-actions{margin-top:0!important;height:18px!important;min-height:18px!important;max-height:18px!important}
 .in-game .rack-action-group .btn{height:18px!important;min-height:18px!important;max-height:18px!important}
 .in-game .rack-panel{padding-top:2px!important;padding-bottom:2px!important}
 .in-game .rack{height:52px!important;min-height:52px!important;grid-template-rows:repeat(2,22px)!important}
 .in-game .rack-arrow{height:52px!important;min-height:52px!important}
 .in-game .rack .tile{height:21px!important}
 .in-game .rack-scroll-row{height:52px}
}
@media (min-width:1101px),((min-height:621px) and (min-width:901px)){
 .in-game .rack{height:104px;min-height:104px;grid-template-rows:repeat(2,48px)}
 .in-game .rack .tile{height:46px}
 .in-game .rack-arrow{height:104px;min-height:104px}
}
/* Tile focus remains fully inside scrollable trays, never cut at the top edge. */
.in-game .rack .tile.selected,
.in-game .rack .tile.selected:hover{transform:none;outline:2px solid #75f8ef;outline-offset:-2px;box-shadow:inset 0 0 0 2px #81fbf54d,0 1px 0 #879bb0,0 0 13px #84f9ed63}
.in-game .rack{justify-content:safe center!important}
/* Keep the entire landscape menu navigation visible even at iPhone SE landscape height. */
@media (orientation:landscape) and (max-height:430px) and (max-width:1100px){
 .v09-menu .hero-graphic .hero-tiles{transform:rotate(-7deg) scale(.78)}
 .v09-menu .menu-spec{display:none}
 .v09-menu .menu-section-buttons .btn{min-height:21px;padding:2px 5px}
 .v09-menu .hero-title{font-size:clamp(28px,4.8vw,43px)}
 .v09-menu .hero-desc{font-size:9px}
 .v09-menu .menu-sections{margin-top:4px;gap:3px 6px}
 .v09-menu .menu-main-actions{margin-top:5px}.v09-menu .menu-main-actions .btn{min-height:27px}
 .v09-menu .menu-section h2{margin-bottom:1px}
}
@media (orientation:portrait) and (max-width:600px){
 .in-game .topbar .level-pill,.in-game .topbar .wallet-pill{display:none}
 .in-game .topbar .brand strong{font-size:10px}
 .in-game .topbar .brand-mark{display:none}
 .in-game .topbar .header-menu-btn{min-width:0;padding:0 7px}
 .in-game .rack-panel{min-height:220px;max-height:none;height:auto;overflow:visible}
 .in-game .rack-actions{height:auto;overflow:visible;flex-wrap:wrap}
 .in-game .rack .tile.selected{transform:none}
}
/* Mobile landscape uses a single, comfortably tappable rack row.
   Additional tiles scroll horizontally instead of shrinking to unreadable half-height keys. */
@media (orientation:landscape) and (max-height:620px) and (max-width:1100px){
 .in-game .player-card{flex-direction:column!important;text-align:center!important;gap:2px!important}
 .in-game .player-card .avatar{width:23px;height:23px;flex:0 0 23px}
 .in-game .rack-panel{position:relative}
 .in-game .rack{grid-template-rows:46px!important;grid-auto-columns:36px!important;grid-auto-flow:column!important;column-gap:3px!important;row-gap:0!important;align-content:center!important;justify-content:safe center!important}
 .in-game .rack .tile{width:35px!important;min-width:35px!important;flex-basis:35px!important;height:44px!important;box-shadow:0 2px 0 #8299ad,0 3px 5px #0007}
 .in-game .rack .tile-number{font-size:21px!important}.in-game .rack .tile-mark{display:block;font-size:6px;margin-top:1px}
 .in-game .rack-scroll-row{align-items:center}
}
