:root{ --red:#c8102e; --blue:#1d4f91; --ink:#0f1d33; --panel:rgba(14,24,42,.86); --safeB:env(safe-area-inset-bottom,0px); --safeT:env(safe-area-inset-top,0px); }
*{ box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html,body{ margin:0; height:100%; overflow:hidden; background:#0f1d33; font-family: -apple-system, system-ui, "Segoe UI", Roboto, sans-serif; color:#fff; touch-action:none; user-select:none; -webkit-user-select:none; }
#c{ position:fixed; inset:0; width:100%; height:100%; display:block; }
button{ font:inherit; color:inherit; cursor:pointer; border:0; }
button:focus-visible{ outline:3px solid #ffd166; outline-offset:2px; }
.hidden{ display:none !important; }
#top{ position:fixed; top:calc(6px + var(--safeT)); left:6px; right:6px; display:flex; gap:6px; align-items:center; flex-wrap:wrap; pointer-events:none; z-index:5; }
.stat{ background:var(--panel); padding:8px 11px; border-radius:12px; font-weight:700; font-size:15px; box-shadow:0 2px 8px rgba(0,0,0,.25); white-space:nowrap; }
#money{ color:#7dffa8; } #money.neg{ color:#ff7b7b; }
#speed{ margin-left:auto; display:flex; gap:4px; pointer-events:auto; }
#speed button{ width:44px; height:40px; border-radius:11px; background:var(--panel); font-size:16px; }
#speed button.on{ background:var(--red); }
#camBtns{ position:fixed; right:8px; top:calc(58px + var(--safeT)); display:flex; flex-direction:column; gap:7px; z-index:5; }
#camBtns button, #rotBtn{ width:56px; height:56px; border-radius:16px; background:var(--panel); font-size:24px; box-shadow:0 2px 8px rgba(0,0,0,.3); }
#rotBtn{ position:fixed; left:8px; top:calc(58px + var(--safeT)); display:none; align-items:center; justify-content:center; z-index:5; background:var(--blue); }
#hint{ position:fixed; left:50%; transform:translateX(-50%); top:calc(58px + var(--safeT)); background:rgba(0,0,0,.55); padding:6px 12px; border-radius:20px; font-size:13px; display:none; z-index:4; pointer-events:none; white-space:nowrap; }
#toast{ position:fixed; left:50%; top:calc(100px + var(--safeT)); transform:translate(-50%,-10px); background:#fff; color:var(--ink); padding:10px 16px; border-radius:14px; font-weight:600; font-size:15px; opacity:0; transition:all .25s; z-index:20; max-width:88vw; text-align:center; pointer-events:none; box-shadow:0 6px 20px rgba(0,0,0,.3); }
#toast.show{ opacity:1; transform:translate(-50%,0); }
#bottom{ position:fixed; left:0; right:0; bottom:0; padding:0 6px calc(6px + var(--safeB)); z-index:6; pointer-events:none; }
#tabs{ display:flex; gap:5px; overflow-x:auto; pointer-events:auto; scrollbar-width:none; }
#tabs::-webkit-scrollbar, #items::-webkit-scrollbar{ display:none; }
.tab{ flex:1 0 auto; min-width:58px; height:60px; border-radius:14px; background:var(--panel); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; padding:0 8px; box-shadow:0 2px 8px rgba(0,0,0,.3); }
.tab .ti{ font-size:22px; line-height:1; } .tab .tl{ font-size:11px; font-weight:600; opacity:.9; }
.tab.on{ background:var(--red); }
#items{ display:flex; gap:7px; overflow-x:auto; padding:6px 2px 8px; pointer-events:auto; }
.card{ flex:0 0 auto; width:104px; min-height:96px; border-radius:16px; background:rgba(255,255,255,.95); color:var(--ink); display:flex; flex-direction:column; align-items:center; justify-content:center; padding:6px; gap:2px; text-align:center; box-shadow:0 3px 10px rgba(0,0,0,.3); border:3px solid transparent; }
.card.on{ border-color:var(--red); background:#fff3f3; }
.card .ce{ font-size:30px; line-height:1.1; } .card .cn{ font-size:12.5px; font-weight:700; line-height:1.15; } .card .cc{ font-size:12px; color:#1a7f3c; font-weight:700; } .card .cs{ font-size:10.5px; color:#555; line-height:1.1; }
#panel{ position:fixed; left:8px; bottom:calc(76px + var(--safeB)); width:min(360px, calc(100vw - 16px)); background:var(--panel); border-radius:18px; padding:12px 14px; z-index:8; box-shadow:0 8px 24px rgba(0,0,0,.35); backdrop-filter:blur(6px); font-size:14px; }
body.items-open #panel{ bottom:calc(186px + var(--safeB)); }
.ph{ display:flex; align-items:center; justify-content:space-between; font-size:17px; margin-bottom:4px; }
.ph .x{ width:44px; height:44px; border-radius:12px; background:rgba(255,255,255,.12); font-size:18px; }
.sub{ opacity:.85; margin-bottom:8px; } .bad{ color:#ff8f8f; font-weight:700; }
.row{ display:flex; align-items:center; gap:8px; margin:4px 0; } .row span{ width:86px; font-size:13px; }
.bar{ flex:1; height:9px; background:rgba(255,255,255,.15); border-radius:5px; overflow:hidden; } .bar i{ display:block; height:100%; border-radius:5px; }
.th{ margin-top:8px; font-size:13px; line-height:1.5; opacity:.95; }
.grid2{ display:grid; grid-template-columns:1fr 1fr; gap:4px 10px; margin:6px 0; font-size:13px; }
.pr{ display:flex; align-items:center; gap:10px; margin:8px 0; } .pr button{ width:48px; height:44px; border-radius:12px; background:rgba(255,255,255,.15); font-size:22px; } .pr b{ min-width:64px; text-align:center; font-size:17px; }
.btns{ display:flex; gap:7px; flex-wrap:wrap; } .btns button{ min-height:48px; padding:0 14px; border-radius:12px; background:rgba(255,255,255,.15); font-weight:600; }
.btns button.big{ background:var(--red); font-size:16px; }
#confirm{ position:fixed; left:50%; transform:translateX(-50%); bottom:calc(178px + var(--safeB)); display:flex; gap:7px; z-index:9; }
#confirm button{ height:56px; min-width:56px; padding:0 16px; border-radius:16px; background:var(--panel); font-size:17px; font-weight:700; box-shadow:0 4px 14px rgba(0,0,0,.35); }
#confirm #cfBuild{ background:#1a9d4b; }
#builder{ position:fixed; left:0; right:0; bottom:0; padding:8px 6px calc(8px + var(--safeB)); background:linear-gradient(transparent, rgba(10,18,32,.85) 18%); z-index:7; }
#bInfo{ text-align:center; font-size:13.5px; margin:0 0 6px; text-shadow:0 1px 3px #000; }
.brow{ display:flex; gap:5px; margin-top:5px; }
.brow button{ flex:1; min-width:0; height:58px; border-radius:14px; background:var(--panel); font-size:20px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px; box-shadow:0 2px 8px rgba(0,0,0,.3); }
.brow button span{ font-size:11px; font-weight:600; }
.brow button.dis{ opacity:.35; } .brow button.on{ background:#b7791f; } .brow button.go{ background:#1a9d4b; }
#fx{ position:fixed; inset:0; pointer-events:none; z-index:3; overflow:hidden; }
.bubble{ position:absolute; left:0; top:0; background:#fff; color:#222; font-size:12.5px; padding:6px 10px; border-radius:14px; max-width:170px; box-shadow:0 3px 10px rgba(0,0,0,.25); font-weight:600; }
.bubble::after{ content:""; position:absolute; left:50%; bottom:-6px; border:6px solid transparent; border-top-color:#fff; border-bottom:0; transform:translateX(-50%); }
.money{ position:absolute; left:0; top:0; color:#7dffa8; font-weight:800; font-size:14px; text-shadow:0 1px 3px rgba(0,0,0,.8); }
#povbar{ position:fixed; left:0; right:0; bottom:calc(14px + var(--safeB)); display:none; flex-direction:column; align-items:center; gap:6px; z-index:30; }
#povbar button{ height:64px; padding:0 28px; border-radius:32px; background:var(--red); font-size:20px; font-weight:800; box-shadow:0 6px 20px rgba(0,0,0,.45); }
#povbar span{ font-size:12px; opacity:.8; text-shadow:0 1px 3px #000; }
body.pov #povbar{ display:flex; } body.pov #hud, body.pov #fx{ display:none; }
#start{ position:fixed; inset:0; z-index:50; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px; background:radial-gradient(ellipse at center, rgba(15,29,51,.35), rgba(15,29,51,.85)); text-align:center; padding:24px; transition:opacity .4s; cursor:pointer; }
#start.gone{ opacity:0; pointer-events:none; }
.logo{ background:var(--red); border:5px solid #fff; outline:5px solid var(--blue); padding:14px 26px; border-radius:10px; box-shadow:0 10px 40px rgba(0,0,0,.5); }
.logo .l1{ font-family:Georgia, serif; font-size:clamp(28px,7vw,54px); font-weight:900; letter-spacing:2px; } .logo .l2{ font-family:Georgia, serif; font-size:clamp(20px,5vw,36px); letter-spacing:10px; color:#ffd166; font-weight:800; }
#start p{ max-width:420px; font-size:16px; line-height:1.4; text-shadow:0 1px 4px #000; margin:0; }
#start .go{ height:60px; padding:0 34px; border-radius:30px; background:#fff; color:var(--red); font-size:20px; font-weight:800; box-shadow:0 6px 20px rgba(0,0,0,.4); }
@media (min-width: 900px){ .stat{ font-size:16px; } #bottom{ left:50%; transform:translateX(-50%); width:min(980px, 96vw); } #builder .brow{ max-width:900px; margin-left:auto; margin-right:auto; } #panel{ left:12px; bottom:auto; top:70px; } }
@media (max-height: 500px){ body.items-open #camBtns{ display:none; } #camBtns{ top:auto; bottom:calc(80px + var(--safeB)); flex-direction:row; right:8px; } #camBtns button{ width:50px; height:50px; } .card{ min-height:80px; } .tab{ height:54px; } #panel{ bottom:auto; top:58px; max-height:calc(100vh - 140px); overflow:auto; } .brow button{ height:50px; } #confirm{ bottom:calc(150px + var(--safeB)); } }

@media (max-width: 600px){ #camBtns{ top:calc(108px + var(--safeT)); } #rotBtn, #hint{ top:calc(108px + var(--safeT)); } #toast{ top:calc(150px + var(--safeT)); } .stat{ font-size:14px; padding:8px 9px; } }