/* Squad Pop styles: chunky military-cartoon panels, thick ink outlines, yellow buttons. Everything fits the screen, nothing scrolls. */
:root {
  --ink: #1c1a17; --paper: #fff8e6; --olive: #6b7a3a; --olive-d: #46521f; --panel: rgba(32, 36, 24, .9); --panel2: #2d3320; --sand: #e9d6a3;
  --yellow: #ffd23f; --red: #e2463b; --teal: #23b5a8; --sky: #8fd3ff; --shadow: 0 4px 0 rgba(0,0,0,.35);
  --font-d: 'Lilita One', 'Arial Black', sans-serif; --font-b: 'Nunito', system-ui, sans-serif;
  --c-common: #c9d1c3; --c-rare: #59b8ff; --c-epic: #c46bff; --c-legendary: #ffc53d;
  --top: calc(54px + env(safe-area-inset-top));
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #2a2f22; color: var(--paper); font-family: var(--font-b); user-select: none; -webkit-user-select: none; touch-action: manipulation; }
#view { position: fixed; inset: 0; }
#view canvas { display: block; width: 100%; height: 100%; }
.layer { position: fixed; inset: 0; pointer-events: none; }
.layer > * { pointer-events: auto; }
.hidden { display: none !important; }
h2, h3 { font-family: var(--font-d); font-weight: 400; margin: 0; letter-spacing: .3px; }
.sub { opacity: .8; font-weight: 800; font-size: 13px; margin: 4px 0; }
.center { text-align: center; }
.good { color: #7fe07a; font-weight: 900; } .bad { color: #ff8a7a; font-weight: 900; }
a { color: var(--yellow); }
img.cur { width: 1.15em; height: 1.15em; vertical-align: -0.22em; margin-right: 2px; object-fit: contain; }

/* buttons */
.btn { font: 400 20px/1.05 var(--font-d); letter-spacing: .4px; color: var(--ink); background: var(--yellow); border: 3px solid var(--ink); border-radius: 14px;
  padding: 10px 18px; box-shadow: var(--shadow); cursor: pointer; transition: transform .08s, filter .15s; white-space: nowrap; }
.btn:hover { filter: brightness(1.08); transform: translateY(-1px); }
.btn:active { transform: translateY(2px); box-shadow: 0 2px 0 rgba(0,0,0,.35); }
.btn[disabled] { filter: grayscale(1) brightness(.7); cursor: default; transform: none; }
.btn.alt { background: var(--paper); }
.btn.red { background: var(--red); color: #fff; }
.btn.big { font-size: 30px; padding: 14px 40px; }
.btn.pulse { animation: pulse .7s ease-in-out infinite alternate; background: #ff9a3a; }
@keyframes pulse { to { transform: scale(1.06); filter: brightness(1.15); } }
.row { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; align-items: center; margin-top: 10px; }
.ndot { position: absolute; top: -5px; right: -5px; width: 14px; height: 14px; border-radius: 50%; background: var(--red); border: 2px solid var(--ink); }

/* rarity frames */
.r-common { --rc: var(--c-common); } .r-rare { --rc: var(--c-rare); } .r-epic { --rc: var(--c-epic); } .r-legendary { --rc: var(--c-legendary); }

/* loading + busy */
#loading { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 14px; background: radial-gradient(#3a4228, #1f2418); z-index: 50; }
#loading img { width: min(420px, 70vw); filter: drop-shadow(0 6px 0 rgba(0,0,0,.4)); }
#loading .meter { width: 240px; height: 14px; border: 3px solid var(--ink); border-radius: 8px; background: #000; overflow: hidden; }
#loading .meter i { display: block; height: 100%; width: 0; background: var(--yellow); transition: width .2s; }
#loading small { font-weight: 800; }
#busy { position: fixed; inset: 0; z-index: 45; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 12px; background: rgba(20,22,14,.75); font: 400 26px var(--font-d); }
.spin { width: 54px; height: 54px; border: 7px solid var(--paper); border-top-color: var(--yellow); border-radius: 50%; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* title */
#title { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; background: radial-gradient(ellipse at center, rgba(0,0,0,0) 30%, rgba(0,0,0,.5) 100%); padding: 16px; text-align: center; }
#title .logo { width: min(560px, 80vw); max-height: 30vh; object-fit: contain; filter: drop-shadow(0 8px 0 rgba(0,0,0,.35)); animation: bob 2.4s ease-in-out infinite; }
#title .lineup { width: min(760px, 94vw); max-height: 26vh; object-fit: contain; filter: drop-shadow(0 6px 0 rgba(0,0,0,.3)); }
#title .tag { font: 800 17px var(--font-b); text-shadow: 0 2px 0 #000; max-width: 560px; }
#title .by { font-weight: 800; opacity: .75; text-shadow: 0 2px 0 #000; }
@keyframes bob { 50% { transform: translateY(-8px) rotate(-1deg); } }

/* top bar (menus) */
#topbar { position: fixed; left: 0; right: 0; top: 0; z-index: 20; display: flex; gap: 8px; align-items: center; padding: calc(8px + env(safe-area-inset-top)) 10px 8px; pointer-events: none; }
#topbar > * { pointer-events: auto; }
#topbar button, .tb-cur { font: 400 18px var(--font-d); color: var(--paper); background: var(--panel); border: 3px solid var(--ink); border-radius: 12px; padding: 5px 10px; box-shadow: var(--shadow); cursor: pointer; display: flex; align-items: center; gap: 4px; }
.tb-back { background: var(--yellow) !important; color: var(--ink) !important; }
.tb-cur b { font-weight: 400; min-width: 34px; } .tb-cur img { width: 24px; height: 24px; }
.tb-pass { margin-left: auto; flex-direction: column; align-items: stretch !important; gap: 2px !important; padding: 4px 10px !important; font-size: 14px !important; }
.tb-pass i { display: block; width: 84px; height: 7px; background: #000; border-radius: 4px; overflow: hidden; } .tb-pass i b { display: block; height: 100%; background: var(--yellow); }

/* hub */
#hub { display: flex; justify-content: space-between; align-items: center; padding: var(--top) 18px 18px; gap: 16px; }
.hub-l, .hub-r { display: flex; flex-direction: column; gap: 12px; width: min(340px, 42vw); }
.hub-logo { width: 100%; max-height: 22vh; object-fit: contain; filter: drop-shadow(0 6px 0 rgba(0,0,0,.35)); }
.hbtn { position: relative; display: flex; align-items: center; gap: 12px; text-align: left; color: var(--paper); background: var(--panel); border: 3px solid var(--ink); border-radius: 18px; padding: 10px 14px; box-shadow: var(--shadow); cursor: pointer; font-family: var(--font-b); transition: transform .1s; }
.hbtn:hover { transform: translateY(-2px) rotate(-.5deg); }
.hbtn img { width: 52px; height: 52px; object-fit: contain; flex: none; }
.hbtn b { font: 400 22px var(--font-d); display: block; } .hbtn small { font-weight: 800; opacity: .85; font-size: 13px; }
.hbtn.big { flex-direction: column; align-items: flex-start; gap: 2px; background: var(--yellow); color: var(--ink); padding: 14px 18px; }
.hbtn.big b { font-size: 28px; } .hk { font: 400 14px var(--font-d); background: var(--ink); color: var(--yellow); padding: 2px 8px; border-radius: 8px; }
.hbtn.daily { flex-direction: column; align-items: flex-start; gap: 2px; background: #2b4a6a; }
.hbtn.daily .hk { color: var(--sky); }
.hbtn.shop { background: #6a3a2a; } .hbtn.pass { background: #4a2a6a; }

/* world map */
#map { display: flex; gap: 12px; padding: var(--top) 12px 12px; align-items: stretch; }
.map-art { position: relative; flex: 1; border: 4px solid var(--ink); border-radius: 18px; overflow: hidden; box-shadow: var(--shadow); background: #2a8ad0; min-width: 0; }
.map-art > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.rnode { position: absolute; transform: translate(-50%, -50%); background: var(--c, #fff); color: var(--ink); border: 3px solid var(--ink); border-radius: 14px; padding: 5px 10px; font-family: var(--font-b); cursor: pointer; box-shadow: var(--shadow); text-align: center; white-space: nowrap; transition: transform .12s; }
.rnode b { font: 400 17px var(--font-d); display: block; } .rnode small { font-weight: 900; font-size: 12px; }
.rnode.on { transform: translate(-50%, -50%) scale(1.12); outline: 4px solid var(--yellow); }
.rnode.locked { filter: grayscale(.85) brightness(.85); }
.rnode.done::after { content: '✓'; position: absolute; top: -10px; right: -10px; width: 24px; height: 24px; border-radius: 50%; background: var(--teal); color: #fff; border: 2px solid var(--ink); font: 400 15px/20px var(--font-d); }
.map-panel { width: min(360px, 40vw); background: var(--panel); border: 4px solid var(--ink); border-top: 8px solid var(--c); border-radius: 18px; padding: 12px; display: flex; flex-direction: column; gap: 7px; box-shadow: var(--shadow); }
.map-panel h2 { font-size: 28px; color: var(--c); text-shadow: 0 2px 0 #000; }
.mrow { display: flex; align-items: center; gap: 10px; background: var(--panel2); color: var(--paper); border: 3px solid var(--ink); border-radius: 12px; padding: 7px 10px; cursor: pointer; text-align: left; font-family: var(--font-b); }
.mrow:hover:not([disabled]) { background: #3c4529; }
.mrow.locked { opacity: .5; cursor: default; }
.mrow.boss { background: #4a1f1f; } .mrow.clear .mn { background: var(--teal); }
.mn { width: 32px; height: 32px; flex: none; border-radius: 50%; background: var(--yellow); color: var(--ink); border: 2px solid var(--ink); font: 400 18px/28px var(--font-d); text-align: center; }
.mt { flex: 1; min-width: 0; } .mt b { font: 400 17px var(--font-d); display: block; } .mt small { font-size: 12px; font-weight: 800; opacity: .8; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ms i { color: #555; font-style: normal; font-size: 16px; } .ms i.on { color: var(--yellow); text-shadow: 0 1px 0 #000; }
.locked-msg { font-weight: 800; opacity: .85; }

/* generic page (squad, shop, pass, daily) */
.page { display: flex; flex-direction: column; padding: var(--top) 12px 10px; gap: 8px; background: rgba(20, 22, 14, .55); }
.tabs, .stabs { display: flex; gap: 6px; flex-wrap: wrap; }
.tabs button, .stabs button { position: relative; font: 400 17px var(--font-d); color: var(--paper); background: var(--panel); border: 3px solid var(--ink); border-radius: 12px; padding: 6px 14px; cursor: pointer; box-shadow: 0 3px 0 rgba(0,0,0,.35); }
.tabs button.on, .stabs button.on { background: var(--yellow); color: var(--ink); }
.panel { background: var(--panel); border: 4px solid var(--ink); border-radius: 18px; padding: 14px; box-shadow: var(--shadow); }

/* paging */
.pgrid { display: grid; gap: 8px; }
.pcell { min-width: 0; min-height: 0; cursor: pointer; }
.pnav { display: flex; align-items: center; justify-content: center; gap: 12px; height: 30px; margin-top: 4px; font-weight: 900; }
.pbtn { font: 400 16px var(--font-d); background: var(--yellow); border: 3px solid var(--ink); border-radius: 10px; width: 40px; height: 30px; cursor: pointer; color: var(--ink); }
.pbtn[disabled] { opacity: .35; cursor: default; }

/* squad */
.sq-body { flex: 1; display: flex; gap: 12px; min-height: 0; }
.sq-list { flex: 1; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.sq-slots { display: flex; gap: 8px; align-items: center; }
.sq-slots > span { font-weight: 900; opacity: .8; font-size: 13px; }
.sq-slot { width: 86px; height: 86px; background: var(--panel); border: 3px solid var(--yellow); border-radius: 14px; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; cursor: pointer; overflow: hidden; }
.sq-slot b { font: 400 14px var(--font-d); background: var(--ink); width: 100%; text-align: center; }
.sf, .hf { flex: 1; width: 100%; display: flex; align-items: center; justify-content: center; min-height: 0; } .sf canvas, .hf canvas { width: 62px; height: 62px; }
.sq-grid { flex: 1; min-height: 0; }
.hcard { position: relative; height: 100%; background: var(--panel); border: 3px solid var(--ink); border-bottom: 6px solid var(--rc); border-radius: 14px; display: flex; flex-direction: column; align-items: center; padding: 4px; overflow: hidden; }
.hcard b { font: 400 15px var(--font-d); } .hcard small { font-size: 11px; font-weight: 900; opacity: .8; }
.hcard.on { background: #4b5a2a; outline: 3px solid var(--yellow); }
.hcard.locked .hf { filter: brightness(.35) grayscale(1); }
.insq { position: absolute; top: 3px; left: 4px; font-style: normal; background: var(--teal); border: 2px solid var(--ink); border-radius: 50%; width: 22px; height: 22px; font: 400 13px/18px var(--font-d); text-align: center; }
.sq-detail { width: min(480px, 50vw); background: var(--panel); border: 4px solid var(--ink); border-radius: 18px; padding: 12px; display: flex; flex-direction: column; gap: 8px; box-shadow: var(--shadow); min-height: 0; }
.dt-top { display: flex; gap: 10px; min-height: 0; }
.dt-pic { flex: none; width: 150px; border-radius: 14px; background: radial-gradient(circle at 50% 70%, color-mix(in srgb, var(--rc) 45%, transparent), transparent 70%), #20251a; border: 3px solid var(--ink); display: flex; align-items: flex-end; justify-content: center; overflow: hidden; }
.dt-pic canvas { width: 100%; height: auto; }
.dt-info { flex: 1; min-width: 0; } .dt-info h2 { font-size: 28px; } .dt-info p { margin: 2px 0 6px; font-size: 13px; font-weight: 700; }
.lv { font-size: 16px; background: var(--yellow); color: var(--ink); border-radius: 8px; padding: 1px 6px; vertical-align: middle; }
.rar { font-weight: 900; font-size: 12px; text-transform: uppercase; letter-spacing: .5px; }
.dt-moves { display: flex; flex-direction: column; gap: 2px; font-size: 12px; font-weight: 700; margin-bottom: 4px; } .dt-moves b { color: var(--yellow); }
.srow { display: grid; grid-template-columns: 58px 1fr 48px; gap: 6px; align-items: center; font-size: 12px; font-weight: 900; margin: 2px 0; }
.srow i, .xpline i, .chr i, .pxp i { display: block; height: 8px; background: #000; border-radius: 5px; overflow: hidden; } .srow i b, .xpline i b, .chr i b, .pxp i b { display: block; height: 100%; background: linear-gradient(90deg, #ffd23f, #ff9d3a); }
.srow em { font-style: normal; text-align: right; }
.xpline { display: flex; gap: 6px; align-items: center; font-size: 11px; font-weight: 900; margin-top: 4px; } .xpline i { flex: 1; } .xpline i b { background: var(--sky); }
.dt-slots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.eslot { display: flex; align-items: center; gap: 6px; background: var(--panel2); color: var(--paper); border: 3px solid var(--ink); border-left: 6px solid var(--rc, #555); border-radius: 12px; padding: 4px 6px; cursor: pointer; text-align: left; font-family: var(--font-b); min-width: 0; }
.eslot .ti { width: 40px; height: 40px; flex: none; display: flex; align-items: center; justify-content: center; font: 400 22px var(--font-d); } .eslot img { width: 100%; height: 100%; object-fit: contain; }
.eslot span { min-width: 0; } .eslot small { display: block; font-size: 10px; font-weight: 900; opacity: .7; text-transform: uppercase; } .eslot b { display: block; font-size: 12px; font-weight: 900; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.eslot.empty { opacity: .75; }
.dt-btns { margin-top: auto; } .dt-btns .btn { font-size: 17px; padding: 8px 14px; }
.dt-lock p { font-weight: 800; }

/* toolbelt tab */
.belt { flex: 1; display: flex; flex-direction: column; gap: 6px; min-height: 0; }
.bslots { display: flex; gap: 8px; }
.bslot { position: relative; width: 104px; height: 96px; background: var(--panel); border: 3px solid var(--ink); border-radius: 14px; color: var(--paper); cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; font-family: var(--font-b); }
.bslot.on { outline: 4px solid var(--yellow); } .bslot img { width: 52px; height: 52px; } .bslot small { font-size: 11px; font-weight: 900; } .bslot b { font: 400 30px var(--font-d); }
.bslot i { position: absolute; top: 4px; right: 6px; font: 400 15px var(--font-d); font-style: normal; } .bslot.locked { opacity: .7; }
.tgrid { flex: 1; min-height: 0; }
.pick { position: relative; height: 100%; background: var(--panel); border: 3px solid var(--ink); border-bottom: 6px solid var(--rc, #555); border-radius: 14px; padding: 6px; display: flex; flex-direction: column; align-items: center; text-align: center; overflow: hidden; gap: 2px; }
.pick img { width: 64%; max-height: 52%; object-fit: contain; } .pick b { font: 400 14px var(--font-d); } .pick small { font-size: 11px; font-weight: 800; opacity: .85; line-height: 1.15; }
.pick.on { outline: 3px solid var(--yellow); background: #4b5a2a; } .pick.locked > img, .pick.locked .pf { filter: grayscale(.9) brightness(.6); }
.pick.skin.locked .pf { filter: none; } .pick .lk { position: absolute; top: 4px; right: 6px; font-style: normal; font-size: 13px; }
.pick .pf { flex: 1; min-height: 0; display: flex; align-items: flex-end; } .pick .pf canvas { height: 100%; width: auto; max-width: 100%; }
.cnt { font-style: normal; color: var(--yellow); }
.ti.big { font: 400 40px var(--font-d); flex: 1; display: flex; align-items: center; }

/* shop */
#shop { gap: 6px; } .sbody { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.stabs button { font-size: 15px; padding: 5px 10px; }
.sgrid { flex: 1; min-height: 0; }
.scard { position: relative; height: 100%; background: linear-gradient(180deg, color-mix(in srgb, var(--rc) 28%, #2d3320), #23281a); border: 3px solid var(--ink); border-bottom: 6px solid var(--rc); border-radius: 16px; padding: 6px; display: flex; flex-direction: column; align-items: center; text-align: center; overflow: hidden; transition: transform .1s; }
.scard:hover { transform: translateY(-3px); }
.scard .si { flex: 1; min-height: 0; width: 100%; display: flex; align-items: center; justify-content: center; } .scard .si img { max-width: 80%; max-height: 100%; object-fit: contain; filter: drop-shadow(0 3px 0 rgba(0,0,0,.4)); }
.scard .sl { height: 100%; display: flex; align-items: flex-end; justify-content: center; } .scard .sl canvas { height: 100%; width: auto; }
.scard b { font: 400 15px/1.05 var(--font-d); } .scard small { font-size: 11px; font-weight: 800; opacity: .8; }
.scard .price { margin-top: 4px; background: var(--yellow); color: var(--ink); border: 2px solid var(--ink); border-radius: 10px; padding: 2px 10px; font: 400 15px var(--font-d); }
.scard.owned .price { background: var(--teal); color: #fff; }
.off { position: absolute; top: 6px; left: 6px; background: var(--red); color: #fff; border: 2px solid var(--ink); border-radius: 8px; padding: 1px 6px; font: 400 13px var(--font-d); font-style: normal; transform: rotate(-6deg); z-index: 1; }
.odds { font-size: 10px; font-weight: 800; opacity: .8; margin: 2px 0; line-height: 1.2; } .gc { font-size: 10px !important; }
.was { font-weight: 900; opacity: .6; font-size: 12px; }
.feat { flex: 1; display: flex; gap: 12px; min-height: 0; }
.fbig { width: min(340px, 38%); background: radial-gradient(circle at 50% 60%, color-mix(in srgb, var(--rc) 50%, transparent), transparent 70%), var(--panel); border: 4px solid var(--ink); border-bottom: 8px solid var(--rc); border-radius: 20px; padding: 10px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; box-shadow: var(--shadow); }
.fbig small { font: 400 13px var(--font-d); color: var(--yellow); } .fbig b { font: 400 26px var(--font-d); } .fbig > span { font-weight: 800; opacity: .8; }
.fpic { flex: 1; min-height: 0; display: flex; align-items: flex-end; justify-content: center; width: 100%; } .fpic canvas { max-height: 100%; width: auto; max-width: 100%; } .fpic img { max-height: 100%; max-width: 80%; object-fit: contain; align-self: center; }
.fside { flex: 1; display: flex; flex-direction: column; gap: 6px; min-width: 0; min-height: 0; } .fside h3 { font-size: 20px; }
.deals { flex: 1; min-height: 0; }
.gift { display: flex; align-items: center; gap: 10px; background: linear-gradient(90deg, #ff6fb5, #ffd23f); color: var(--ink); border: 3px solid var(--ink); border-radius: 16px; padding: 6px 12px; cursor: pointer; text-align: left; font-family: var(--font-b); box-shadow: var(--shadow); animation: pulse .9s ease-in-out infinite alternate; }
.gift img { width: 46px; height: 46px; } .gift b { font: 400 20px var(--font-d); display: block; } .gift small { font-weight: 900; }
.gift.used { animation: none; filter: grayscale(.8); opacity: .7; }
.mycrates { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 6px; font-weight: 900; } .mycrates .btn { font-size: 15px; padding: 5px 10px; }
.skhero { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 6px; }
.skhero button { width: 44px; height: 44px; padding: 0; border: 3px solid var(--ink); border-radius: 10px; background: var(--panel); cursor: pointer; overflow: hidden; }
.skhero button.on { outline: 3px solid var(--yellow); background: #4b5a2a; } .skhero canvas { width: 100%; height: 100%; }
.gemsp { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; text-align: center; } .gemsp > p { font: 400 20px var(--font-d); }
.gp { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.gpk { position: relative; width: 120px; background: var(--panel); border: 3px solid var(--ink); border-radius: 16px; padding: 8px; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.gpk img { width: 60px; height: 60px; } .gpk b { font: 400 22px var(--font-d); } .gpk i { position: absolute; top: -8px; right: -8px; background: var(--red); border: 2px solid var(--ink); border-radius: 8px; padding: 0 5px; font: 400 12px var(--font-d); font-style: normal; }
.gpk.best { border-color: var(--yellow); } .gpk .btn { font-size: 15px; padding: 4px 12px; }
.earn { list-style: none; padding: 0; margin: 0; font-weight: 800; display: flex; flex-wrap: wrap; gap: 6px 16px; justify-content: center; }

/* season pass */
#pass { gap: 6px; }
.ph { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; } .ph small { font: 400 13px var(--font-d); color: var(--yellow); } .ph h2 { font-size: 30px; text-shadow: 0 3px 0 #000; }
.pxp { flex: 1; min-width: 180px; display: flex; flex-direction: column; gap: 2px; font-weight: 900; } .pxp b { font: 400 18px var(--font-d); } .pxp i { height: 12px; } .pxp small { font-size: 12px; }
.premok { font: 400 18px var(--font-d); color: var(--yellow); background: #4a2a6a; border: 3px solid var(--ink); border-radius: 12px; padding: 6px 12px; }
.pbody { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.trk { flex: 1; display: flex; gap: 6px; min-height: 0; }
.tlabels { width: 62px; display: flex; flex-direction: column; justify-content: space-around; padding-top: 30px; font: 400 13px var(--font-d); text-align: center; }
.tlabels span:last-child { color: var(--yellow); }
.tcols { flex: 1; display: flex; gap: 6px; min-height: 0; }
.tcol { flex: 1; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.tn { display: flex; flex-direction: column; align-items: center; gap: 2px; } .tn b { font: 400 16px var(--font-d); width: 30px; height: 26px; line-height: 22px; text-align: center; background: var(--panel); border: 2px solid var(--ink); border-radius: 8px; } .tn i { width: 100%; height: 6px; background: #000; border-radius: 3px; overflow: hidden; display: block; } .tn i b { display: block; height: 100%; background: var(--yellow); width: 0; border: 0; border-radius: 0; }
.tcol.got .tn > b { background: var(--yellow); color: var(--ink); } .tcol.cur .tn > b { background: var(--red); color: #fff; animation: pulse .7s infinite alternate; }
.tr { position: relative; flex: 1; min-height: 0; background: var(--panel); border: 3px solid var(--ink); border-bottom: 5px solid var(--rc); border-radius: 14px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 4px; cursor: pointer; overflow: hidden; }
.tr img { width: 70%; max-height: 60%; object-fit: contain; } .tr small { font-size: 11px; font-weight: 900; line-height: 1.1; }
.tr .tl { flex: 1; min-height: 0; display: flex; align-items: flex-end; } .tr .tl canvas { height: 100%; width: auto; max-width: 100%; }
.tr.prem { background: linear-gradient(180deg, #4a2a6a, #2a1a3a); } .tr.lock > img, .tr.lock .tl { filter: grayscale(.6) brightness(.7); }
.tcol.got .tr.free, .tcol.got .tr.prem:not(.lock) { box-shadow: inset 0 0 0 3px var(--yellow); }
.ck { position: absolute; top: 3px; right: 4px; font-style: normal; color: var(--yellow); font: 400 16px var(--font-d); } .lk { position: absolute; top: 3px; right: 4px; font-style: normal; font-size: 13px; }
.chs { flex: 1; display: flex; gap: 12px; min-height: 0; } .chd { width: min(360px, 40%); } .chsn { flex: 1; display: flex; flex-direction: column; min-width: 0; min-height: 0; } .chlist { flex: 1; min-height: 0; }
.chs h3 { font-size: 20px; margin-bottom: 6px; }
.chr { display: grid; grid-template-columns: 1fr 70px 64px 46px; gap: 6px; align-items: center; background: var(--panel); border: 3px solid var(--ink); border-radius: 10px; padding: 4px 8px; font-size: 12px; font-weight: 900; margin-bottom: 6px; height: 36px; }
.chr span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .chr em { font-style: normal; text-align: right; } .chr small { color: var(--yellow); text-align: right; }
.chr.done { opacity: .6; } .chr.done i b { background: var(--teal); }
.chsn .chr { margin: 0; height: 100%; }

/* daily */
#daily { flex-direction: row; align-items: center; justify-content: center; gap: 14px; }
.daily-p { width: min(420px, 50vw); text-align: center; } .daily-p h2 { font-size: 34px; color: var(--sky); }
.dmod { background: #2b4a6a; border: 3px solid var(--ink); border-radius: 14px; padding: 8px; margin: 8px 0; } .dmod b { font: 400 22px var(--font-d); display: block; color: var(--yellow); }
.board { width: min(340px, 40vw); } .board ol { margin: 6px 0 0; padding-left: 26px; font-weight: 900; } .board li { padding: 3px 0; } .board li span { float: right; opacity: .8; } .board li.me { color: var(--yellow); }

/* battle HUD */
#hud { display: flex; justify-content: space-between; align-items: flex-start; padding: calc(10px + env(safe-area-inset-top)) 12px 10px; gap: 8px; }
#hud .pill { pointer-events: auto; background: rgba(28,26,23,.85); border: 3px solid var(--ink); border-radius: 14px; padding: 6px 12px; font: 400 17px var(--font-d); box-shadow: var(--shadow); color: var(--paper); }
.hud-r { display: flex; gap: 6px; align-items: flex-start; }
#hud .turn { background: var(--yellow); color: var(--ink); } #hud .turn.enemy { background: var(--red); color: #fff; }
#hud .hint { font: 800 14px var(--font-b); max-width: 44vw; text-align: center; }
#hud .coins { display: flex; align-items: center; gap: 4px; } .cc { width: 18px; height: 18px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fff3a0, #ffc53d 45%, #c88a10); border: 2px solid var(--ink); display: inline-block; }
#hud .pause { cursor: pointer; font-family: var(--font-d); }
#banner { position: fixed; left: 0; right: 0; top: 30%; text-align: center; font: 400 clamp(34px, 7vw, 74px) var(--font-d); color: var(--yellow); text-shadow: 0 5px 0 #000, 0 0 30px rgba(0,0,0,.5); pointer-events: none; opacity: 0; transform: scale(.6); transition: opacity .25s, transform .25s; z-index: 15; padding: 0 12px; }
#banner.show { opacity: 1; transform: scale(1); }
#banner small { display: block; font: 800 clamp(14px, 2.2vw, 22px) var(--font-b); color: var(--paper); margin-top: 6px; }
#banner.boss { color: #ff6a5a; } #banner.warn small { color: #ffd23f; }
#bar { position: fixed; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 8px 10px calc(8px + env(safe-area-inset-bottom)); pointer-events: none; }
#bar > * { pointer-events: auto; }
.bar-row { display: flex; gap: 10px; align-items: flex-end; justify-content: center; }
#units { display: flex; gap: 8px; }
.unit { width: 150px; background: rgba(28,26,23,.9); border: 3px solid var(--ink); border-radius: 14px; padding: 6px; display: flex; gap: 8px; align-items: center; cursor: pointer; box-shadow: var(--shadow); transition: transform .12s, background .12s; }
.unit .ui { flex: 1; min-width: 0; }
.unit.sel { background: var(--olive); transform: translateY(-6px); outline: 3px solid var(--yellow); }
.unit.done { opacity: .55; } .unit.ko { opacity: .4; filter: grayscale(1); }
.unit.marked { outline: 3px solid var(--red); animation: pulse .6s infinite alternate; }
.unit .face { width: 46px; height: 46px; border-radius: 10px; background: #cfe9ff; border: 2px solid var(--ink); overflow: hidden; flex: none; } .unit .face canvas { width: 100%; height: 100%; }
.unit b { font: 400 17px var(--font-d); display: block; }
.unit .hp { height: 9px; background: #000; border-radius: 5px; overflow: hidden; margin-top: 3px; border: 1px solid #000; }
.unit .hp i { display: block; height: 100%; background: linear-gradient(#7fe07a, #3fae3b); transition: width .3s; }
.unit .meta { font-size: 11px; font-weight: 900; opacity: .85; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#acts { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
#acts .btn { font-size: 16px; padding: 7px 12px; min-width: 140px; text-align: left; }
#acts .btn small { display: block; font: 800 11px var(--font-b); opacity: .8; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 150px; }
#acts .skill:not([disabled]) { background: linear-gradient(90deg, #ffd23f, #ff9d3a); }
#tools { display: flex; gap: 6px; align-items: center; }
.tool { position: relative; width: 50px; height: 50px; border-radius: 50%; background: var(--panel); border: 3px solid var(--ink); cursor: pointer; padding: 4px; box-shadow: var(--shadow); }
.tool img { width: 100%; height: 100%; object-fit: contain; } .tool i { position: absolute; bottom: -4px; right: -4px; background: var(--yellow); color: var(--ink); border: 2px solid var(--ink); border-radius: 9px; font: 400 12px/14px var(--font-d); font-style: normal; padding: 0 4px; }
.tool.on { outline: 3px solid var(--yellow); background: #4b5a2a; transform: scale(1.1); } .tool[disabled] { filter: grayscale(1) brightness(.6); cursor: default; }
.tl { font: 400 13px var(--font-d); background: rgba(28,26,23,.85); border-radius: 8px; padding: 2px 8px; }
#sqshield { position: fixed; left: 12px; bottom: calc(120px + env(safe-area-inset-bottom)); font: 400 18px var(--font-d); background: #2b4a6a; border: 3px solid var(--ink); border-radius: 12px; padding: 4px 10px; }
#tip { position: fixed; padding: 6px 10px; background: rgba(28,26,23,.92); border: 2px solid var(--yellow); border-radius: 10px; font-weight: 900; font-size: 14px; pointer-events: none; transform: translate(-50%, -130%); white-space: nowrap; z-index: 16; }
.float { position: fixed; font: 400 28px var(--font-d); color: #fff; text-shadow: 0 3px 0 #000, 0 0 6px #000; pointer-events: none; transform: translate(-50%, -50%); animation: rise 1.05s ease-out forwards; white-space: nowrap; z-index: 14; }
.float.crit { color: var(--yellow); font-size: 38px; } .float.heal { color: #7fe07a; } .float.miss { color: #cfd8e3; font-size: 22px; } .float.note { color: var(--sky); font-size: 19px; } .float.hurt { color: #ff8a7a; }
@keyframes rise { 0% { opacity: 0; transform: translate(-50%, -20%) scale(.6); } 15% { opacity: 1; transform: translate(-50%, -60%) scale(1.2); } 100% { opacity: 0; transform: translate(-50%, -180%) scale(1); } }
.ehp { position: fixed; width: 64px; height: 9px; background: #000; border: 2px solid var(--ink); border-radius: 5px; transform: translate(-50%, 0); pointer-events: none; overflow: hidden; }
.ehp i { display: block; height: 100%; background: linear-gradient(#ff7a6e, #d5332a); transition: width .3s; }
.ehp.elite { border-color: #ffd23f; } .ehp.elite i { background: linear-gradient(#ffe98a, #e0a020); }
.ehp.hidden-in-cover { opacity: .45; }
.ehp.boss { width: 180px; height: 18px; overflow: visible; border-radius: 8px; } .ehp.boss i { border-radius: 6px; } .ehp.boss span { position: absolute; left: 0; right: 0; top: -20px; text-align: center; font: 400 14px var(--font-d); text-shadow: 0 2px 0 #000; white-space: nowrap; }
.ehp.shielded { box-shadow: 0 0 0 3px #66ccff, 0 0 12px #66ccff; } .ehp.exposed { box-shadow: 0 0 0 3px #ffd23f, 0 0 14px #ffd23f; }
#selArrow { position: fixed; width: 0; height: 0; border-left: 14px solid transparent; border-right: 14px solid transparent; border-top: 18px solid var(--yellow); filter: drop-shadow(0 3px 0 #000); transform: translate(-50%, -100%); pointer-events: none; animation: arrow .6s ease-in-out infinite alternate; }
@keyframes arrow { to { margin-top: -8px; } }
.flycoin { position: fixed; width: 18px; height: 18px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fff3a0, #ffc53d 45%, #c88a10); border: 2px solid var(--ink); transform: translate(-50%, -50%); transition: left .6s cubic-bezier(.5,-0.4,.7,1), top .6s cubic-bezier(.3,0,.7,1.4), opacity .6s; z-index: 17; pointer-events: none; }
#rotate { position: fixed; left: 50%; top: 64px; transform: translateX(-50%); background: rgba(28,26,23,.88); border: 2px solid var(--yellow); border-radius: 12px; padding: 6px 12px; font: 800 13px var(--font-b); white-space: nowrap; pointer-events: none; transition: opacity .4s; z-index: 15; }

/* cut-ins, letterbox, boss card, flash */
#cutin { position: fixed; inset: 0; pointer-events: none; z-index: 18; display: flex; align-items: center; }
.ci-band { width: 100%; height: 150px; display: flex; align-items: center; gap: 18px; padding-left: 8vw; background: repeating-linear-gradient(-60deg, var(--c) 0 28px, color-mix(in srgb, var(--c) 75%, #000) 28px 56px); border-top: 5px solid var(--ink); border-bottom: 5px solid var(--ink);
  transform: translateX(-110%) skewY(-4deg); transition: transform .28s cubic-bezier(.2,.9,.3,1.2); box-shadow: 0 10px 0 rgba(0,0,0,.3); }
#cutin.show .ci-band { transform: translateX(0) skewY(-4deg); }
.ci-face { width: 150px; height: 150px; margin-top: -30px; filter: drop-shadow(4px 4px 0 #000); } .ci-face canvas { width: 100%; height: 100%; }
.ci-text { font: 400 clamp(36px, 7vw, 72px) var(--font-d); color: #fff; text-shadow: 0 5px 0 #000, 3px 0 0 #000, -3px 0 0 #000; } .ci-text small { display: block; font-size: .4em; color: var(--ink); text-shadow: none; }
#letterbox i { position: fixed; left: 0; right: 0; height: 0; background: #000; transition: height .4s; z-index: 17; pointer-events: none; } #letterbox i:first-child { top: 0; } #letterbox i:last-child { bottom: 0; }
#letterbox.on i { height: 11vh; }
#bosscard { position: fixed; left: 50%; bottom: 14vh; transform: translate(-50%, 40px); opacity: 0; transition: all .4s; z-index: 19; text-align: center; pointer-events: none; width: min(560px, 92vw); }
#bosscard.on { opacity: 1; transform: translate(-50%, 0); }
#bosscard small { font: 400 18px var(--font-d); background: var(--red); color: #fff; padding: 2px 12px; border: 3px solid var(--ink); border-radius: 10px; }
#bosscard b { display: block; font: 400 clamp(40px, 8vw, 76px) var(--font-d); color: #ff6a5a; text-shadow: 0 5px 0 #000; line-height: 1.05; margin-top: 6px; }
#bosscard span { font: 400 20px var(--font-d); color: var(--yellow); text-shadow: 0 3px 0 #000; } #bosscard p { font-weight: 800; text-shadow: 0 2px 0 #000; margin: 6px 0 0; }
#flash { position: fixed; inset: 0; background: #fff; opacity: 0; pointer-events: none; transition: opacity .25s; z-index: 30; } #flash.on { opacity: .9; transition: none; }

/* toast */
#toast { position: fixed; left: 50%; top: calc(62px + env(safe-area-inset-top)); transform: translate(-50%, -30px); opacity: 0; transition: all .3s; z-index: 40; display: flex; align-items: center; gap: 10px; background: var(--panel); border: 3px solid var(--yellow); border-radius: 14px; padding: 6px 14px; box-shadow: var(--shadow); pointer-events: none; max-width: 92vw; }
#toast.show { opacity: 1; transform: translate(-50%, 0); } #toast img { width: 40px; height: 40px; object-fit: contain; } #toast b { font: 400 17px var(--font-d); display: block; } #toast small { font-weight: 800; font-size: 12px; opacity: .9; }
#toast.tier { border-color: #c46bff; background: #3a1f55; }

/* modal */
#modal { position: fixed; inset: 0; z-index: 35; display: none; align-items: center; justify-content: center; background: rgba(10,12,8,.72); padding: 12px; }
#modal.show { display: flex; animation: fadein .15s; }
@keyframes fadein { from { opacity: 0; } }
.mbox { width: min(560px, 96vw); max-height: 96vh; background: var(--panel); border: 4px solid var(--ink); border-radius: 20px; padding: 16px; box-shadow: 0 8px 0 rgba(0,0,0,.4); text-align: center; display: flex; flex-direction: column; gap: 4px; animation: popin .2s cubic-bezier(.2,.9,.3,1.3); overflow: hidden; }
@keyframes popin { from { transform: scale(.85); } }
.mbox h2 { font-size: 30px; } .mbox p { margin: 4px 0; font-weight: 700; } .mtext { font-size: 18px; }
#modal.picker .mbox { width: min(860px, 96vw); height: min(620px, 94vh); } .pk-grid { flex: 1; min-height: 0; }
.pb .mbox { width: min(620px, 96vw); }
.bossline { background: #4a1f1f; border: 3px solid var(--ink); border-radius: 12px; padding: 6px 10px; font-weight: 800; font-size: 13px; } .bossline b { color: #ff8a7a; font-family: var(--font-d); font-weight: 400; font-size: 16px; }
.pb-squad { display: flex; gap: 10px; justify-content: center; } .pb-h { display: flex; flex-direction: column; align-items: center; } .pbf canvas { width: 140px; height: auto; } .pb-h b { font: 400 18px var(--font-d); } .pb-h small { font-weight: 900; opacity: .8; }
.pb-belt { display: flex; gap: 6px; justify-content: center; align-items: center; } .pb-t { position: relative; width: 46px; height: 46px; border: 3px solid var(--ink); border-radius: 50%; background: var(--panel2); padding: 4px; } .pb-t img { width: 100%; height: 100%; }
.pb-t i { position: absolute; bottom: -4px; right: -6px; background: var(--yellow); color: var(--ink); border-radius: 8px; font: 400 12px var(--font-d); padding: 0 4px; font-style: normal; } .pb-t.empty { display: flex; align-items: center; justify-content: center; font: 400 22px var(--font-d); opacity: .5; } .pb-belt span { font-weight: 900; font-size: 12px; opacity: .8; }
.pv { height: 190px; border-radius: 16px; background: radial-gradient(circle at 50% 60%, color-mix(in srgb, var(--rc) 50%, transparent), transparent 70%), #20251a; border: 3px solid var(--ink); display: flex; align-items: flex-end; justify-content: center; overflow: hidden; }
.pvpic { display: flex; align-items: flex-end; justify-content: center; height: 100%; gap: 0; } .pvpic canvas { height: 100%; width: auto; } .pvpic img { max-height: 90%; max-width: 70%; align-self: center; object-fit: contain; filter: drop-shadow(0 4px 0 rgba(0,0,0,.4)); }
.bitems { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
.tile { width: 92px; background: var(--panel2); border: 3px solid var(--ink); border-bottom: 5px solid var(--rc); border-radius: 12px; padding: 4px; } .tile .ti img { width: 54px; height: 54px; object-fit: contain; } .tile b { display: block; font-size: 11px; font-weight: 900; }
.gi { height: 130px; display: flex; align-items: center; justify-content: center; border-radius: 16px; background: radial-gradient(circle, color-mix(in srgb, var(--rc) 45%, transparent), transparent 70%); } .gi img { max-height: 100%; max-width: 70%; }
.set { display: flex; justify-content: space-between; align-items: center; gap: 10px; text-align: left; padding: 6px 0; border-bottom: 2px solid rgba(255,255,255,.08); font-weight: 900; }
.set input { font: 800 16px var(--font-b); padding: 6px 10px; border-radius: 10px; border: 3px solid var(--ink); width: 180px; }
/* crate + reveal */
.crate { height: 180px; display: flex; align-items: center; justify-content: center; cursor: pointer; } .crate img { height: 160px; filter: drop-shadow(0 6px 0 rgba(0,0,0,.4)); }
.crate.shake img { animation: shake .3s infinite; } .crate.burst img { animation: burst .5s forwards; }
@keyframes shake { 25% { transform: rotate(-6deg) scale(1.03); } 75% { transform: rotate(6deg) scale(1.03); } }
@keyframes burst { 60% { transform: scale(1.4); filter: brightness(3) drop-shadow(0 0 30px #fff); } 100% { transform: scale(1.8); opacity: 0; filter: brightness(5); } }
.rv { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin: 8px 0; }
.rvc { width: 130px; background: radial-gradient(circle at 50% 35%, color-mix(in srgb, var(--rc) 55%, transparent), transparent 70%), var(--panel2); border: 3px solid var(--ink); border-bottom: 6px solid var(--rc); border-radius: 16px; padding: 8px; animation: flipin .5s backwards; }
.rvc .ti img { width: 84px; height: 84px; object-fit: contain; } .rvc b { display: block; font-size: 13px; font-weight: 900; } .rvc small { font: 400 13px var(--font-d); }
@keyframes flipin { from { transform: rotateY(90deg) scale(.6); opacity: 0; } }
#modal.reveal.legend .mbox { box-shadow: 0 0 0 4px var(--c-legendary), 0 0 60px var(--c-legendary); } #modal.reveal.epic .mbox { box-shadow: 0 0 0 4px var(--c-epic), 0 0 40px var(--c-epic); }

/* result */
#result { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; background: rgba(20,22,14,.8); text-align: center; padding: 14px; }
#result h2 { font-size: clamp(36px, 7vw, 70px); color: var(--yellow); text-shadow: 0 5px 0 #000; }
#result .stars i { font: 400 54px var(--font-d); color: #555; font-style: normal; margin: 0 4px; text-shadow: 0 4px 0 #000; display: inline-block; animation: popin .4s backwards; } #result .stars i.on { color: var(--yellow); }
#result .stars i:nth-child(2) { animation-delay: .2s; } #result .stars i:nth-child(3) { animation-delay: .4s; }
#result p { margin: 0; font-weight: 800; }
.rew { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; max-width: 900px; }
.rw { width: 120px; background: var(--panel); border: 3px solid var(--ink); border-bottom: 5px solid var(--rc, #555); border-radius: 14px; padding: 6px; display: flex; flex-direction: column; align-items: center; animation: popin .35s backwards; }
.rw img { width: 46px; height: 46px; object-fit: contain; } .rw b { font: 400 18px var(--font-d); } .rw small { font-weight: 900; font-size: 11px; opacity: .85; }
.rf canvas { width: 46px; height: 46px; border-radius: 10px; }

/* ---------------- small screens ---------------- */
@media (max-width: 760px), (max-height: 520px) {
  :root { --top: calc(48px + env(safe-area-inset-top)); }
  #topbar button, .tb-cur { font-size: 15px; padding: 3px 8px; } .tb-cur img { width: 20px; height: 20px; } .tb-pass i { width: 60px; }
  .btn { font-size: 17px; padding: 8px 14px; } .btn.big { font-size: 24px; padding: 10px 28px; }
  .hbtn { padding: 7px 10px; gap: 8px; } .hbtn img { width: 40px; height: 40px; } .hbtn b { font-size: 18px; } .hbtn.big b { font-size: 21px; } .hbtn small { font-size: 11px; }
  .unit { width: 120px; padding: 4px; gap: 5px; } .unit .face { width: 34px; height: 34px; } .unit b { font-size: 14px; }
  #acts .btn { min-width: 112px; font-size: 14px; padding: 5px 8px; } #acts .btn small { display: none; }
  .tool { width: 42px; height: 42px; }
  .map-panel h2 { font-size: 22px; } .mrow { padding: 4px 8px; } .mn { width: 26px; height: 26px; font-size: 15px; line-height: 22px; } .mt b { font-size: 15px; }
  .sq-detail { padding: 8px; } .dt-pic { width: 110px; } .dt-info h2 { font-size: 22px; } .dt-info p { display: none; }
  .ci-band { height: 110px; } .ci-face { width: 110px; height: 110px; }
  #title .lineup { display: none; }
  .mbox { padding: 10px; } .mbox h2 { font-size: 24px; }
}
/* phones held upright: stack things */
@media (orientation: portrait) and (max-width: 760px) {
  #hub { flex-direction: column; justify-content: flex-start; padding-top: calc(var(--top) + 4px); }
  .hub-l, .hub-r { width: 100%; } .hub-r { margin-top: auto; } .hub-logo { max-height: 15vh; }
  #map { flex-direction: column; } .map-art { flex: none; height: 44vh; } .map-panel { width: 100%; flex: 1; overflow: hidden; }
  .rnode { padding: 3px 6px; } .rnode b { font-size: 13px; } .rnode small { font-size: 10px; }
  .sq-body { flex-direction: column; } .sq-list { flex: 1; } .sq-detail { width: 100%; flex: none; } .sq-slot { width: 62px; height: 62px; } .sf canvas { width: 44px; height: 44px; }
  .dt-slots { grid-template-columns: repeat(3, 1fr); } .eslot .ti { width: 30px; height: 30px; } .dt-moves { display: none; }
  .feat { flex-direction: column; } .fbig { width: 100%; flex: none; height: 31vh; padding: 6px; } .fbig b { font-size: 20px; } .fbig .btn { padding: 5px 14px; }
  .hf canvas { width: 46px; height: 46px; } .pbf canvas { width: 26vw; }
  .chs { flex-direction: column; } .chd { width: 100%; }
  #daily { flex-direction: column; } .daily-p, .board { width: 100%; }
  #bar { align-items: stretch; } .bar-row { flex-direction: column; align-items: stretch; gap: 6px; width: 100%; } #tools { justify-content: center; } #units { justify-content: space-between; gap: 5px; } .unit { width: 32.5%; min-width: 0; }
  #acts { grid-template-columns: repeat(4, 1fr); } #acts .btn { min-width: 0; text-align: center; padding: 8px 2px; }
  #hud .hint { display: none !important; } #hud .pill { font-size: 14px; padding: 4px 8px; } #where { max-width: 38vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .tlabels { width: 30px; font-size: 10px; writing-mode: vertical-rl; transform: rotate(180deg); }
}
@media (orientation: landscape), (min-width: 761px) { #rotate { display: none; } }
@media (max-height: 520px) and (orientation: landscape) {
  .page { padding-top: var(--top); } #hub { padding: var(--top) 12px 10px; } .hub-logo { max-height: 16vh; }
  .hub-l, .hub-r { gap: 7px; }
  .unit { width: 118px; } #bar { padding-bottom: 4px; gap: 4px; } .bar-row { gap: 6px; }
  .dt-top { max-height: 46vh; } .tr small { font-size: 9px; }
  #result .stars i { font-size: 36px; } .rw { width: 96px; padding: 3px; } .rw img { width: 32px; height: 32px; }
}