/* The game's one look (2026-11-04, user: 게임의 전체적인 톤앤매너를 맞춰 주는 작업). The opening and the world set it: the cosmos — deep indigo glass, gold for what matters, teal for the experimental planet, CreaturePixel type, soft round edges. This carries it into the stage's HUD and cards, the bag, the pause, the toast, the touch controls and the lab. Loaded last, and scoped to the game's area (#game-viewport) so it also outranks the styles the scripts inject; it changes how things look, not where they are. */ :root{ --t-ink:#efe9f6;--t-muted:#aaa3c4;--t-dim:#7d7698;--t-gold:#ffe2a4;--t-gold-deep:#eeb65c;--t-teal:#8ff0e6;--t-coral:#ff9b86; --t-line:rgba(255,255,255,.12);--t-edge:rgba(255,226,170,.26);--t-chip:rgba(255,255,255,.05); --t-glass:linear-gradient(165deg,rgba(170,150,255,.16) 0%,rgba(52,40,104,.34) 32%,rgba(14,10,34,.76) 72%,rgba(8,6,22,.88) 100%); --t-shadow:0 22px 60px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.2),inset 0 0 50px rgba(150,120,255,.1); --t-gold-fill:linear-gradient(180deg,#fff0c4,#f0bb62 60%,#d9963e); } /* ---- glass: every panel and card ---- */ #game-viewport .quest,#game-viewport .bottom-hud,#game-viewport .pause-panel,#game-viewport #toast,#game-viewport .arena-card,#game-viewport .arena-bag, #game-viewport .arena-panel,#game-viewport .swap-prompt,#game-viewport .dna-card,#game-viewport .chapter-card,#game-viewport .interact,#game-viewport .lab-layout{ background:var(--t-glass)!important;backdrop-filter:blur(12px) saturate(140%);-webkit-backdrop-filter:blur(12px) saturate(140%); border:1px solid var(--t-edge)!important;border-radius:18px!important;box-shadow:var(--t-shadow)!important;color:var(--t-ink)} #game-viewport .quest{border-left:1px solid var(--t-edge)!important} #game-viewport .quest .eyebrow,#game-viewport .eyebrow{color:var(--t-muted);letter-spacing:.28em} #game-viewport .quest h2,#game-viewport .pause-panel h2,#game-viewport .arena-card h2,#game-viewport .arena-bag h2,#game-viewport .laboratory h1{color:var(--t-gold);text-shadow:0 0 16px rgba(255,190,100,.35)} #game-viewport .quest p,#game-viewport .pause-panel p,#game-viewport .arena-card p{color:#d8d0ea} #game-viewport .quest .senses{border-top:1px solid var(--t-line)!important} #game-viewport #modal{background:rgba(6,4,18,.62)!important;backdrop-filter:blur(4px)} #game-viewport #toast{border-radius:999px!important;padding:10px 24px} /* ---- buttons: gold pills for the way forward, glass for the rest ---- */ #game-viewport .button,#game-viewport .arena-card button,#game-viewport .arena-bag button,#game-viewport .arena-panel button,#game-viewport .journey-awaken .reroll{ border-radius:999px!important;border:1px solid rgba(255,255,255,.16)!important;background:rgba(255,255,255,.06)!important;color:var(--t-ink)!important; box-shadow:inset 0 1px 0 rgba(255,255,255,.14)!important;transition:background .2s,box-shadow .2s,filter .2s} #game-viewport .button:hover:not(:disabled),#game-viewport .arena-card button:hover,#game-viewport .arena-bag button:hover:not(:disabled){background:rgba(255,255,255,.12)!important;transform:none} #game-viewport .button:not(.secondary):not(.ghost),#game-viewport .arena-card button.primary,#game-viewport .arena-bag button.primary{ background:var(--t-gold-fill)!important;border-color:transparent!important;color:#24170a!important;box-shadow:0 0 22px rgba(255,190,100,.35),inset 0 1px 0 rgba(255,255,255,.7)!important} #game-viewport .button:not(.secondary):not(.ghost):hover:not(:disabled),#game-viewport .arena-card button.primary:hover{filter:brightness(1.06);background:var(--t-gold-fill)!important} #game-viewport .button.ghost{background:transparent!important} #game-viewport .arena-bag button:disabled{opacity:.38} #game-viewport .icon-button{border-radius:50%!important;background:rgba(14,10,34,.5)!important;border:1px solid rgba(255,255,255,.16)!important;color:var(--t-ink)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.14)!important;backdrop-filter:blur(6px)} #game-viewport .icon-button:hover{background:rgba(60,46,110,.6)!important} #game-viewport .brand-mark{border-radius:50%!important;border-color:rgba(255,226,170,.5)!important;color:var(--t-gold)!important;background:rgba(14,10,34,.5)} #game-viewport .wordmark small{color:var(--t-muted)} /* ---- life and stamina ---- */ #game-viewport .meter label{color:var(--t-muted)}#game-viewport .meter label span{color:var(--t-ink)} #game-viewport .meter .track{height:10px!important;border:1px solid rgba(255,255,255,.14)!important;background:rgba(255,255,255,.07)!important;border-radius:999px!important} #game-viewport .meter .track::after{display:none} #game-viewport .meter .fill{border-radius:999px;box-shadow:0 0 10px rgba(255,255,255,.18)!important;background:linear-gradient(90deg,#4fc7bb,#8ff0e6)!important} #game-viewport .meter.hp .fill{background:linear-gradient(90deg,#e8615a,#ffb38a)!important} #game-viewport .identity strong{color:var(--t-gold)} /* ---- the energy, the awakening ---- */ #game-viewport .journey-bar .gauge{background:rgba(14,10,34,.62);border:1px solid var(--t-edge);border-radius:999px;backdrop-filter:blur(8px);color:var(--t-ink)} #game-viewport .journey-bar .gauge i{background:rgba(255,255,255,.08);border-radius:999px} #game-viewport .journey-bar .gauge b{background:linear-gradient(90deg,#f0bb62,#ffe2a4 55%,#8ff0e6);border-radius:999px;box-shadow:0 0 10px rgba(255,210,140,.5)} #game-viewport .journey-bar .chip{background:rgba(14,10,34,.62);border:1px solid rgba(255,255,255,.14);color:#d8d0ea;backdrop-filter:blur(6px)} #game-viewport .journey-bar .chip.full{border-color:var(--t-gold);color:var(--t-gold)} #game-viewport .journey-bar .chip.evo{background:rgba(80,50,130,.6);border-color:#c99cff;color:#ecdcff} #game-viewport .journey-awaken{background:radial-gradient(ellipse at 50% 40%,rgba(52,40,104,.55),rgba(5,4,14,.88) 70%)!important;font-family:CreaturePixel,system-korean,monospace} #game-viewport .journey-awaken h2{color:var(--t-gold);text-shadow:0 0 18px rgba(255,190,100,.45)}#game-viewport .journey-awaken .eyebrow{color:var(--t-gold)} #game-viewport .jcard{background:var(--t-glass);border:1px solid rgba(255,255,255,.16);border-radius:18px;box-shadow:var(--t-shadow);font-family:inherit} #game-viewport .jcard:hover,#game-viewport .jcard:focus-visible{border-color:var(--t-gold);box-shadow:var(--t-shadow),0 0 26px rgba(255,190,100,.3)} #game-viewport .jcard strong{color:var(--t-gold)}#game-viewport .jcard .tag{color:var(--t-teal)}#game-viewport .jcard kbd{border-color:rgba(255,255,255,.2);border-radius:6px} #game-viewport .jcard.evo{border-color:#c99cff;background:linear-gradient(165deg,rgba(201,156,255,.22),rgba(40,20,70,.85))} /* ---- parts and the bag ---- */ #game-viewport .arena-card,#game-viewport .arena-bag,#game-viewport .arena-panel{font-family:CreaturePixel,system-korean,monospace} #game-viewport .arena-part{background:rgba(255,255,255,.04)!important;border:1px solid var(--t-line)!important;border-radius:14px!important} #game-viewport .arena-part h3{color:var(--t-ink)}#game-viewport .arena-part output{color:var(--t-gold)} #game-viewport .arena-part .bar{background:linear-gradient(90deg,rgba(255,140,120,.25),rgba(255,255,255,.12) 50%,rgba(143,240,230,.3))!important;border-radius:999px} #game-viewport .arena-part .bar i{background:#fff6e0;box-shadow:0 0 6px rgba(255,226,170,.7)} #game-viewport .arena-part.variant{border-color:var(--t-gold)!important;box-shadow:0 0 18px rgba(255,210,140,.35)} #game-viewport .arena-bag .worn .arena-part{border-color:var(--t-gold)!important;box-shadow:0 0 0 1px var(--t-gold)} #game-viewport .arena-bag .dust,#game-viewport .arena-got{color:var(--t-gold)!important} #game-viewport .arena-bag section h3{color:var(--t-gold)}#game-viewport .arena-note{color:var(--t-muted)!important} /* ---- touch controls ---- */ #game-viewport .touch button,#game-viewport .move-stick{border-radius:50%!important;background:rgba(14,10,34,.5)!important;border:1px solid rgba(255,255,255,.2)!important;color:var(--t-ink)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.15),0 6px 18px rgba(0,0,0,.35)!important;backdrop-filter:blur(6px)} #game-viewport .touch .touch-attack{border-color:rgba(255,226,170,.6)!important;color:var(--t-gold)!important} #game-viewport .stick-knob{border-radius:50%!important;background:rgba(255,226,170,.35)!important;border-color:rgba(255,226,170,.6)!important} /* ---- the lab, inside the experimental planet: teal ---- */ #game-viewport #screen[data-state=lab]{background:radial-gradient(ellipse at 30% 25%,rgba(40,100,110,.5),rgba(10,10,28,.86) 65%,rgba(5,4,14,.95))} #game-viewport .laboratory .eyebrow{color:var(--t-teal)} #game-viewport .lab-layout{border-color:rgba(140,240,230,.3)!important} #game-viewport .specimen-stage{border:1px solid rgba(140,240,230,.25)!important;border-radius:16px!important;background:radial-gradient(ellipse at 50% 35%,#2f6466,#122a33 60%,#060b14)!important;background-image:radial-gradient(ellipse at 50% 35%,#2f6466,#122a33 60%,#060b14)!important} #game-viewport .slot-button,#game-viewport .part-choice{border-radius:12px!important;background:rgba(255,255,255,.05)!important;border:1px solid rgba(255,255,255,.14)!important;box-shadow:none!important;color:var(--t-ink)!important} #game-viewport .slot-button:hover,#game-viewport .part-choice:hover{background:rgba(143,240,230,.1)!important;border-color:rgba(143,240,230,.45)!important} #game-viewport .slot-button .slot-label{color:var(--t-muted)}#game-viewport .slot-button svg{color:var(--t-teal)} #game-viewport .part-choice[aria-pressed="true"]{border-color:var(--t-teal)!important;background:rgba(143,240,230,.14)!important} #game-viewport .pose-tabs button,#game-viewport .preset-row button{border-radius:999px!important;background:rgba(255,255,255,.05)!important;border:1px solid rgba(255,255,255,.14)!important;box-shadow:none!important;color:var(--t-ink)!important} #game-viewport .pose-tabs button[aria-selected=true]{background:linear-gradient(180deg,#e8fffb,#8ff0e6 70%,#5cc3b9)!important;color:#08201e!important;border-color:transparent!important} #game-viewport .lab-stats{color:var(--t-ink)} /* the awakening's cards stand over the fight: nearly solid, so nothing behind shows through */ #game-viewport .jcard{background:linear-gradient(165deg,rgba(66,50,128,.95),rgba(16,12,38,.97))} #game-viewport .jcard.evo{background:linear-gradient(165deg,rgba(110,70,170,.95),rgba(30,16,56,.97))} #game-viewport .pose-tabs{border:0!important;box-shadow:none!important;background:transparent!important;gap:6px} /* ---- touch: a word under each button; the dodge (its cooldown sweeping off, dim without breath) and the DNA bag; in landscape the right hand's four in a square — dodge over bite, bag over jump; sizes 작게·보통·크게 (2026-11-05) ---- */ #game-viewport .touch .touch-actions button{position:relative;display:flex!important;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:0} #game-viewport .touch .touch-label{font-size:10px;line-height:1;opacity:.85;pointer-events:none;white-space:nowrap} #game-viewport .touch .touch-dodge{border-color:rgba(143,240,230,.6)!important;color:var(--t-teal)!important} #game-viewport .touch .touch-dodge::after{content:'';position:absolute;inset:0;border-radius:50%;pointer-events:none;background:conic-gradient(rgba(5,4,14,.7) 0 calc(var(--cool,0) * 1turn),transparent 0)} #game-viewport .touch .touch-dodge.tired{opacity:.45} /* the right hand (2026-11-05, user: all under the right thumb — jump left, the bite in the middle and biggest, the dodge right, along the bottom; the parts' abilities over them, lit where the part has one; the bag up top. 2026-11-06, user: round the right thumb, as other games do: the bite big in the corner, jump and dodge on the arc nearest it, the six abilities evenly on the arc beyond, each the same reach from the thumb) */ .mobile-landscape #game-viewport .touch .touch-actions{display:block;position:relative;width:240px;height:240px;transform:scale(calc(var(--tsize,1) * var(--tshort,1)));transform-origin:100% 100%} .mobile-landscape #game-viewport .touch .touch-actions>button{position:absolute;margin:0} .mobile-landscape #game-viewport .touch .touch-actions>.touch-attack{left:142px;top:148px;width:92px;height:92px} .mobile-landscape #game-viewport .touch .touch-actions>.touch-flight{left:64.1px;top:142.5px;width:64px;height:64px} .mobile-landscape #game-viewport .touch .touch-actions>.touch-dodge{left:136.5px;top:70.1px;width:64px;height:64px} #game-viewport .touch .touch-actions .skill-bar.ring{position:absolute;inset:0;transform:none;display:block;pointer-events:none} #game-viewport .touch .touch-actions .skill-bar.ring .skill{position:absolute;width:42px;height:42px;padding:0;gap:0;border-radius:50%;display:flex!important} #game-viewport .touch .touch-actions .skill-bar.ring .skill kbd{display:none} #game-viewport .touch .touch-actions .skill-bar.ring .skill small{font-size:8px;line-height:1}#game-viewport .touch .touch-actions .skill-bar.ring .skill b{font-size:9px;line-height:1.05;max-width:42px} #game-viewport .touch .touch-actions .skill-bar.ring .skill.none{opacity:.25} #game-viewport .touch .touch-actions .skill-bar.ring [data-slot=teeth]{left:7.0px;top:173.0px}#game-viewport .touch .touch-actions .skill-bar.ring [data-slot=head]{left:14.8px;top:123.6px}#game-viewport .touch .touch-actions .skill-bar.ring [data-slot=body]{left:37.6px;top:79.0px}#game-viewport .touch .touch-actions .skill-bar.ring [data-slot=legs]{left:73.0px;top:43.6px}#game-viewport .touch .touch-actions .skill-bar.ring [data-slot=tail]{left:117.6px;top:20.8px}#game-viewport .touch .touch-actions .skill-bar.ring [data-slot=wings]{left:167.0px;top:13.0px} #game-viewport .touch .touch-actions .skill-bar.ring .skill{background:rgba(14,10,34,.5)} #game-viewport .touch .touch-actions .skill-bar.ring .skill.none b{display:none} #game-viewport .hud-bag{display:none} .mobile-landscape #game-viewport .hud-bag{display:flex;position:absolute;right:max(14px,env(safe-area-inset-right));top:calc(max(8px,env(safe-area-inset-top)) + 52px);z-index:32;width:54px;height:54px;border-radius:50%!important;flex-direction:column;align-items:center;justify-content:center;gap:1px;padding:0;background:rgba(14,10,34,.5);border:1px solid rgba(255,255,255,.2);color:var(--t-ink);box-shadow:0 6px 18px rgba(0,0,0,.35);touch-action:none} .mobile-landscape #game-viewport .hud-bag svg{width:18px;height:18px}.mobile-landscape #game-viewport .hud-bag .touch-label{font-size:9px;line-height:1} body[data-touch-size=s]{--tsize:.82}body[data-touch-size=l]{--tsize:1.18} #game-viewport .touch-actions{transform:scale(var(--tsize,1));transform-origin:100% 100%} body[data-touch-size=s] #game-viewport .move-stick{transform:scale(.82);transform-origin:0 100%} body[data-touch-size=l] #game-viewport .move-stick{transform:scale(1.18);transform-origin:0 100%} @container (max-height:340px){.mobile-landscape #game-viewport .touch .touch-actions{--tshort:.86}} .touch-size{display:flex;gap:6px;align-items:center;justify-content:center;margin:4px 0 8px;font-size:13px} .touch-size span{color:var(--t-muted);margin-right:4px} .pause-panel .touch-size button{font:inherit;width:auto;min-height:0;padding:6px 14px;border-radius:999px;border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.06);color:var(--t-ink);cursor:pointer} .pause-panel .touch-size button[aria-pressed=true]{background:var(--t-teal);color:#08201e;border-color:transparent} #fullscreen.on{border-color:var(--t-teal)!important;color:var(--t-teal)!important} /* ---- the field's HUD (2026-11-06, user: life, stamina, energy and the help are not seen at a glance. Life and stamina across the top, left and right, with their numbers; energy long along the bottom; the help in the middle of the black under the floor.) The old bottom panel and the name, colours and logo are gone. ---- */ body:has(.field-hud) .wordmark{visibility:hidden} body:has(.field-hud) .topbar{background:none!important;box-shadow:none!important;border:0!important;backdrop-filter:none!important;pointer-events:none} body:has(.field-hud) .topbar button{pointer-events:auto} #game-viewport .field-hud{--hud-height:0px!important;z-index:30} #game-viewport .field-hud .bottom-hud{position:absolute;left:12px;right:152px;top:12px;bottom:auto;width:auto;height:auto;min-height:0;display:grid;grid-template-columns:1fr 1fr;gap:20px;padding:7px 14px;background:rgba(9,7,22,.86)!important;border:1px solid rgba(255,255,255,.2)!important;border-radius:12px!important;box-shadow:none!important;backdrop-filter:none!important} #game-viewport .field-hud .identity,#game-viewport .field-hud .state-info{display:none!important} #game-viewport .field-hud .meter{display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-rows:20px;align-items:center;gap:10px;margin:0;line-height:1} #game-viewport .field-hud .meter label{display:contents;white-space:nowrap;font-size:14px;font-weight:700;color:#fff} #game-viewport .field-hud .meter-reading{grid-column:3;grid-row:1;display:grid;text-align:right;font-size:14px;font-weight:700;color:#fff;font-variant-numeric:tabular-nums;white-space:nowrap} #game-viewport .field-hud .meter-reading::before{content:attr(data-reserve);visibility:hidden;grid-area:1/1} #game-viewport .field-hud .meter-reading>span{grid-area:1/1} #game-viewport .field-hud .meter .track{grid-column:2;grid-row:1;height:16px!important;background:rgba(255,255,255,.13)!important;border:0!important} #game-viewport .field-hud .meter.hp .fill{background:linear-gradient(90deg,#e8453f,#ff8c6b)!important;box-shadow:none!important} #game-viewport .field-hud .meter.stamina .fill{background:linear-gradient(90deg,#27b5a8,#7cf0e0)!important;box-shadow:none!important} #game-viewport .field-hud .low-life .fill{animation:hud-low .7s ease-in-out infinite alternate} @keyframes hud-low{from{filter:brightness(1)}to{filter:brightness(1.7)}} #game-viewport:has(.field-hud) .journey-bar{left:12px;right:12px;top:auto;bottom:8px;transform:none;width:auto;z-index:31} #game-viewport:has(.field-hud) .journey-bar .gauge{grid-template-columns:auto 1fr auto;gap:10px;height:22px;line-height:1;padding:0 14px;background:rgba(9,7,22,.86)!important;border:1px solid rgba(255,255,255,.2)!important;border-radius:11px!important;backdrop-filter:none!important;font-size:13px;font-weight:700;color:#fff} #game-viewport:has(.field-hud) .journey-bar .gauge span:last-child{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap} #game-viewport:has(.field-hud) .journey-bar .gauge i{height:10px;background:rgba(255,255,255,.13)!important} #game-viewport:has(.field-hud) .journey-bar .gauge b{background:linear-gradient(90deg,#f0a93c,#ffe08a)!important;box-shadow:none!important} #game-viewport:has(.field-hud) .journey-bar .chips{position:absolute;left:0;bottom:calc(100% + 6px);width:330px;justify-content:flex-start;margin:0} #game-viewport:has(.field-hud) .skill-bar:not(.ring){bottom:38px} #game-viewport .field-hud .quest{left:50%;top:auto;bottom:100px;transform:translateX(-50%);width:min(600px,calc(100cqw - 40px));max-width:none;padding:6px 16px 7px;text-align:center;background:rgba(9,7,22,.6)!important;border:1px solid rgba(255,255,255,.12)!important;border-radius:10px!important;box-shadow:none!important;backdrop-filter:none!important} #game-viewport .field-hud .quest .eyebrow{display:inline;margin:0 6px 0 0;font-size:11px;letter-spacing:.04em;color:#b9b0d0} #game-viewport .field-hud .quest h2{display:inline;margin:0;font-size:12px;font-weight:600;color:#b9b0d0;text-shadow:none} #game-viewport .field-hud .quest #objective{margin:2px 0 0;font-size:16px;line-height:1.3;font-weight:700;color:#ffe9b0} #game-viewport .field-hud .quest .senses{display:flex;justify-content:center;flex-wrap:wrap;gap:4px 14px;margin-top:4px;padding-top:4px} #game-viewport .field-hud .quest .sense-row{width:auto;padding:1px 6px;min-height:0;font-size:12px} #game-viewport .field-hud .quest .sense-row[hidden]{display:none} #game-viewport .field-hud .story-caption{position:absolute;left:50%;top:60px;bottom:auto;transform:translateX(-50%);width:max-content;max-width:70cqw;font-size:17px;text-shadow:0 1px 3px #000,0 0 8px #000} .mobile-landscape #game-viewport .field-hud .bottom-hud{left:10px;right:170px;top:6px;gap:12px;padding:3px 10px} .mobile-landscape #game-viewport .field-hud .meter{grid-template-rows:15px;gap:6px} .mobile-landscape #game-viewport .field-hud .meter label,.mobile-landscape #game-viewport .field-hud .meter label span{font-size:10px} .mobile-landscape #game-viewport .field-hud .meter .track{height:10px!important} .mobile-landscape #game-viewport:has(.field-hud) .journey-bar{left:10px;right:10px;bottom:3px} .mobile-landscape #game-viewport:has(.field-hud) .journey-bar .gauge{gap:6px;height:15px;padding:0 10px;font-size:9px} .mobile-landscape #game-viewport:has(.field-hud) .journey-bar .gauge i{height:6px} .mobile-landscape #game-viewport:has(.field-hud) .journey-bar .chips{display:none} .mobile-landscape #game-viewport .field-hud .quest{left:140px;transform:none;bottom:24px;width:calc(100cqw - 454px);padding:2px 8px 3px} .mobile-landscape #game-viewport .field-hud .quest .eyebrow,.mobile-landscape #game-viewport .field-hud .quest h2{font-size:9px} .mobile-landscape #game-viewport .field-hud .quest #objective{font-size:11px;margin-top:0} .mobile-landscape #game-viewport .field-hud .quest .senses{margin-top:1px;padding-top:1px;gap:0 6px} .mobile-landscape #game-viewport .field-hud .quest .sense-row{font-size:10px} .mobile-landscape #game-viewport .field-hud .story-caption{top:30px;font-size:12px} /* the bag's buttons to each part (the game's button look would hide which one is lit) */ #game-viewport .arena-bag .bag-jump button{border-radius:8px!important;background:rgba(255,255,255,.07)!important;border:1px solid rgba(255,255,255,.2)!important;color:#e6e0f4!important;box-shadow:none!important} #game-viewport .arena-bag .bag-jump button small{color:#9fe0d0!important} #game-viewport .arena-bag .bag-jump button.mine{border-color:#ffd27a!important;color:#ffd27a!important} #game-viewport .arena-bag .bag-jump button.on{background:#9fe0d0!important;border-color:#9fe0d0!important;color:#0d1312!important;font-weight:700} #game-viewport .arena-bag .bag-jump button.on small{color:#0d1312!important} .mobile-landscape #game-viewport .arena-bag .bag-jump{grid-template-columns:repeat(4,1fr);gap:2px;margin-top:4px} .mobile-landscape #game-viewport .arena-bag .bag-jump button{min-height:22px;padding:2px 0;font-size:10px} .mobile-landscape #game-viewport .arena-bag .bag-jump button small{font-size:8px;margin-left:1px} .mobile-landscape #game-viewport .arena-bag .bag-look{padding:4px 6px;gap:2px} .mobile-landscape #game-viewport .arena-bag .bag-look strong{font-size:12px} .mobile-landscape #game-viewport .arena-bag .bag-look p{margin:1px 0;font-size:10px;line-height:1.2} /* a long ability's name, shortened on the small round buttons */ #game-viewport .skill-bar .skill .short{display:none} #game-viewport .touch .touch-actions .skill-bar.ring .skill .full{display:none}#game-viewport .touch .touch-actions .skill-bar.ring .skill .short{display:inline} /* the parts screen (2026-11-06) */ #game-viewport .arena-bag .bag-filter button{border-radius:999px!important;background:rgba(255,255,255,.07)!important;border:1px solid rgba(255,255,255,.2)!important;color:#e6e0f4!important;box-shadow:none!important} #game-viewport .arena-bag .bag-filter button.on{background:#9fe0d0!important;border-color:#9fe0d0!important;color:#0d1312!important} #game-viewport .arena-bag .bag-actions button.danger{background:#7a2e27!important;border-color:#ff9a8a!important;color:#ffe2dc!important} #game-viewport .arena-bag .bag-sum{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.14)} .mobile-landscape #game-viewport .arena-bag{max-width:none} .mobile-landscape #game-viewport .arena-bag .bag-body{grid-template-columns:230px 1fr} .mobile-landscape #game-viewport .arena-bag .bag-sum{margin-top:4px;padding:4px 6px}.mobile-landscape #game-viewport .arena-bag .bag-sum h4{font-size:10px;margin-bottom:2px} .mobile-landscape #game-viewport .arena-bag .bag-sum-rows{font-size:9px;gap:0 8px}.mobile-landscape #game-viewport .arena-bag .bag-sum-skills{font-size:9px;margin-top:2px} #game-viewport .lab-growth{width:min(600px,calc(100cqw - 24px));max-height:calc(100cqh - 24px);display:flex;flex-direction:column;overflow:hidden;padding:clamp(10px,2.5cqh,24px)} .lab-growth h2{margin:0 0 5px;text-align:left} .lab-growth p{font-size:13px;line-height:1.4} #game-viewport .lab-growth .growth-dust{margin:10px 0 8px;color:var(--t-gold);font-weight:700} .lab-growth .growth-list{margin:0;padding:0;list-style:none;display:grid;gap:6px;min-height:0;overflow-y:auto;overscroll-behavior:contain;touch-action:pan-y} .lab-growth li{display:grid;grid-template-columns:1fr auto;align-items:center;gap:8px 16px;padding:8px 10px;border:1px solid rgba(150,230,216,.24);background:rgba(120,220,207,.07);border-radius:7px} .lab-growth .growth-name{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 8px} .lab-growth .growth-level{font-size:11px;color:#c3bbd6;font-variant-numeric:tabular-nums} #game-viewport .lab-growth .growth-effect{color:var(--t-teal);font-weight:600} .lab-growth .growth-notice{min-height:1.4em;margin-top:6px} #game-viewport .lab-growth button{flex:none;min-height:36px;margin:0;padding:6px 10px} #game-viewport .lab-growth .growth-buy{width:auto;white-space:nowrap} #game-viewport .mission-journal{width:min(520px,calc(100cqw - 24px));max-height:calc(100cqh - 24px);padding:clamp(12px,2.7cqh,25px);display:flex;flex-direction:column;overflow:hidden} .mission-journal h2{margin:0 0 4px;text-align:left} .mission-journal p{font-size:12px;line-height:1.45} .mission-list{list-style:none;display:grid;gap:6px;min-height:0;overflow-y:auto;overscroll-behavior:contain;touch-action:pan-y;padding:0;margin:9px 0} .mission-list li{padding:7px 10px;background:rgba(120,220,207,.07);border:1px solid var(--t-edge);border-radius:7px} .mission-heading{display:flex;justify-content:space-between;align-items:baseline;gap:8px} .mission-heading span{font-size:11px;color:var(--t-teal);white-space:nowrap} .mission-list [data-done=true] .mission-heading span,#game-viewport .mission-list .mission-reward{color:var(--t-gold)} .mission-journal .button{flex:none;margin-top:0;min-height:36px;padding:6px 10px} .spawn-profile{display:flex;align-items:center;gap:10px;margin-top:8px;font-size:12px} .spawn-profile select,.spawn-list input{font:inherit;color:var(--t-ink);background:#24203e;border:1px solid var(--t-edge);padding:5px 8px} .spawn-list li{display:grid;grid-template-columns:minmax(0,1fr) 58px 56px;align-items:center;gap:10px;font-size:13px} .spawn-list input{width:100%;min-width:0} .spawn-list output{text-align:right;color:var(--t-teal);font-variant-numeric:tabular-nums}