/* Codex mobile experience — deliberate product skin, keeping the existing API UI. */
:root{--bg:#101312;--panel:#1b201d;--panel-2:#252b25;--line:#343b32;--gold:#c6a365;--gold-hi:#f5dba1;--text:#f2f0e8;--text-2:#a9afa4;--tabs-h:68px;--gold-grad:linear-gradient(115deg,#eddbad 0%,#d7b979 32%,#b7904b 76%,#d9bb7e 100%)}
body{background:radial-gradient(ellipse at 50% 0,#2c2d21 0,transparent 44%),#101312}
.app{max-width:480px;padding-left:max(16px,env(safe-area-inset-left));padding-right:max(16px,env(safe-area-inset-right));background:linear-gradient(180deg,#1b1f1980,transparent 45%);min-height:100svh}
.top{height:64px;gap:10px;border-bottom:1px solid #d7b97920}.logo{width:105px;filter:brightness(1.13)}
.balance{margin-left:auto;background:#24271f;border-color:#a98b4b50;min-height:36px;font-size:13px;padding:0 11px;max-width:51%}.coin{width:15px;height:15px;box-shadow:inset 0 0 0 2px #cfaf64,inset 0 0 0 3px #8d7139}
.header-lang{border:1px solid #72795b48;background:#1a1e18;color:var(--text-2);border-radius:50%;width:44px;height:44px;font-size:11px;flex:none}
.demo-indicator{display:flex;align-items:center;justify-content:center;gap:6px;font-size:11px;line-height:16px;color:#a5ab96;padding-top:10px}.demo-indicator i{width:4px;height:4px;background:#9bab80;border-radius:50%}
.view{padding-top:18px;gap:14px}.lobby-intro{display:flex;align-items:center;justify-content:space-between}.eyebrow{font-size:10px;line-height:16px;letter-spacing:2.8px;color:#bdac80}.lobby-intro h1{font-size:26px;line-height:36px;font-weight:600;margin:1px 0 0;letter-spacing:1px}.help-circle{width:44px;height:44px;border:0;background:none;color:#b9baab;font-size:15px}.help-circle::first-letter{border:1px solid #a3a68c;padding:1px 6px;border-radius:50%}
.scenes{border:0;background:#090c09;padding:4px;gap:4px;border-radius:14px;box-shadow:0 1px 0 #fff1,inset 0 1px 5px #0006;min-height:64px}.scene{min-height:56px;border-radius:10px;display:flex;align-items:center;justify-content:center;gap:5px;color:#a6aa9e;padding:4px 2px}.scene strong{font-size:24px;line-height:30px;font-weight:600;letter-spacing:-.7px}.scene small{font-size:11px;line-height:18px;font-weight:400}.scene[aria-selected="true"]{background:var(--gold-grad);box-shadow:inset 0 1px 0 #fff8,0 2px 6px #0006;color:#292312;position:relative}.scene[aria-selected="true"]::after{content:"";position:absolute;bottom:5px;width:15px;height:2px;background:#64512880;border-radius:2px}.scene .off{position:absolute;bottom:0}
.round-bar{background:transparent;border:0;border-radius:0;min-height:28px;padding:0 2px;gap:5px}.round-id{gap:12px;font-size:12px}.round-id>span:first-child{color:#d2d4c6;font-weight:500}.occ{font-size:12px}.occ b{font-size:15px;color:#e6d8b5}.status{border:0;padding:1px 0 1px 12px;color:#a8b790;font-size:11px;position:relative}.status::before{content:"";position:absolute;width:4px;height:4px;background:currentColor;border-radius:50%;left:0;top:8px}.status.new{color:#b4ad98}.status.full{color:var(--hero)}
.mine{background:#272b2180;border:1px solid #87935e26;padding:8px 10px;border-radius:10px}.mine-chip{background:#161a13;border-radius:6px;min-height:32px}.mine-label{font-size:11px}
.arena{isolation:isolate;margin-top:0;contain:layout;transition:height .2s ease;background:radial-gradient(ellipse at 50% 60%,#6d542e18,transparent 60%)}
.stage{z-index:-1;overflow:hidden;border-radius:30px;background:linear-gradient(125deg,#24281f33,transparent 35%,#96845d09);box-shadow:inset 0 0 0 1px #b3a57918}
.stage::before{inset:14px 4px!important;border-radius:50% 50% 40% 40%!important;background:radial-gradient(ellipse at 50% 57%,#8b6e3130,transparent 63%),repeating-conic-gradient(from 0deg at 50% 60%,#8b815606 0deg 1deg,transparent 1deg 30deg);box-shadow:none}
.stage::after{content:"";position:absolute;left:14%;right:14%;height:38%;bottom:12%;border-radius:50%;background:radial-gradient(ellipse at 50% 50%,#93794623,#191d16 58%,#c6a36540 59%,#5b492b 60%,#161b13 63%,#c6a36555 64%,transparent 65%);box-shadow:0 17px 26px -15px #000b;transform:perspective(350px) rotateX(25deg);z-index:-1}
.stage-rings{position:absolute;inset:26% 12% 6%;border:1px solid #bda46724;border-radius:50%;transform:perspective(400px) rotateX(36deg);box-shadow:0 0 0 9px #a9905310,0 0 0 10px #bb9d5520}
.stage-rings::after{content:"";position:absolute;inset:11%;border:1px dashed #aa97542b;border-radius:50%}
.floor-mark{position:absolute;width:22%;height:auto;left:39%;bottom:14%;opacity:.13;transform:perspective(250px) rotateX(45deg)}
#ambient-canvas{position:absolute;inset:0;width:100%;height:100%;opacity:.6;pointer-events:none}
.arena-caption{position:absolute;top:72px;left:50%;transform:translateX(-50%);display:flex;gap:10px;font-size:8px;letter-spacing:2px;color:#af9f724d;white-space:nowrap;z-index:-1}
.mascot{overflow:visible;justify-content:center;gap:0;z-index:2}.mascot-visual{position:relative;width:100%;height:calc(100% - 25px);filter:drop-shadow(0 12px 8px #0008);transform-origin:50% 90%;animation:mascot-idle 4.8s ease-in-out infinite;will-change:transform}
.mascot-visual img{position:absolute!important;inset:0;display:block;width:100%!important;height:100%!important;object-fit:contain;filter:none!important;object-position:center bottom;transition:opacity .18s;pointer-events:none}
#mascot-pose{opacity:0}.mascot[data-mood="welcome"] #mascot-img,.mascot[data-mood="claim"] #mascot-img{opacity:0}.mascot[data-mood="welcome"] #mascot-pose,.mascot[data-mood="claim"] #mascot-pose{opacity:1}
.mascot[data-mood="focus"] .mascot-visual{animation:none;transform:translateY(2px) rotate(-1deg)}.mascot[data-mood="hero"] .mascot-visual{animation:hero-float 4s ease-in-out infinite;filter:drop-shadow(0 0 12px #6cbbe24d)}
.mascot-caption{font-size:10px;color:#bdab7b;line-height:18px;white-space:nowrap;text-align:center;letter-spacing:1px;opacity:.8;padding-top:2px}
@keyframes mascot-idle{0%,100%{transform:translateY(0) rotate(-.4deg)}50%{transform:translateY(-3px) rotate(.4deg)}}@keyframes hero-float{0%,100%{transform:translateY(-2px)}50%{transform:translateY(-9px)}}
.seats{z-index:3;pointer-events:none}.seat{pointer-events:auto;border-radius:9px;background:linear-gradient(155deg,#2b2f26,#171b15 70%);border-color:#68705044;box-shadow:inset 0 1px 0 #c6cdb312,0 3px 4px #0005;color:#7c8272;grid-template-rows:12px 1fr}.seat .no{font-size:9px;line-height:12px;color:#9a9d8c}.seat .plus{width:14px;height:14px;opacity:.5}.seat.taken{background:linear-gradient(145deg,#5c4f30,#302a1c);border-color:#bba05e8c;color:#e6ca85;box-shadow:inset 0 1px 0 #e7cf8f55,0 4px 5px #0006}.seat.taken .no{color:#f4e1af}.seat.taken svg{width:17px;height:17px;filter:drop-shadow(0 0 3px #d6b06133)}.seat.self{border-color:#ffe1a1;box-shadow:0 0 0 1px #ffe1a1,0 0 12px #d5af5c30}.seat .badge{font-size:9px;line-height:13px;bottom:-6px;min-width:23px;text-align:center}.seat.hero{background:linear-gradient(145deg,#284858,#14242c);border-color:var(--hero);box-shadow:0 0 18px #a4d7ff40}.seat.hero .no{color:#c2ebff}.seat.spot{box-shadow:0 0 0 2px #f5dba1,0 0 24px #e9c88888}
.arena[data-mode="grid"] .stage-rings{top:0;bottom:auto;height:160px}.arena[data-mode="grid"] .floor-mark{top:130px;bottom:auto}.arena[data-mode="grid"] .stage::after{top:90px;height:60px;bottom:auto}
.arena-footer{display:flex;align-items:center;justify-content:center;gap:7px;min-height:24px;margin-top:-2px}.live-dot{width:4px;height:4px;border-radius:50%;background:#a6b88d;flex:none}.remaining{font-size:11px;line-height:18px;color:#bec2b1}.gesture-btn{font-size:10px;color:#c4aa70;min-height:44px;border:0;background:none;padding:0 2px 0 8px;margin:-10px 0;white-space:nowrap}
.entry-panel{background:linear-gradient(120deg,#282b20,#1e231a);border:1px solid #9f915242;border-radius:16px;padding:12px;display:grid;gap:10px;box-shadow:0 6px 22px #0002}.fee{min-height:34px;background:none;border:0;padding:0;border-radius:0;display:grid;grid-template-columns:1fr 1fr auto;align-items:center;gap:8px;text-align:left}.fee>div{display:grid;gap:0}.fee span{font-size:10px;line-height:16px;color:#a7ac99}.fee b{color:#e9dfc7;font-size:16px;line-height:22px;font-weight:500}.fee .fee-total{text-align:right;border-left:1px solid #a7a27530;padding-left:12px}.fee-total b{color:#e9cd8f;font-size:21px}.fee small{font-size:10px;font-weight:400;margin-left:3px;color:#b8ac8e}
.btn-primary{min-height:52px;position:relative;letter-spacing:.4px;border-radius:9px;clip-path:none;box-shadow:inset 0 1px 0 #fff7,0 3px 0 #7c6338,0 7px 18px #0004;font-weight:600}.btn-primary::after{content:"↗";font-size:18px;position:absolute;right:17px;font-weight:400;opacity:.7}.btn-primary:disabled::after{display:none}.btn-primary:disabled{filter:saturate(.2) brightness(.7);box-shadow:inset 0 1px 0 #fff2}.btn-primary.state-joined{background:#313a25;color:#c6d7a4;box-shadow:inset 0 0 0 1px #8b9d5a80;filter:none}.btn-secondary{background:#252b20;border-radius:10px;color:#d0c9b1;font-size:14px;min-height:48px}
.rules{font-size:10px;line-height:17px;padding:0 5px 6px;gap:0;color:#8e9584}.rules .link{font-size:11px;min-height:30px;color:#bcad83;text-decoration:none}
.page-title{font-size:26px;line-height:36px;margin-top:2px;margin-bottom:4px}.panel{background:linear-gradient(135deg,#292d23,#1a201a);border-color:#90945e24;box-shadow:inset 0 1px 0 #fff05}.claim-hero{background:radial-gradient(ellipse at 50% 22%,#48627624,transparent 55%),linear-gradient(135deg,#252d29,#17201b);border-color:#a4d7ff25;position:relative;padding-top:6px}.claim-cat{width:180px;height:180px;margin-bottom:0;filter:drop-shadow(0 8px 20px #70b4cc18)}.claim-hero .amount{font-size:40px;line-height:50px;margin:3px 0 5px}.claim-hero .hint{padding:5px}.stats3{padding:18px 8px}.stats3 b{font-size:17px}.label{font-size:11px}.plan{background:#20251d;border-color:#717f4d30}.bar{background:#11170f}.bar i{background:linear-gradient(90deg,#ae8c48,#e6d29a)}
.wallet-main{padding:23px 20px;background:radial-gradient(ellipse at 100% 0,#90733428,transparent 70%),linear-gradient(135deg,#303426,#1d241a)}.wallet-main .amount{font-size:40px;line-height:52px;margin:8px 0}.wallet-sub{border-color:#9c9d7326;padding-top:15px;margin:18px 0}.wallet-sub b{color:#cfccb6}.network-card{width:100%;border:1px solid #747c4b38;border-radius:12px;background:#20251c;padding:14px;display:flex;align-items:center;gap:12px;text-align:left}.network-logo{font-size:30px;color:#e4c773}.network-card b{font-weight:500;font-size:13px}.network-card small{display:block;font-size:10px;line-height:17px;color:#969f8a}.chevron{margin-left:auto;color:#a1aa94}.notice{font-size:11px;border-left-color:#b9a167;background:#b9a16707;border-radius:0 8px 8px 0}.rows{background:#1e241b;border-color:#7683522c}.rows li{border-top-color:#7683522c}.empty{border-color:#7e895332;font-size:12px;background:#22281c55;padding:24px 16px}
.me-card{padding:24px 20px;gap:7px}.me-card::before{content:"X";font-size:24px;line-height:44px;width:44px;text-align:center;background:linear-gradient(135deg,#bda66b,#6b5a31);color:#191c12;border-radius:14px;margin-bottom:6px}.me-card b{font-size:20px}.identity-menu .menu-status{font-size:11px;color:#b8a879}.motion-settings{padding:0 16px}.motion-toggle{min-height:44px;min-width:56px;background:none;border:0;color:#d7c38b}.set-row{border-color:#747f5026}.sec{font-size:16px}.settings .seg{background:#141a11;border-color:#84935b30}.seg button{font-size:12px}.seg button[aria-pressed="true"]{background:#323a27}
.tabs{background:#171d15ed;border-top-color:#8b95602b;padding-bottom:env(safe-area-inset-bottom);box-shadow:0 -8px 26px #0003}.tab{max-width:120px;color:#7f8875;position:relative;gap:4px;height:68px;font-size:10px}.tab svg{width:22px;height:22px}.tab[aria-current="page"]{color:#dfc48b}.tab[aria-current="page"]::before{content:"";position:absolute;top:0;width:22px;height:2px;background:#dfc48b}.tab[aria-current="page"] svg{filter:drop-shadow(0 0 7px #d2b46750)}
.sheet{background:radial-gradient(ellipse at 50% 0,#73613d1a,transparent 55%),#1c231b;box-shadow:0 -16px 60px #0005;padding-top:9px}.sheet::before{content:"";display:block;width:32px;height:3px;margin:0 auto 14px;border-radius:3px;background:#a0a68c55}.sheet-head h2{font-size:20px}.sheet-head{margin-bottom:14px}.sheet-backdrop{backdrop-filter:blur(5px)}.sheet-body{gap:16px}.kv{background:#161d14;border-color:#7f8a5c30;margin:0}.kv div{padding:12px 14px;border-top-color:#7f8a5c25}.kv dt{font-size:12px}.kv dd{font-size:14px}.kv .total dd{font-size:20px}.input-wrap{background:#131a11;border-color:#7f8a5c44}.quote{background:#20271a;border-color:#7f8a5c30}.sheet-art{width:136px;height:136px;object-fit:contain;display:block;margin:0 auto -4px;filter:drop-shadow(0 8px 10px #0005)}.result-pills{display:flex;justify-content:center;gap:8px}.result-pills span{font-size:11px;padding:4px 10px;background:#3b493050;border-radius:20px;color:#bfd2a7}.auth-options{display:grid;gap:10px}.auth-options .btn-secondary{justify-content:space-between}.auth-options small{font-size:10px;font-weight:400;color:#a6aa94}.auth-divider{display:flex;align-items:center;gap:10px;color:#8e9980;font-size:11px}.auth-divider::before,.auth-divider::after{content:"";height:1px;background:#76835230;flex:1}.identity-icon{width:34px;height:34px;border:1px solid #ba9b6033;border-radius:10px;display:grid;place-items:center;color:#d9bd7e}.seat-detail{text-align:center;display:grid;gap:10px;justify-items:center}.seat-detail .seat-preview{width:72px;height:72px;border:1px solid #bba05e8c;border-radius:18px;display:grid;place-items:center;background:linear-gradient(135deg,#5b4d2e,#26291b);font-size:28px;color:#e4ca90}.seat-detail p{margin:0;color:#b9bea9}.sync-banner{background:#463a21;color:#ecd7a0;font-size:12px;border-radius:9px;padding:10px;display:flex;justify-content:space-between;gap:8px;align-items:center}.sync-banner button{border:1px solid #ae9257;background:#2d2e1d;border-radius:7px;padding:4px 10px;min-height:36px;white-space:nowrap;color:inherit}.sync-banner button:disabled{opacity:.6}
body[data-motion="off"] .mascot-visual,body[data-motion="off"] .seat,body[data-motion="off"] .stage-rings{animation:none!important;transition:none!important;will-change:auto}.view:not([data-view="game"])~*{animation:none}
@media(min-width:600px){.app{border-left:1px solid #747f5020;border-right:1px solid #747f5020}.top{height:70px}.tabs{max-width:480px;margin:auto}.lobby-intro{padding-top:5px}.scenes{min-height:70px}.scene{min-height:62px}}
@media(max-width:350px){.app{padding-left:12px;padding-right:12px}.top{height:56px}.lobby-intro h1{font-size:23px}.view{gap:12px;padding-top:14px}.fee{gap:5px}.fee b{font-size:14px}.fee-total b{font-size:19px}.fee .fee-total{padding-left:8px}.scene strong{font-size:21px}.mascot-caption{font-size:9px;letter-spacing:0}.network-card small{font-size:10px}.entry-panel{padding:10px}.rules{font-size:10px}.balance{font-size:12px}}
@media(prefers-reduced-motion:reduce){.mascot-visual{animation:none;will-change:auto}*{scroll-behavior:auto!important}}

/* Keep the entry action visible on the reference 390×844 viewport. */
.view{gap:10px;padding-top:12px}.lobby-intro h1{line-height:32px}.lobby-intro .eyebrow{line-height:14px}.demo-indicator{padding-top:7px;font-size:11px}.entry-panel{padding:10px;gap:8px}.fee{min-height:32px}.lobby-intro{min-height:44px}.rules{gap:0;font-size:11px;line-height:17px}.rules .link{min-height:24px;font-size:11px}.mascot-caption{font-size:11px;letter-spacing:0}.remaining{font-size:12px}.gesture-btn{font-size:11px}.scene small{font-size:12px}.fee span{font-size:11px}.fee small{font-size:11px}.tab{font-size:11px}
/* Decorative indicators must not become part of a button's accessible name. */
.btn-primary::after{content:"";width:7px;height:7px;border-top:1.5px solid currentColor;border-right:1.5px solid currentColor;transform:rotate(0);top:20px;opacity:.6}
.me-card::before{content:"";background:linear-gradient(135deg,#bda66b22,#6b5a3122),url('../assets/brand/xts-logo-temp.png') center/34px auto no-repeat;border:1px solid #bda66b33}