/* =====================================================================
   App screens: game shell, cricket, race worlds, tic tac toe, monsters,
   results, share. Loaded after app.css.
   ===================================================================== */
.opt{width:100%; min-height:48px; text-align:left}
.x-top .quit{padding:8px 16px 8px 10px}
.view{position:relative; min-height:0; min-width:0; display:grid}
.view > *{min-height:0}
.turnbar{display:flex; align-items:center; gap:10px; min-height:58px}
.turnbar .sp{flex:1}
.turnbar .slot{height:50px; flex-shrink:1; min-width:52px}
.turnbar .pill{white-space:nowrap; padding:10px 14px; flex-shrink:0}
.hitpop{top:26%; z-index:4}
.pcard.out{opacity:.3}
.pcard .prog{position:absolute; left:0; bottom:0; height:4px; background:var(--pc); box-shadow:0 0 10px var(--pc); transition:width .6s}
.sheet-copy{margin:0; color:#cfdaff; font-size:16px}
.nm-saved{display:flex; flex-direction:column; gap:8px}
.nm-saved:empty{display:none}
.nm-chips{display:flex; flex-wrap:wrap; gap:8px; max-height:188px; overflow:auto; padding:2px}
.nm-chip{display:inline-flex; align-items:center; gap:8px; min-height:48px; padding:5px 16px 5px 5px; border-radius:999px; font-weight:700; font-size:17px; background:rgba(120,160,255,.1); border:1px solid rgba(120,160,255,.3)}
.nm-chip .avatar{width:36px; height:36px; font-size:17px; border-radius:50%}
.nm-chip:active{transform:scale(.96)}
.nm-hint.warn{color:#ffd27a}
.muted{color:var(--muted)}

/* setup roster rows: edit button + optional play/sit-out circle */
.prow{padding:0; overflow:hidden}
.prow .pedit{flex:1; min-width:0; display:flex; align-items:center; gap:10px; padding:6px 10px 6px 6px; text-align:left; font-weight:700; min-height:48px}
.plist.dense .prow .pedit{padding:4px 8px 4px 4px; gap:8px; min-height:40px}
.prow .pin{width:30px; height:30px; margin-left:6px; flex:none; border-radius:50%; border:2px solid color-mix(in srgb, var(--pc) 70%, transparent); color:#08102a; font-weight:900; font-size:15px}
.prow .pin.on{background:var(--pc); box-shadow:0 0 12px color-mix(in srgb, var(--pc) 60%, transparent)}
.prow.out .pedit{opacity:.45}
.prow.out{opacity:1}
.prow.add{padding:8px 10px}
.prow .pdel{flex:none; width:36px; height:36px; margin-right:6px; border-radius:999px; display:grid; place-items:center; font-size:22px; line-height:1; color:#ff8fa3; background:rgba(255,45,85,.1); border:1px solid rgba(255,45,85,.4)}
.prow .pdel:active{transform:scale(.9)}
.plist.dense .prow .pdel{width:30px; height:30px; font-size:18px; margin-right:4px}

/* ---------- cricket ---------- */
.crk{padding:14px; display:flex; min-height:0; overflow:hidden}
.crk-grid{flex:1; display:grid; grid-template-columns:var(--cols); grid-template-rows:auto repeat(7, minmax(0,1fr)); gap:4px 8px; min-height:0}
.crk-head{display:flex; flex-direction:column; align-items:center; gap:2px; padding:6px 4px 8px; border-radius:14px; border-bottom:3px solid color-mix(in srgb, var(--pc) 45%, transparent); min-width:0}
.crk-head.on{background:color-mix(in srgb, var(--pc) 16%, transparent); border-bottom-color:var(--pc); box-shadow:0 8px 24px color-mix(in srgb, var(--pc) 22%, transparent)}
.crk-name{display:flex; align-items:center; gap:8px; font-weight:700; font-size:15px; min-width:0; max-width:100%}
.crk-name span:last-child{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.crk-name .avatar{width:26px; height:26px; font-size:12px; border-radius:8px}
.crk-pts{font-family:var(--num); font-size:clamp(26px, 6vh, 56px); line-height:1; background:linear-gradient(180deg,#fffdf0,#ffd766 55%,#e09000); -webkit-background-clip:text; background-clip:text; color:transparent}
.crk-num{display:grid; place-items:center; font-family:var(--num); font-size:clamp(20px, 5vh, 44px); color:#fff; border-radius:12px; background:rgba(120,160,255,.08); transition:opacity .3s}
.crk-cell{display:grid; place-items:center; border-radius:12px; background:rgba(4,7,22,.35); transition:background .3s, opacity .3s; min-height:0; overflow:hidden}
.crk-cell.on{background:rgba(120,160,255,.10)}
.crk-cell .mk{height:78%; max-height:60px; width:auto; filter:drop-shadow(0 0 6px rgba(255,255,255,.25))}
.crk-cell.pop .mk{animation:mkPop .45s cubic-bezier(.2,1.6,.4,1)}
@keyframes mkPop{from{transform:scale(1.8) rotate(-12deg); opacity:.3}}
.crk .dead{opacity:.28}
.crk-num.dead{text-decoration:line-through; text-decoration-thickness:4px}

/* ---------- race ---------- */
.race-wrap{display:grid; grid-template-rows:minmax(0,1fr) auto; gap:10px; min-height:0}
.mm-line{background-size:calc(100% / var(--steps, 21)) 100%}
.lanepop.miss{fill:#dfe6ff; stroke:#1a1030}
.sign.sign-world, .sign.sign-clock{left:12px; top:12px; transform:none; align-items:flex-start}
.sign.sign-world .ropes, .sign.sign-clock .ropes{display:none}
.sign em{display:block; font-style:normal; font-weight:700; font-size:14px; letter-spacing:.06em}
.sign em:empty{display:none}
.sign-world .plate{background:#fff; border:0; border-radius:14px; padding:0 0 10px; min-width:170px; overflow:hidden; box-shadow:0 12px 30px rgba(0,0,0,.45); text-align:left}
.sign-world .plate small{background:#1d4dd8; color:#fff; text-shadow:none; padding:6px 14px; margin-bottom:6px; letter-spacing:.2em}
.sign-world .plate b{background:linear-gradient(180deg,#1d4dd8,#0a1f6a); -webkit-background-clip:text; background-clip:text; filter:none; padding:0 14px}
.sign-world .plate em{color:#0a1f6a; padding:0 14px}
.sign-clock .plate{background:linear-gradient(180deg,#2a1a5a,#140a34); border:3px solid #ffc83a; box-shadow:0 0 24px rgba(255,200,58,.35)}
.sign-clock .plate small{color:#ffe7a3; text-shadow:none}
.scene.theme-world{background:#061634}
.scene.theme-clock{background:#0a0620}
.w-route{fill:none; stroke:#ffffff; stroke-opacity:.55; stroke-width:4; stroke-dasharray:2 14; stroke-linecap:round}
.w-num{font-family:var(--num); font-size:20px; fill:#fff; text-anchor:middle; paint-order:stroke; stroke:#061634; stroke-width:6}
.w-lbl{font-family:var(--ui); font-weight:700; font-size:15px; fill:#bfe9ff; text-anchor:middle; paint-order:stroke; stroke:#061634; stroke-width:5; letter-spacing:.04em}
.w-pulse{fill:none; stroke:#ffd84a; stroke-width:4; opacity:0; transform-box:fill-box; transform-origin:center}
.w-stop.next .w-pulse{animation:wpulse 1.2s ease-out infinite}
.w-stop.next circle:nth-child(2){fill:#ffd84a; stroke:#fff}
@keyframes wpulse{from{opacity:1; transform:scale(.6)} to{opacity:0; transform:scale(1.8)}}
.w-home{animation:homeBob 2.4s ease-in-out infinite alternate}
@keyframes homeBob{to{transform:translateY(-4px)}}
.plane-num{font-family:var(--num); font-size:11px; fill:#fff; text-anchor:middle; dominant-baseline:central}
.plane .plane-body{filter:drop-shadow(0 6px 4px rgba(0,0,0,.35))}
.c-num{font-family:var(--num); font-size:42px; fill:#e8e4ff; text-anchor:middle; dominant-baseline:central; transition:fill .3s}
.c-num.next{fill:#ffd84a; animation:cnum 1s ease-in-out infinite alternate}
@keyframes cnum{to{fill:#fff7d0}}
.c-brand{font-family:var(--num); font-size:16px; letter-spacing:.3em; fill:#8f86c8; text-anchor:middle}
.c-chime{fill:none; stroke:#ffd84a; stroke-width:10; opacity:0; transform-box:fill-box; transform-origin:center}
.c-chime.ring{animation:chime 1.2s ease-out}
@keyframes chime{0%{opacity:1; transform:scale(1)} 100%{opacity:0; transform:scale(1.35)}}
.gear{transform-box:fill-box; transform-origin:center}
.gear.g1{animation:spin 60s linear infinite} .gear.g2{animation:spin 40s linear infinite reverse} .gear.g3{animation:spin 30s linear infinite}
.hand, .hand-num{transform-box:view-box}
.hand:not(.on){opacity:.8}
.hand.on .hand-tip{stroke:#fff; stroke-width:4}

/* ---------- tic tac toe ---------- */
.ttt-wrap{padding:14px; display:grid; grid-template-rows:minmax(0,1fr) auto; gap:10px; justify-items:center; min-height:0}
.ttt-grid{position:relative; height:100%; aspect-ratio:1; max-width:100%; display:grid; grid-template:repeat(3, minmax(0,1fr)) / repeat(3, minmax(0,1fr)); gap:10px; min-height:0}
.ttt-cell{--oc:transparent; position:relative; border-radius:20px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; background:linear-gradient(180deg, rgba(36,56,120,.55), rgba(9,14,38,.85)); border:1px solid var(--edge); overflow:hidden; transition:border-color .3s, box-shadow .3s; min-height:0}
.ttt-cell.live{border-color:rgba(255,216,74,.45)}
.ttt-n{font-family:var(--num); font-size:clamp(22px, 6vh, 52px); line-height:1; color:#fff; position:relative; z-index:1}
.ttt-meters{display:flex; flex-direction:column; gap:4px; position:relative; z-index:1}
.ttt-meter{display:flex; gap:4px}
.ttt-meter i{width:clamp(10px, 1.8vh, 18px); height:6px; border-radius:3px; background:rgba(255,255,255,.14)}
.ttt-meter i.on{background:var(--pc); box-shadow:0 0 8px var(--pc)}
.ttt-own{position:absolute; inset:0; display:grid; place-items:center}
.ttt-cell.owned{background:linear-gradient(160deg, color-mix(in srgb, var(--oc) 55%, #0b1230), color-mix(in srgb, var(--oc) 22%, #070b1e)); border-color:var(--oc); box-shadow:inset 0 0 40px color-mix(in srgb, var(--oc) 40%, transparent)}
.ttt-cell.owned .ttt-n{opacity:.25}
.ttt-cell.owned .ttt-meters{opacity:0}
.ttt-glyph{width:72%; height:72%; overflow:visible}
.ttt-glyph .draw, .ttt-line .draw{fill:none; stroke-width:12; stroke-linecap:round; stroke-dasharray:200; stroke-dashoffset:200; animation:draw .45s ease-out forwards; filter:drop-shadow(0 0 10px rgba(255,255,255,.5))}
.ttt-glyph .d2{animation-delay:.2s}
@keyframes draw{to{stroke-dashoffset:0}}
.ttt-line{position:absolute; inset:0; width:100%; height:100%; pointer-events:none; overflow:visible}
.ttt-line .draw{stroke-width:9; stroke-dasharray:460; stroke-dashoffset:460; animation-duration:.6s}
.ttt-cell.pop{animation:cellPop .35s ease-out}
.ttt-cell.claim{animation:cellClaim .6s cubic-bezier(.2,1.5,.4,1)}
@keyframes cellPop{50%{transform:scale(.96)}}
@keyframes cellClaim{0%{transform:scale(.8)} 100%{transform:scale(1)}}
.ttt-legend{display:flex; gap:18px; font-weight:700}
.ttt-legend span{display:flex; align-items:center; gap:8px}
.ttt-legend b{font-family:var(--num); font-weight:400; font-size:22px; color:var(--pc)}

/* ---------- monsters war ---------- */
.mon-wrap{position:relative; display:grid; min-height:0}
.mon-scene{background:#080418}
.mon-vs{font-family:var(--num); font-size:110px; text-anchor:middle; dominant-baseline:central; opacity:.9}
.beam{transform-box:fill-box; transform-origin:50% 0; animation:beam 6s ease-in-out infinite alternate}
.beam.b2{animation-delay:-2s} .beam.b3{animation-delay:-4s}
@keyframes beam{from{transform:rotate(-8deg)} to{transform:rotate(8deg)}}
.mon-rig{transform-box:fill-box; transform-origin:50% 100%}
.mon .mon-body{transform-box:fill-box; transform-origin:50% 100%; animation:breathe 2.2s ease-in-out infinite alternate}
.mon.turn .mon-body{animation-duration:.9s}
.mon .pupil{animation:look 4s ease-in-out infinite}
.mon .antenna{animation:blink 1.4s steps(2) infinite}
.mon-shadow{fill:rgba(0,0,0,.4)}
@keyframes breathe{to{transform:scale(1.03, .97)}}
@keyframes look{0%,40%{transform:translate(0,0)} 50%,90%{transform:translate(-8px,2px)}}
@keyframes blink{50%{fill:#ff6ad5}}
.mon.lunge .mon-rig{animation:lunge .45s cubic-bezier(.3,1.4,.5,1)}
@keyframes lunge{40%{transform:translateX(70px) scale(1.06)}}
.mon.hurt .mon-rig{animation:hurt .5s linear}
@keyframes hurt{0%,100%{transform:none; filter:none} 15%{transform:translateX(-18px) rotate(-6deg); filter:brightness(3)} 35%{transform:translateX(14px) rotate(4deg); filter:brightness(1.8)} 60%{transform:translateX(-8px)} 80%{transform:translateX(4px)}}
.mon.healing .mon-rig{animation:heal .7s ease-out}
@keyframes heal{40%{filter:drop-shadow(0 0 30px #3cf0a0) brightness(1.3); transform:scale(1.06)}}
.mon.ko .mon-rig{transition:transform .8s cubic-bezier(.5,0,.7,.4), filter .8s; transform:rotate(-75deg) translateY(30px); filter:grayscale(.9) brightness(.6)}
.mon-shot{opacity:0}
.mon-shot.on{opacity:1; filter:drop-shadow(0 0 14px #fff)}
.mon-shot.crit{r:28px}
.lanepop.dmg{fill:#ff5c7a; stroke:#2a0010}
.lanepop.crit{fill:#ffd84a; stroke:#4a2600; font-size:46px}
.lanepop.heal{fill:#7dffc8; stroke:#003a22}
.mon-hud{position:absolute; left:12px; right:12px; top:12px; display:grid; grid-template-columns:1fr 1fr; gap:14px; pointer-events:none}
.mon-hp{padding:10px 12px; border-radius:16px; background:rgba(8,4,24,.72); border:1px solid color-mix(in srgb, var(--pc) 45%, transparent); transition:box-shadow .3s; min-width:0}
.mon-hp.on{box-shadow:0 0 0 2px var(--pc), 0 0 24px color-mix(in srgb, var(--pc) 45%, transparent)}
.mon-hp-top{display:flex; align-items:center; gap:8px; margin-bottom:8px; min-width:0}
.mon-hp.r .mon-hp-top{flex-direction:row-reverse}
.mon-hp-top .avatar{width:28px; height:28px; font-size:13px; border-radius:9px}
.mon-hp-top b{font-size:16px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.mon-hp-top em{font-style:normal; font-size:11px; letter-spacing:.2em; color:var(--muted); font-weight:700}
.mon-hp-top strong{margin-left:auto; font-family:var(--num); font-weight:400; font-size:26px}
.mon-hp.r .mon-hp-top strong{margin-left:0; margin-right:auto}
.mon-bar{position:relative; height:16px; border-radius:999px; background:rgba(255,255,255,.1); overflow:hidden}
.mon-hp.r .mon-bar{transform:scaleX(-1)}
.mon-bar i{position:absolute; left:0; top:0; bottom:0; border-radius:999px}
.mon-bar .lag{background:#fff; opacity:.5; transition:width .9s .55s ease}
.mon-bar .fill{background:linear-gradient(90deg, color-mix(in srgb, var(--pc) 60%, #fff), var(--pc)); box-shadow:0 0 12px var(--pc); transition:width .35s .35s ease}
.mon-hp.low .mon-bar .fill{background:linear-gradient(90deg,#ff9aad,#ff2d55); animation:lowhp .6s ease-in-out infinite alternate}
@keyframes lowhp{to{opacity:.6}}
.mon-targets{position:absolute; left:50%; bottom:14px; transform:translateX(-50%); display:flex; gap:8px; pointer-events:none}
.mt{padding:8px 14px; border-radius:999px; font-weight:700; font-size:13px; letter-spacing:.12em; white-space:nowrap; background:rgba(8,4,24,.8)}
.mt b{font-family:var(--num); font-weight:400; font-size:22px; letter-spacing:0; margin-left:6px}
.mt.atk{border:2px solid #ff3b5c; color:#ffb0c0} .mt.atk b{color:#ff3b5c}
.mt.heal{border:2px dashed #ffffff; color:#eef2ff} .mt.heal b{color:#ffffff}
.mt.crit{border:2px solid #ffd84a; color:#ffeaa0} .mt.crit b{color:#ffd84a; font-size:16px}

/* ---------- results ---------- */
#scr-results{overflow:auto; padding:0 14px 110px}
#scr-results.on{display:block}
.res-body{max-width:1240px; margin:0 auto}
.res-hero{--pc:var(--gold); position:relative; text-align:center; padding:34px 20px 26px}
.res-hero::before{content:""; position:absolute; left:50%; top:-40px; width:min(900px, 120vw); height:340px; transform:translateX(-50%); background:radial-gradient(ellipse at center, color-mix(in srgb, var(--pc) 35%, transparent), transparent 65%); pointer-events:none}
.res-title{position:relative; margin:10px 0 4px; font-family:var(--num); font-weight:400; font-size:clamp(46px, 9vw, 110px); line-height:1; text-wrap:balance}
.res-title::before{content:attr(data-text); position:absolute; left:0; right:0; top:0; color:#4a2600; text-shadow:0 3px 0 #7a4600,0 6px 0 #5a3200,0 9px 0 #3a1f00,0 24px 40px rgba(0,0,0,.7)}
.res-title span{position:relative; background:linear-gradient(180deg,#fffdf0 0%,#ffe690 26%,#ffbe1a 50%,#fff3c0 52%,#f0a000 76%,#ffd766 100%); -webkit-background-clip:text; background-clip:text; color:transparent}
.res-line{position:relative; margin:8px 0 22px; font-size:20px; font-weight:700; color:#fff}
.share-cta{position:relative; display:inline-flex; align-items:center; gap:14px; padding:20px 44px; border-radius:999px; font-family:var(--num); font-size:clamp(22px, 3vw, 30px); letter-spacing:.06em; color:#1a0f00; overflow:hidden;
  background:linear-gradient(180deg,#fff3b0 0%,#ffc83a 45%,#e08a00 100%); box-shadow:0 0 0 2px rgba(255,255,255,.4) inset, 0 12px 34px rgba(255,170,0,.45), 0 0 60px rgba(255,190,40,.35); animation:ctaPulse 2.4s ease-in-out infinite}
.share-cta svg{width:34px; height:34px; position:relative; z-index:1}
.share-cta::after{content:""; position:absolute; inset:0; background:linear-gradient(110deg, transparent 35%, rgba(255,255,255,.6) 50%, transparent 65%); background-size:250% 100%; animation:sheen 2.4s ease-in-out infinite}
.share-cta:active{transform:scale(.97)}
@keyframes ctaPulse{50%{box-shadow:0 0 0 2px rgba(255,255,255,.4) inset, 0 12px 44px rgba(255,170,0,.6), 0 0 90px rgba(255,190,40,.5)}}
.res-grid{display:grid; grid-template-columns:repeat(12, minmax(0,1fr)); gap:14px}
.res-card{padding:18px 20px; min-width:0}
.res-card h3{margin:0 0 12px; font-size:12px; letter-spacing:.24em; text-transform:uppercase; color:var(--muted)}
.res-stand{grid-column:span 5}
.res-table-card{grid-column:span 7}
.res-chart-card{grid-column:span 7}
.res-heat-card{grid-column:span 5}
.res-awards{grid-column:span 12}
.stand-row{display:grid; grid-template-columns:34px 40px minmax(0,1fr) auto; align-items:center; gap:10px; padding:10px 12px; margin-bottom:8px; border-radius:16px; background:rgba(120,160,255,.06); border:1px solid rgba(120,160,255,.12)}
.stand-row.gold{background:linear-gradient(90deg, rgba(255,197,61,.22), rgba(120,160,255,.04)); border-color:rgba(255,197,61,.5)}
.stand-row .rank{font-family:var(--num); font-size:24px; text-align:center; color:#6f7cab}
.stand-row.gold .rank{color:#ffc53d} .stand-row.silver .rank{color:#dfe6ff} .stand-row.bronze .rank{color:#e0a070}
.st-name{min-width:0} .st-name b{display:block; font-size:18px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.st-name small, .st-key small{display:block; color:var(--muted); font-size:12px; font-weight:600}
.st-key{text-align:right; font-family:var(--num); font-size:24px; color:var(--pc); font-variant-numeric:tabular-nums}
.st-key small{font-family:var(--ui); letter-spacing:.08em; text-transform:uppercase; font-size:10px}
.res-table-scroll{overflow-x:auto}
.res-table{width:100%; border-collapse:collapse; font-variant-numeric:tabular-nums}
.res-table th{padding:8px 10px; font-size:14px; text-align:center; white-space:nowrap; border-bottom:3px solid var(--pc)}
.res-table th .dot{display:inline-block; width:10px; height:10px; border-radius:50%; background:var(--pc); margin-right:6px}
.res-table td{padding:9px 10px; text-align:center; font-weight:700; border-bottom:1px solid rgba(120,160,255,.1)}
.res-table td:first-child{text-align:left; color:var(--muted); font-weight:600; white-space:nowrap}
.res-table tr.key td:not(:first-child){font-family:var(--num); font-weight:400; font-size:20px}
.res-chart svg{width:100%; height:240px; overflow:visible}
.res-chart .grid{stroke:rgba(140,175,255,.14); stroke-width:1}
.res-chart .axis{fill:var(--muted); font-size:12px; font-weight:600; font-family:var(--ui)}
.heat-tabs{display:flex; flex-wrap:wrap; gap:6px; margin-bottom:10px}
.heat-tabs button{padding:6px 12px; min-height:36px; border-radius:999px; font-weight:700; font-size:13px; border:1px solid color-mix(in srgb, var(--pc) 45%, transparent)}
.heat-tabs button.on{background:var(--pc); color:#08102a}
.heat-board{position:relative; aspect-ratio:1; max-height:340px; margin:0 auto}
svg.board.heat .seg{opacity:.3}
.heat-seg{pointer-events:none}
.aw-row{display:flex; align-items:center; gap:14px; padding:10px 14px; margin-bottom:8px; border-radius:14px; background:rgba(120,160,255,.06); border-left:5px solid var(--pc); font-weight:700}
.aw-t{font-family:var(--num); font-weight:400; font-size:20px; color:#ffd766; letter-spacing:.03em}
.aw-row small{margin-left:auto; color:var(--muted)}
.res-actions{position:fixed; left:0; right:0; bottom:0; z-index:5; display:none; justify-content:center; gap:12px; padding:14px; background:linear-gradient(0deg, rgba(4,7,22,.96) 55%, transparent)}
#scr-results.on .res-actions{display:flex}
.res-actions .pill{min-width:150px; justify-content:center; font-size:17px}

/* share + preview sheets */
.share-sheet{width:min(560px, 100%)}
.share-ico{width:56px; height:56px; border-radius:16px; display:grid; place-items:center; color:#1a0f00; background:linear-gradient(180deg,#fff3b0,#ffc83a 50%,#e08a00)}
.share-ico svg{width:30px; height:30px}
.share-field{display:flex; gap:8px}
.share-field input{flex:1; min-width:0; padding:14px 22px; border-radius:999px; font:600 20px var(--ui); color:#fff; background:rgba(4,7,22,.65); border:2px solid rgba(255,200,58,.5); outline:none}
.share-field input:focus{box-shadow:0 0 0 4px rgba(255,200,58,.25)}
.chips{display:flex; flex-wrap:wrap; gap:8px; align-items:center}
.chips:empty{display:none}
.chips .eyebrow{width:100%}
.chip{display:inline-flex; align-items:center; gap:8px; padding:8px 14px; min-height:40px; border-radius:999px; font-weight:700; font-size:14px; background:rgba(120,160,255,.1); border:1px solid rgba(120,160,255,.3)}
.chip.on{background:rgba(255,200,58,.18); border-color:rgba(255,200,58,.6); color:#ffe7a3}
.chip span{font-size:18px; line-height:1; opacity:.7}
.share-status{min-height:22px; font-weight:600; color:#cfdaff}
.share-status.err{color:#ff9aad}
.share-status.ok{color:#7dffc8}
.preview-sheet{width:min(760px, 100%); height:min(90vh, 1000px); padding:16px; gap:12px}
.preview-head{display:flex; align-items:center; gap:12px}
.preview-head > div{flex:1; min-width:0}
.preview-head b{display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
#previewFrame{flex:1; width:100%; border:0; border-radius:16px; background:#05081a}

@media (orientation:portrait){
  .res-stand, .res-table-card, .res-chart-card, .res-heat-card, .res-awards{grid-column:span 12}
  .turnbar .slot{width:clamp(64px, 16vw, 100px); height:44px; font-size:18px}
  .mon-vs{font-size:80px}
  .mon-hp-top b{font-size:14px}
  .mt{font-size:11px; padding:6px 10px}
  .crk-cell .mk{max-height:44px}
}

/* ---------- menu fit: START never leaves the panel; cards center in their column ---------- */
.setup{min-height:0; overflow:hidden}
.setup-scroll{flex:1; min-height:0; overflow-y:auto; display:flex; flex-direction:column; gap:14px; margin:0 -6px; padding:2px 6px}
.setup .start{margin-top:0; flex:none}
.cards{align-content:center; justify-content:center; min-height:0; height:100%}
.cards .card{width:100%; max-width:min(240px, calc((100vh - 230px) * .62))}
.cards{justify-items:center}
@media (max-height:720px) and (orientation:landscape){
  .m-head{padding:0 6px}
  .logo-mark{width:38px; height:38px} .logo-word{font-size:23px}
  .setup{padding:14px; gap:10px}
  .setup h4{font-size:19px}
  .rpill button{min-height:44px; font-size:22px}
  .setup .start{padding:13px; font-size:22px}
  .plist.dense .prow .pedit{min-height:36px}
  .card .meta{padding:10px 12px 12px}
  .card h3{font-size:19px}
}
.card .meta{flex:1}
.res-grid{align-items:start}
.sign-world .plate b, .sign-clock .plate b{font-size:clamp(40px, 8vh, 64px)}
.pcards{grid-template-columns:repeat(var(--n, 4), minmax(0,1fr))}

/* board target extras: x2 / x3 ring labels, player labels, tinted and striped wedges */
.tgt-mult{font-family:var(--num); font-size:15px; fill:#fff; text-anchor:middle; dominant-baseline:central; paint-order:stroke; stroke:#050818; stroke-width:4; pointer-events:none}
.tgt-label{font-family:var(--num); font-size:17px; fill:#fff; text-anchor:middle; dominant-baseline:central; paint-order:stroke; stroke:#050818; stroke-width:5; pointer-events:none}
.tgt-fill{pointer-events:none}
.tgt-outline.dash{stroke-dasharray:10 6}

/* monsters war, 2-3 players */
.mon-hud{grid-template-columns:repeat(var(--n, 2), minmax(0,1fr))}
.mon-hp.ko{opacity:.45}
.mt.lap{display:flex; align-items:center; gap:8px; border:2px solid #fff; color:#fff}
.mt.lap i{width:26px; height:14px; border-radius:4px; background:repeating-linear-gradient(45deg, #ffc53d 0 5px, #ff4fb4 5px 10px)}
.mon-shot.on{filter:drop-shadow(0 0 12px #fff)}

/* ---------- two line ---------- */
.tl-wrap{padding:14px; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:14px; align-items:center; min-height:0; background:radial-gradient(ellipse at 40% 40%, rgba(255,190,40,.18), transparent 65%), linear-gradient(180deg, rgba(36,56,120,.50), rgba(9,14,38,.82))}
.tl-grid{position:relative; height:100%; max-height:100%; aspect-ratio:1; max-width:100%; justify-self:center; display:grid; grid-template:repeat(5, minmax(0,1fr)) / repeat(5, minmax(0,1fr)); gap:7px; min-height:0}
.tl-box{--oc:transparent; position:relative; display:grid; place-items:center; border-radius:12px; min-height:0; overflow:hidden;
  background:linear-gradient(160deg, #ffffff 0%, #dfe5f2 45%, #aab4cc 100%); box-shadow:inset 0 -4px 0 rgba(0,0,0,.18), inset 0 2px 0 rgba(255,255,255,.9), 0 4px 10px rgba(0,0,0,.35)}
.tl-box .tl-n{font-family:var(--num); font-size:clamp(18px, 5.2vh, 44px); line-height:1; color:#15203d; position:relative; z-index:1}
.tl-box.star{background:linear-gradient(160deg, #fffaf0 0%, #ffe8a8 50%, #e8b440 100%)}
.tl-box.star .tl-n{color:#b86a00; text-shadow:0 0 12px rgba(255,200,60,.8)}
.tl-box.owned{background:linear-gradient(160deg, color-mix(in srgb, var(--oc) 55%, #fff) 0%, var(--oc) 50%, color-mix(in srgb, var(--oc) 60%, #000) 100%); box-shadow:inset 0 -4px 0 rgba(0,0,0,.25), inset 0 2px 0 rgba(255,255,255,.55), 0 0 16px color-mix(in srgb, var(--oc) 55%, transparent)}
.tl-box.owned .tl-n{color:#fff; text-shadow:0 2px 0 rgba(0,0,0,.35)}
.tl-crack{position:absolute; inset:0; opacity:0; background:linear-gradient(115deg, transparent 44%, rgba(10,10,20,.75) 45%, rgba(10,10,20,.75) 48%, transparent 49%), linear-gradient(35deg, transparent 58%, rgba(10,10,20,.6) 59%, rgba(10,10,20,.6) 61%, transparent 62%)}
.tl-box.cracked .tl-crack{opacity:1}
.tl-box.flip{animation:tlFlip .5s ease-out}
.tl-box.hit{animation:tlHit .4s linear}
.tl-box.bump{animation:bump .4s cubic-bezier(.2,1.6,.4,1)}
@keyframes tlFlip{0%{transform:perspective(400px) rotateY(0)} 50%{transform:perspective(400px) rotateY(90deg) scale(1.08)} 100%{transform:perspective(400px) rotateY(0)}}
@keyframes tlHit{20%{transform:translateX(-6px) rotate(-4deg)} 40%{transform:translateX(5px) rotate(3deg)} 60%{transform:translateX(-3px)} 80%{transform:translateX(2px)}}
.tl-lines{position:absolute; inset:0; width:100%; height:100%; pointer-events:none; overflow:visible; z-index:2}
.tl-line{fill:none; stroke-width:12; stroke-linecap:round; opacity:.9; filter:drop-shadow(0 0 8px rgba(255,255,255,.7)); stroke-dasharray:720; stroke-dashoffset:720; animation:draw .6s ease-out forwards}
.tl-line.win{stroke-width:16; animation:draw .6s ease-out forwards, tlWin .6s .6s ease-in-out infinite alternate}
@keyframes tlWin{to{opacity:.55}}
.tl-side{display:flex; flex-direction:column; gap:10px; width:clamp(140px, 16vw, 200px)}
.tl-lc{display:grid; grid-template-columns:auto minmax(0,1fr); align-items:center; gap:6px 8px; padding:10px 12px; border-radius:16px; background:rgba(4,7,22,.45); border:1px solid color-mix(in srgb, var(--pc) 40%, transparent); transition:box-shadow .3s}
.tl-lc.on{box-shadow:0 0 0 2px var(--pc), 0 0 22px color-mix(in srgb, var(--pc) 45%, transparent)}
.tl-lc .avatar{width:28px; height:28px; font-size:13px; border-radius:9px}
.tl-lc b{white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.tl-pips{display:flex; gap:6px}
.tl-pips i{width:36px; height:12px; border-radius:6px; background:rgba(255,255,255,.14)}
.tl-pips i.lit{background:var(--pc); box-shadow:0 0 10px var(--pc)}
.tl-lc small{font-size:11px; font-weight:700; letter-spacing:.2em; color:var(--muted)}
.tl-rule{font-size:13px; font-weight:600; color:var(--muted); text-align:center}
.tl-rule b{color:#ffd766}
@media (orientation:portrait){ .tl-wrap{grid-template-columns:1fr; grid-template-rows:minmax(0,1fr) auto} .tl-side{flex-direction:row; width:auto; align-items:center} .tl-lc{flex:1} .tl-rule{display:none} }
.tl-pips, .tl-lc small{grid-column:1/-1}
.tl-lc b{text-align:left}
.mon-hud[style*="--n:4"] .mon-hp-top em{display:none}
.mon-hud[style*="--n:4"] .mon-hp-top strong{font-size:22px}
.mon-hud[style*="--n:4"] .mon-hp{padding:8px 10px}

/* setup: pick-one options (01 start rule) and the records round note */
.ochoice{display:flex; flex-direction:column; gap:6px}
.rpill.small button{min-height:42px; font-family:var(--ui); font-weight:700; font-size:15px; letter-spacing:.02em}
.rec-note{margin-top:2px; text-align:center; font-size:13px; font-weight:600; color:#ffd27a}