/* Mindclash: bright, friendly pixel-game UI. Cream panels, ink outlines with notched pixel corners, lime accents.
   Fonts: Nunito (bold, very readable) for text, Lilita One (chunky, clear game titles) for titles and big numbers. */
:root {
  --ink: #1d1b2f; --ink-2: #3a3656; --paper: #fff8e4; --paper-2: #f4e9c8; --paper-3: #e8d9ad;
  --lime: #d4ff1f; --lime-d: #92b800; --sky: #5ec8ff; --sky-d: #2f8fd0; --pink: #ff6fae; --gold: #ffc53d; --gold-d: #d68a00;
  --red: #ff5263; --violet: #9b6bff; --green: #3fcf6a; --muted: #6d6987; --text: #1d1b2f;
  --b: 3px;
  --font: 'Nunito', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --pix: 'Lilita One', 'Nunito', system-ui, sans-serif;
  --ps: 0 calc(-1 * var(--b)) 0 0 var(--ink), 0 var(--b) 0 0 var(--ink), calc(-1 * var(--b)) 0 0 0 var(--ink), var(--b) 0 0 0 var(--ink);
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; min-width: 0; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #8fd6ff; color: var(--text); font: 700 16px/1.3 var(--font); letter-spacing: 0; user-select: none; }
#view, #view canvas { position: fixed; inset: 0; display: block; }
img { image-rendering: pixelated; }
.muted { color: var(--muted); } .small { font-size: 14px; } .err { color: var(--red); font-size: 15px; min-height: 20px; }
.ellip { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 60vw; }
h2 { font: 400 31px/1 var(--font); margin: 0; letter-spacing: .03em; }
h3 { font: 400 23px/1 var(--font); margin: 0; }
a { color: var(--sky-d); }
b { font-weight: 900; }
.shadow { color: #fff; text-shadow: 3px 3px 0 var(--ink), -2px -2px 0 var(--ink), 2px -2px 0 var(--ink), -2px 2px 0 var(--ink); }
.px { border: 0; border-radius: 0; box-shadow: var(--ps), 0 calc(var(--b) + 5px) 0 0 rgba(29, 27, 47, .28); }

.logo { display: flex; align-items: center; justify-content: center; gap: .12em; font: 700 clamp(44px, 7vw, 84px)/.9 var(--pix); color: #fff; letter-spacing: .04em; white-space: nowrap;
  text-shadow: 0 6px 0 var(--ink), 4px 4px 0 var(--ink), -3px -3px 0 var(--ink), 3px -3px 0 var(--ink), -3px 3px 0 var(--ink); }
.logo span { color: var(--lime); }
.logo img { height: .85em; filter: drop-shadow(3px 4px 0 var(--ink)); animation: bob 2.4s ease-in-out infinite; }
@keyframes bob { 50% { transform: translateY(-6px) rotate(-4deg); } }

/* buttons */
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; letter-spacing: inherit; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 8px 20px; font-size: 19px; line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
  background: var(--paper); color: var(--ink); transition: transform .06s, filter .12s;
  box-shadow: var(--ps), inset 0 -5px 0 0 var(--paper-3), 0 8px 0 0 rgba(29,27,47,.3); }
.btn:hover { filter: brightness(1.05); transform: translateY(-1px); }
.btn:active { transform: translateY(3px); box-shadow: var(--ps), inset 0 -2px 0 0 var(--paper-3), 0 4px 0 0 rgba(29,27,47,.3); }
.btn.primary { background: var(--lime); box-shadow: var(--ps), inset 0 -5px 0 0 var(--lime-d), 0 8px 0 0 rgba(29,27,47,.3); }
.btn.big { padding: 11px 28px; font-size: 23px; }
.btn.small { padding: 5px 13px; font-size: 16px; }
.btn.wide { width: 100%; }
.btn:disabled { filter: grayscale(.8) brightness(.95); opacity: .6; pointer-events: none; }
.iconbtn { position: relative; width: 52px; height: 52px; background: var(--paper); display: grid; place-items: center; font-size: 20px; flex: none; }
.iconbtn img { width: 38px; height: 38px; object-fit: contain; }
.iconbtn.small { width: 38px; height: 38px; font-size: 16px; }
.iconbtn:hover { background: #fff; }
.badge { position: absolute; top: -8px; right: -8px; min-width: 22px; height: 22px; padding: 0 5px; background: var(--red); color: #fff; font: 400 14px/22px var(--font); font-style: normal; display: none; box-shadow: 0 0 0 3px var(--ink); }
.badge.on { display: block; }
.seg { display: inline-flex; gap: 3px; background: var(--paper-2); padding: 4px; }
.seg button { padding: 3px 12px; font-size: 17px; color: var(--muted); white-space: nowrap; }
.seg button.on { background: var(--ink); color: var(--lime); }

/* screens + panels */
.screen { position: fixed; inset: 0; z-index: 10; display: none; }
.screen.on { display: block; animation: fade .25s ease; }
@keyframes fade { from { opacity: 0; } }
.panel { background: var(--paper); padding: 18px; }
.center-panel { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(560px, calc(100% - 32px)); max-height: calc(100% - 32px); overflow: auto; display: flex; flex-direction: column; gap: 12px; }
.page { position: absolute; inset: 0; padding: max(16px, env(safe-area-inset-top)) 18px 24px; display: flex; flex-direction: column; gap: 18px; overflow: auto; }
.page.narrow { max-width: 820px; margin: 0 auto; }
.pagehead { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 14px; }
.pagehead h2 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.label { font-size: 18px; letter-spacing: .06em; text-transform: uppercase; margin: 6px 0; }
.field { display: flex; flex-direction: column; gap: 6px; font-size: 17px; }
input[type=text], input:not([type]) { background: #fff; color: var(--ink); border: var(--b) solid var(--ink); padding: 8px 10px; font: 400 18px var(--font); letter-spacing: .03em; outline: none; width: 100%; }
input:focus { background: #fbffe6; }
input[type=range] { width: 180px; accent-color: var(--ink); }
.row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 2px dashed var(--paper-3); font-size: 18px; }
.row:last-child { border: 0; }
.tag { font-style: normal; font-size: 14px; padding: 2px 8px; background: var(--paper-3); color: var(--ink); letter-spacing: .06em; white-space: nowrap; }
.tag.lime { background: var(--lime); } .tag.sky { background: var(--sky); }

/* boot + login */
.boot, .queue { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 18px; text-align: center; padding: 16px; }
/* start screen: logo at the top, bar + button at the bottom, so the 3 Minds in the plaza stay clear */
.boot { place-content: stretch; grid-template-rows: auto 1fr auto auto; gap: 10px; padding: max(18px, 4vh) 16px max(22px, 6vh); }
.boot .logo { font-size: clamp(34px, 9vw, 56px); }
.boot .bar { align-self: end; }
.boot .tapstart { margin-top: 0; }
.bootsite { position: absolute; top: 12px; right: 12px; z-index: 2; padding: 6px 12px; background: rgba(23, 18, 42, .7); color: #fff; font-weight: 900; font-size: 14px; text-decoration: none; box-shadow: 0 0 0 2px #000; }
.bootsite:hover { background: rgba(23, 18, 42, .9); }
.boot .bar { width: min(320px, 70vw); height: 18px; background: var(--paper); padding: 3px; }
.boot .bar i { display: block; height: 100%; width: 0; background: repeating-linear-gradient(90deg, var(--lime) 0 12px, var(--lime-d) 12px 14px); transition: width .3s; }
.login { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(500px, calc(100% - 32px)); max-height: calc(100% - 32px); overflow: auto; display: flex; flex-direction: column; gap: 12px; text-align: center; padding: 26px 22px; }
.login .logo { font-size: clamp(39px, 12vw, 61px); }
.tagline { margin: 0 0 4px; font-size: 20px; color: var(--ink-2); }
.pitch { list-style: none; padding: 0; margin: 2px 0 10px; text-align: left; display: grid; gap: 10px; font-size: 16px; }
.pitch li { display: grid; grid-template-columns: 40px 1fr; gap: 10px; align-items: center; }
.pitch img { width: 40px; height: 40px; object-fit: contain; }
.fine { font-size: 14px; color: var(--muted); margin: 6px 0 0; }

/* ---------- lobby ---------- */
.topbar { position: absolute; top: max(14px, env(safe-area-inset-top)); left: 16px; right: 16px; display: flex; justify-content: space-between; align-items: center; z-index: 3; gap: 12px; }
.me { display: flex; gap: 10px; align-items: center; padding: 5px 16px 5px 5px; background: var(--paper); text-align: left; max-width: min(360px, 60vw); }
.me img { width: 50px; height: 50px; background: var(--paper-3); flex: none; }
.me-txt { min-width: 0; }
.me b { display: block; font-size: 20px; line-height: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.me-txt > span { display: block; font-size: 15px; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbtns { display: flex; gap: 14px; }
.lobby { position: absolute; inset: 82px 16px max(16px, env(safe-area-inset-bottom)); display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; pointer-events: none; }
.lobby > * { pointer-events: auto; }
.col-play { container-type: inline-size; width: min(400px, 34vw); display: flex; flex-direction: column; gap: 16px; max-height: 100%; overflow: auto; padding: 4px 8px 14px 4px; }
.hub-logo { justify-content: flex-start; font-size: clamp(26px, 12cqw, 52px); margin: 0 0 2px; }
.mode { position: relative; min-height: 96px; padding: 10px 12px; text-align: left; display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; width: 100%;
  background: var(--bg) center / cover, var(--paper); transition: transform .1s; }
.mode::before { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 25%, rgba(29,27,47,.82)); }
.mode:hover { transform: translateY(-3px); }
.mode.big { min-height: 150px; }
.mode-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.mode.soon { min-height: 80px; filter: saturate(.7); }
.mode.soon::after { content: '🔒'; position: absolute; right: 8px; top: 6px; font-size: 17px; }
.mode-txt { position: relative; color: #fff; text-shadow: 2px 2px 0 var(--ink), -1px -1px 0 var(--ink); min-width: 0; }
.mode-txt b { display: block; font-size: 23px; line-height: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mode.big .mode-txt b { font-size: 34px; }
.mode-txt span { display: block; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mode .tag { position: absolute; top: 10px; right: 10px; box-shadow: 0 0 0 3px var(--ink); }
.mode-ico { position: absolute; left: 10px; top: 10px; width: 50px; filter: drop-shadow(2px 3px 0 var(--ink)); }
.guest-note { font-size: 15px; background: #fff3c4; padding: 10px 12px; display: none; }
.col-board { width: min(430px, 33vw); height: 100%; display: flex; flex-direction: column; gap: 10px; padding: 14px;
  background: linear-gradient(180deg, #fffdf3, var(--paper) 30%); }
.col-board::before { content: ''; position: absolute; left: 10px; right: 10px; top: -10px; height: 10px; background: repeating-linear-gradient(90deg, var(--gold) 0 14px, var(--gold-d) 14px 28px); box-shadow: 0 0 0 3px var(--ink); }
.col-board { position: relative; }
img.vi { width: .9em; height: .9em; object-fit: contain; vertical-align: -.1em; margin-right: 4px; image-rendering: pixelated; }
.podium { display: grid; grid-template-columns: 1fr 1.15fr 1fr; gap: 8px; align-items: end; padding: 22px 2px 0; }
.pod { position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 0; cursor: pointer; text-align: center; }
.pod.open { cursor: default; }
.pod-crown { position: absolute; top: -26px; width: 40px; z-index: 2; animation: bob 2.4s ease-in-out infinite; filter: drop-shadow(2px 3px 0 var(--ink)); }
.pod-pfp { width: 64px; height: 64px; display: grid; place-items: center; background: var(--paper-3); box-shadow: 0 0 0 3px var(--ink); font-size: 31px; color: var(--muted); }
.pod.p1 .pod-pfp { width: 82px; height: 82px; box-shadow: 0 0 0 3px var(--ink), 0 0 0 7px var(--gold); }
.pod-pfp img { width: 100%; height: 100%; }
.pod.open .pod-pfp { background: repeating-linear-gradient(45deg, var(--paper-2) 0 6px, var(--paper-3) 6px 12px); }
.pod-nm { max-width: 100%; font-size: 16px; line-height: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 4px; }
.pod-vl { font-size: 16px; color: var(--ink-2); white-space: nowrap; }
.pod.open .pod-nm, .pod.open .pod-vl { color: var(--muted); }
.pod-base { width: 100%; display: grid; place-items: center; color: #fff; font-size: 27px; line-height: 1; box-shadow: 0 0 0 3px var(--ink), inset 0 -6px 0 rgba(0,0,0,.18), inset 0 4px 0 rgba(255,255,255,.35);
  text-shadow: 2px 2px 0 var(--ink); margin-top: 6px; }
.pod.p1 .pod-base { height: 66px; background: var(--gold); } .pod.p2 .pod-base { height: 46px; background: #b9c2d6; } .pod.p3 .pod-base { height: 32px; background: #e0935c; }
.pod.mine-row .pod-nm { color: #3a9a00; }
.pod:not(.open):hover .pod-pfp { transform: translateY(-3px); }
.board-head { display: flex; align-items: center; gap: 10px; }
.board-head img { width: 40px; } .board-head h3 { flex: 1; }
.board-list { list-style: none; margin: 0; padding: 0; overflow: auto; display: flex; flex-direction: column; gap: 4px; min-height: 0; flex: 1; }
.brow { display: grid; grid-template-columns: 34px 40px 1fr auto; gap: 8px; align-items: center; padding: 4px 6px; background: var(--paper-2); cursor: pointer; font-size: 17px; }
.brow:hover { background: #fff; }
.brow .rk { text-align: center; font-size: 19px; color: var(--muted); }
.brow:nth-child(1) .rk { color: var(--gold-d); } .brow:nth-child(2) .rk { color: #8a8fa0; } .brow:nth-child(3) .rk { color: #c0723f; }
.brow img { width: 40px; height: 40px; box-shadow: 0 0 0 2px var(--ink); background: var(--paper-3); }
.brow .nm { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.brow .vl { font-size: 19px; white-space: nowrap; }
.brow.mine-row { background: #f3ffc2; }
.board-me .brow { box-shadow: 0 0 0 3px var(--lime-d); }
.board-empty { color: var(--muted); padding: 10px; font-size: 16px; }
#tags { position: fixed; inset: 0; z-index: 9; pointer-events: none; }
.nametag { position: absolute; transform: translate(-50%, -100%); background: var(--paper); padding: 1px 8px; font-size: 15px; white-space: nowrap; box-shadow: var(--ps); }
.nametag i { font-style: normal; color: var(--muted); }
.bubble { position: absolute; transform: translate(-50%, -100%); background: #fff; padding: 4px 12px; font-size: 17px; white-space: nowrap; box-shadow: var(--ps), 0 6px 0 rgba(29,27,47,.25); animation: pop2 .3s cubic-bezier(.3,1.6,.5,1); }
.bubble::after { content: ''; position: absolute; left: 50%; bottom: -9px; width: 10px; height: 10px; background: #fff; transform: translateX(-50%) rotate(45deg); box-shadow: 3px 3px 0 var(--ink); }
@keyframes pop2 { from { transform: translate(-50%, -60%) scale(.4); opacity: 0; } }

/* prep */
.mindgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 14px; padding: 6px; }
.mindgrid.big { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); max-height: 46vh; overflow: auto; }
.mind { position: relative; padding: 4px; background: var(--paper-2); cursor: pointer; box-shadow: 0 0 0 3px var(--paper-3); transition: transform .08s; }
.mind:hover { transform: translateY(-2px); }
.mind img { width: 100%; aspect-ratio: 1; display: block; }
.mind .tag { position: absolute; left: 7px; bottom: 7px; font-size: 13px; padding: 0 6px; background: var(--ink); color: #fff; }
.mind .order { position: absolute; top: -10px; right: -10px; width: 30px; height: 30px; background: var(--lime); color: var(--ink); font-size: 17px; display: none; place-items: center; box-shadow: 0 0 0 3px var(--ink); }
.mind.on { box-shadow: 0 0 0 3px var(--ink), 0 0 0 7px var(--lime); background: #f6ffd0; } .mind.on .order { display: grid; }
.prep-foot { display: flex; gap: 16px; align-items: center; justify-content: flex-end; flex-wrap: wrap; padding-bottom: 8px; }

/* queue */
.radar { position: relative; width: 170px; height: 170px; display: grid; place-items: center; }
.radar i { position: absolute; inset: 0; border: 4px solid #fff; border-radius: 50%; opacity: 0; animation: ping 2.4s infinite; }
.radar i:nth-child(2) { animation-delay: .8s; } .radar i:nth-child(3) { animation-delay: 1.6s; }
@keyframes ping { from { transform: scale(.4); opacity: .9; } to { transform: scale(1.4); opacity: 0; } }
.radar img { width: 100px; height: 100px; box-shadow: 0 0 0 4px var(--ink), 0 0 0 8px var(--lime); }
.qmsg { background: var(--paper); padding: 8px 14px; margin: 0; font-size: 17px; }

/* ---------- duel ---------- */
.duel-top { position: absolute; top: max(10px, env(safe-area-inset-top)); left: 12px; right: 12px; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 12px; align-items: start; pointer-events: none; }
.plate { display: flex; gap: 10px; align-items: center; background: var(--paper); padding: 6px 8px; max-width: 400px; }
.rv-side { justify-self: end; text-align: right; }
.pfp { width: 56px; height: 56px; flex: none; background: var(--paper-3); }
.plate .info { flex: 1; min-width: 0; }
.plate b { font-size: 20px; line-height: 1; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stars { display: flex; gap: 3px; margin-top: 4px; } .rv-side .stars { justify-content: flex-end; }
.stars img { width: 24px; height: 22px; object-fit: contain; } .stars img.off { filter: grayscale(1) brightness(.7); opacity: .35; }
.pts { text-align: center; background: var(--ink); color: var(--lime); padding: 3px 9px; min-width: 56px; flex: none; }
.pts b { font-size: 25px; line-height: 1; } .pts span { font-size: 12px; letter-spacing: .1em; color: #c9c5e0; }
.mid { text-align: center; min-width: 100px; }
.roundlbl { font-size: 23px; line-height: 1; letter-spacing: .06em; white-space: nowrap; }
.timer { position: relative; width: 60px; height: 60px; margin: 4px auto 0; }
.timer svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.timer circle { fill: var(--paper); stroke: var(--ink); stroke-width: 6; }
.timer circle + circle { fill: none; stroke: var(--green); stroke-width: 4; stroke-dasharray: 107; transition: stroke-dashoffset .25s linear, stroke .3s; }
.timer span { position: absolute; inset: 0; display: grid; place-items: center; font-size: 23px; }
.timer.low circle + circle { stroke: var(--red); } .timer.low span { color: var(--red); animation: tick .5s steps(2) infinite; }
@keyframes tick { 50% { transform: scale(1.15); } }
.prize { position: absolute; left: 50%; top: calc(max(10px, env(safe-area-inset-top)) + 104px); transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none; }
.crownbox { position: relative; width: 112px; height: 94px; background: radial-gradient(circle at 50% 45%, #fffbe0, var(--paper) 70%); display: grid; place-items: center; }
.crownbox img { position: absolute; width: 96px; top: 2px; left: 8px; filter: drop-shadow(0 3px 0 rgba(29,27,47,.35)); }
.crownbox b { position: relative; top: 14px; font-size: 41px; line-height: 1; color: #fff; text-shadow: 3px 3px 0 var(--ink), -2px -2px 0 var(--ink), 2px -2px 0 var(--ink), -2px 2px 0 var(--ink); }
.crownbox.new { animation: drop .45s cubic-bezier(.3,1.6,.5,1); }
@keyframes drop { from { transform: translateY(-40px) scale(.6); opacity: 0; } }
.potline { background: var(--gold); padding: 2px 10px; font-size: 16px; display: none; white-space: nowrap; }
.potline.on { display: block; animation: drop .4s; }
.crownsleft { display: flex; gap: 5px; }
.crownsleft i { font-style: normal; width: 28px; height: 28px; display: grid; place-items: center; font-size: 17px; background: var(--paper); color: var(--ink); box-shadow: 0 0 0 2px var(--ink); }
.crownsleft i.now { background: var(--gold); transform: translateY(-3px); }
.rivalinfo { position: absolute; right: 12px; top: calc(max(10px, env(safe-area-inset-top)) + 90px); background: var(--paper); padding: 8px 10px; display: flex; flex-direction: column; gap: 6px; font-size: 15px; pointer-events: none; }
.ri-row { display: flex; align-items: center; gap: 8px; justify-content: space-between; } .ri-row > span { color: var(--muted); white-space: nowrap; }
.minis, .minispells { display: flex; gap: 3px; }
.minis i { font-style: normal; width: 22px; height: 28px; display: grid; place-items: center; font-size: 16px; background: #fff; box-shadow: 0 0 0 2px var(--ink); }
.minis i.used { background: var(--paper-3); color: #b7ab86; box-shadow: 0 0 0 2px #b7ab86; text-decoration: line-through; }
.minispells img { width: 28px; height: 28px; object-fit: contain; } .minispells img.used { filter: grayscale(1); opacity: .3; }
.ri-lock { display: none; background: var(--lime); text-align: center; padding: 1px 6px; animation: drop .3s; } .rivalinfo.locked .ri-lock { display: block; }
.duel-hint { background: var(--paper); padding: 3px 14px; font-size: 16px; line-height: 26px; min-height: 32px; text-align: center; pointer-events: none; visibility: hidden; max-width: min(640px, 94vw); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.duel-hint.on { visibility: visible; animation: fade .3s; } .duel-hint.warn { background: #ffe0e3; }
.duel-bottom { position: absolute; left: 0; right: 0; bottom: 0; padding: 10px 70px max(14px, env(safe-area-inset-bottom)); display: flex; flex-direction: column; align-items: center; gap: 12px; }
.handrow { display: flex; align-items: center; justify-content: center; gap: 22px; }
.spells { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.sp { position: relative; display: flex; align-items: center; gap: 8px; padding: 4px 12px 4px 6px; background: var(--paper); text-align: left; transition: transform .08s, background .1s; }
.sp img { width: 42px; height: 42px; object-fit: contain; flex: none; }
.sp b { display: block; font-size: 19px; line-height: 1; white-space: nowrap; } .sp em { font-style: normal; display: block; font-size: 13px; color: var(--muted); white-space: nowrap; }
.sp:hover { transform: translateY(-2px); }
.sp.on { background: var(--lime); transform: translateY(-5px); }
.sp.used { filter: grayscale(1); opacity: .45; pointer-events: none; }
.sp.lockout { opacity: .4; pointer-events: none; }
.sp .lim { position: absolute; top: -12px; right: -6px; font-style: normal; font-size: 12px; background: var(--violet); color: #fff; padding: 0 5px; box-shadow: 0 0 0 2px var(--ink); white-space: nowrap; }
.hand { display: flex; gap: clamp(6px, 1.4vw, 12px); justify-content: center; }
.card { position: relative; width: clamp(44px, 9vw, 76px); aspect-ratio: 5 / 7; background: linear-gradient(180deg, #fff, var(--paper) 60%, var(--paper-2)); display: grid; place-items: center; transition: transform .12s, opacity .2s;
  box-shadow: var(--ps), 0 9px 0 0 rgba(29,27,47,.3); }
.card b { font-size: clamp(28px, 6.5vw, 47px); line-height: 1; color: var(--c); text-shadow: 2px 2px 0 var(--ink), -2px -2px 0 var(--ink), 2px -2px 0 var(--ink), -2px 2px 0 var(--ink); }
.card::before, .card::after { content: attr(data-v); position: absolute; font-size: clamp(11px, 2vw, 14px); color: var(--ink); line-height: 1; }
.card::before { top: 3px; left: 5px; } .card::after { bottom: 3px; right: 5px; transform: rotate(180deg); }
.card:hover { transform: translateY(-6px); }
.card.on { transform: translateY(-18px); background: linear-gradient(180deg, #fbffe0, #efffa0); box-shadow: var(--ps), 0 0 0 7px var(--lime), 0 16px 0 2px rgba(29,27,47,.25); }
.card.gone { visibility: hidden; width: 0; margin: 0 calc(-0.5 * clamp(6px, 1.4vw, 12px)); }
.card.lockout { opacity: .35; pointer-events: none; }
.card.pulse, .sp.pulse { animation: pulse 1s ease-in-out infinite; }
@keyframes pulse { 50% { box-shadow: var(--ps), 0 0 0 8px var(--pink), 0 9px 0 0 rgba(29,27,47,.3); } }
.lockrow { display: flex; flex-direction: column; align-items: center; width: 230px; } .lock { width: 100%; }
.waiting { display: none; padding: 8px 12px; background: var(--paper); font-size: 17px; white-space: nowrap; }
.waiting::after { content: ''; animation: dots 1.2s steps(4) infinite; }
@keyframes dots { 0% { content: ''; } 25% { content: '.'; } 50% { content: '..'; } 75% { content: '...'; } }
#s-duel.locked .spells { visibility: hidden; } #s-duel.locked .lock { display: none; }
#s-duel.locked .card:not(.on) { opacity: .35; pointer-events: none; }
#s-duel.locked .card.on { pointer-events: none; }
#s-duel.locked .waiting { display: block; }
#s-duel.revealing .duel-bottom, #s-duel.revealing .duel-hint { opacity: 0; pointer-events: none; transition: opacity .2s; }
.corner { position: absolute; right: 12px; bottom: max(14px, env(safe-area-inset-bottom)); z-index: 3; }
.chatbtn { position: absolute; left: 12px; bottom: max(14px, env(safe-area-inset-bottom)); z-index: 3; }
.chatpick { position: absolute; left: 12px; bottom: calc(max(14px, env(safe-area-inset-bottom)) + 66px); z-index: 6; background: var(--paper); padding: 10px; width: min(380px, calc(100vw - 24px)); display: none; flex-direction: column; gap: 8px; }
.chatpick.on { display: flex; animation: drop .25s; }
.phrases { display: flex; flex-wrap: wrap; gap: 6px; }
.phrases button { background: #fff; padding: 3px 10px; font-size: 16px; box-shadow: 0 0 0 2px var(--ink); white-space: nowrap; }
.phrases button:hover { background: var(--lime); }
.phrases.small button { font-size: 15px; }

/* reveal */
.reveal { position: absolute; left: clamp(10px, 4vw, 70px); right: clamp(10px, 4vw, 70px); top: 50%; transform: translateY(-46%); display: none; align-items: center; justify-content: space-between; pointer-events: none; z-index: 5; }
.reveal.on { display: flex; }
.rv-col { display: flex; flex-direction: column; align-items: center; gap: 10px; transition: transform .3s, opacity .3s; }
.rv-who { background: var(--ink); color: #fff; padding: 1px 12px; font-size: 17px; letter-spacing: .1em; }
#rv0 .rv-who { background: var(--sky-d); } #rv1 .rv-who { background: var(--red); }
.rcard { position: relative; width: clamp(78px, 13vw, 124px); aspect-ratio: 5 / 7; perspective: 600px; animation: slidein .35s cubic-bezier(.3,1.4,.5,1); }
#rv1 .rcard { animation-name: slidein2; }
@keyframes slidein { from { transform: translateX(-60vw) rotate(-20deg); } } @keyframes slidein2 { from { transform: translateX(60vw) rotate(20deg); } }
.rc-face, .rc-back { position: absolute; inset: 0; backface-visibility: hidden; transition: transform .45s; box-shadow: 0 -4px 0 0 var(--ink), 0 4px 0 0 var(--ink), -4px 0 0 0 var(--ink), 4px 0 0 0 var(--ink), 0 12px 0 0 rgba(29,27,47,.35); }
.rc-back { background: url(assets/card_back.webp) center / cover, var(--ink-2); }
#rv0 .rc-back { background: var(--my-back, url(assets/card_back.webp)) center / cover, var(--ink-2); }   /* your own card back */
#rv1 .rc-back { background: var(--rival-back, url(assets/card_back.webp)) center / cover, var(--ink-2); }
.rc-face { background: linear-gradient(180deg, #fff, var(--paper) 60%, var(--paper-2)); display: grid; place-items: center; transform: rotateY(180deg); }
.rc-face b { font-size: clamp(55px, 12vw, 84px); line-height: 1; color: var(--c, var(--ink)); text-shadow: 3px 3px 0 var(--ink), -3px -3px 0 var(--ink), 3px -3px 0 var(--ink), -3px 3px 0 var(--ink); transition: transform .2s; }
.rcard.flip .rc-back { transform: rotateY(180deg); } .rcard.flip .rc-face { transform: rotateY(360deg); }
.rc-face b.bump { animation: bump .45s; } @keyframes bump { 40% { transform: scale(1.5) rotate(-6deg); } }
.rv-col.win .rc-face { background: linear-gradient(180deg, #fbffe0, #e7ff7a); box-shadow: 0 -4px 0 0 var(--ink), 0 4px 0 0 var(--ink), -4px 0 0 0 var(--ink), 4px 0 0 0 var(--ink), 0 0 0 9px var(--lime), 0 0 40px 14px rgba(212,255,31,.6); }
.rv-col.win { transform: scale(1.08); } .rv-col.lose { opacity: .55; transform: scale(.92); }
.rv-spell { min-height: 54px; display: flex; align-items: center; gap: 6px; }
.rv-spell .chip { display: flex; align-items: center; gap: 6px; background: var(--paper); padding: 4px 10px 4px 4px; font-size: 17px; white-space: nowrap; box-shadow: var(--ps); animation: drop .35s cubic-bezier(.3,1.6,.5,1); }
.rv-spell .chip img { width: 38px; height: 38px; object-fit: contain; }
.rv-spell .chip.x { filter: grayscale(1); opacity: .6; text-decoration: line-through; }
.rv-msg { position: absolute; left: 50%; bottom: max(30px, 7vh); transform: translateX(-50%); background: var(--paper); padding: 6px 18px; text-align: center; font-size: clamp(19px, 3vw, 25px); display: none; z-index: 6; max-width: min(620px, 90vw); }
.rv-msg.on { display: block; animation: drop .3s cubic-bezier(.3,1.6,.5,1); }
.rv-msg.good { background: var(--lime); } .rv-msg.bad { background: #ffd0d5; } .rv-msg.magic { background: #e6dbff; }
/* the turn result: big title + where the points came from */
.rv-msg.result { padding: 8px 26px 10px; } .rv-msg.result b { display: block; font-size: clamp(28px, 5.4vw, 44px); line-height: 1.05; letter-spacing: .04em; }
.rv-msg.result span { display: block; font-size: clamp(14px, 2.2vw, 18px); opacity: .8; }
.rv-msg.result.bad { background: var(--red); color: #fff; }
/* WIN / LOSE / TIE stamped on the revealed cards */
.rv-col.win .rcard::after, .rv-col.lose .rcard::after, .rv-col.tie .rcard::after { position: absolute; left: 50%; bottom: -12px; transform: translateX(-50%) rotate(-6deg); z-index: 3; padding: 1px 10px; font-size: clamp(16px, 2.6vw, 22px); font-weight: 900; letter-spacing: .08em; box-shadow: var(--ps); animation: drop .3s cubic-bezier(.3,1.6,.5,1); }
.rv-col.win .rcard::after { content: 'WIN'; background: var(--lime); color: var(--ink); }
.rv-col.lose .rcard::after { content: 'LOSE'; background: var(--red); color: #fff; }
.rv-col.tie .rcard::after { content: 'TIE'; background: #fff; color: var(--ink); }

/* tutorial coach */
.coach { position: absolute; left: 12px; top: calc(max(10px, env(safe-area-inset-top)) + 92px); z-index: 20; display: none; gap: 12px; align-items: flex-start; background: var(--paper); padding: 12px 14px; width: min(440px, 34vw); }
.coach.on { display: flex; animation: fade .3s; }
.coach-pfp { width: 76px; height: 76px; flex: none; box-shadow: 0 0 0 3px var(--ink); background: var(--paper-3); }
.coach b { font-size: 19px; color: var(--sky-d); } .coach p { margin: 2px 0 8px; font-size: 18px; line-height: 1.15; }
.coach .btn { float: right; }
.coach.wait .btn { display: none; }

/* banners + pops */
#banner { position: fixed; inset: 0; z-index: 25; display: grid; place-items: center; pointer-events: none; text-align: center; opacity: 0; transform: scale(1.3); transition: opacity .15s, transform .25s cubic-bezier(.3,1.5,.5,1); padding: 16px; }
#banner.on { opacity: 1; transform: scale(1); }
#banner .bt { font-size: clamp(50px, 13vw, 109px); line-height: .9; color: var(--lime); letter-spacing: .04em;
  text-shadow: 0 7px 0 var(--ink), 5px 5px 0 var(--ink), -4px -4px 0 var(--ink), 4px -4px 0 var(--ink), -4px 4px 0 var(--ink); }
#banner .bt.red { color: var(--red); } #banner .bt.white { color: #fff; } #banner .bt.gold { color: var(--gold); }
#banner small { display: inline-block; font-size: clamp(17px, 3vw, 23px); color: var(--ink); background: var(--paper); padding: 4px 14px; margin-top: 14px; letter-spacing: .05em; box-shadow: var(--ps); max-width: 90vw; }
#pops { position: fixed; inset: 0; z-index: 8; pointer-events: none; }
.pop { position: absolute; font-size: 33px; color: #fff; text-shadow: 3px 3px 0 var(--ink), -2px -2px 0 var(--ink), 2px -2px 0 var(--ink), -2px 2px 0 var(--ink); transform: translate(-50%, -50%); animation: pop 1.3s ease-out forwards; white-space: nowrap; }
.pop.crit { color: var(--lime); font-size: 47px; } .pop.gold { color: var(--gold); font-size: 42px; } .pop.status { font-size: 23px; color: #ffe46b; }
@keyframes pop { 0% { transform: translate(-50%, -10%) scale(.4); opacity: 0; } 14% { transform: translate(-50%, -60%) scale(1.12); opacity: 1; } 100% { transform: translate(-50%, -170%) scale(1); opacity: 0; } }
.flycrown { position: fixed; z-index: 26; width: 70px; pointer-events: none; transition: left .6s cubic-bezier(.5,0,.7,1), top .6s cubic-bezier(.3,-0.4,.7,1), transform .6s, opacity .2s .55s; filter: drop-shadow(3px 4px 0 var(--ink)); }
#toast { position: fixed; left: 50%; bottom: 26px; transform: translate(-50%, 30px); z-index: 70; padding: 8px 18px; background: var(--paper); font-size: 18px; opacity: 0; transition: opacity .2s, transform .2s; pointer-events: none; max-width: 90vw; text-align: center; }
#toast.on { opacity: 1; transform: translate(-50%, 0); } #toast.bad { background: #ffe0e3; }
#tip { position: fixed; z-index: 80; max-width: 300px; padding: 10px 12px; background: var(--paper); font-size: 16px; line-height: 1.15; pointer-events: none; opacity: 0; transition: opacity .12s; }
#tip.on { opacity: 1; } #tip b { display: block; margin-bottom: 3px; font-size: 19px; }

/* result */
.result { text-align: center; align-items: center; padding-top: 26px; }
.r-crown { width: 96px; animation: bob 2s ease-in-out infinite; filter: drop-shadow(3px 4px 0 var(--ink)); }
.result.lost .r-crown { filter: grayscale(1) drop-shadow(3px 4px 0 var(--ink)); }
#r-title { font-size: clamp(55px, 14vw, 86px); line-height: .9; text-shadow: 4px 4px 0 var(--ink), -3px -3px 0 var(--ink), 3px -3px 0 var(--ink), -3px 3px 0 var(--ink); }
.r-score { font-size: 25px; color: var(--muted); }
.r-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; width: 100%; }
.r-stats div { background: var(--paper-2); padding: 10px 6px; } .r-stats b { display: block; font-size: clamp(17px, 6.4vw, 23px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .r-stats span { font-size: 13px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.r-btns { display: flex; gap: 18px; justify-content: center; margin: 6px 0 4px; flex-wrap: wrap; }
.up { color: #3a9a00 !important; } .down { color: var(--red) !important; }

/* leaderboard page */
.live { font-size: 15px; color: var(--red); vertical-align: middle; letter-spacing: .08em; animation: blink 1.6s infinite; text-shadow: none; }
@keyframes blink { 50% { opacity: .35; } }
.lb { overflow: auto; }
.lb table { width: 100%; border-collapse: collapse; font-size: 19px; }
.lb th { text-align: left; font-size: 15px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); padding: 8px; border-bottom: 3px solid var(--ink); font-weight: 400; }
.lb td { padding: 6px 8px; border-bottom: 2px dashed var(--paper-3); }
.lb tr.mine-row td { background: #f3ffc2; }
.lb .pl { display: flex; align-items: center; gap: 10px; cursor: pointer; max-width: 360px; }
.lb .pl span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lb .pl img { width: 44px; height: 44px; box-shadow: 0 0 0 2px var(--ink); background: var(--paper-3); flex: none; }
.lb .rank { font-size: 22px; color: var(--muted); } .lb tr:nth-child(1) .rank { color: var(--gold-d); } .lb tr:nth-child(2) .rank { color: #8a8fa0; } .lb tr:nth-child(3) .rank { color: #c0723f; }

/* profile */
.profile { display: grid; grid-template-columns: minmax(300px, 380px) 1fr; gap: 18px; align-items: start; }
.profile > .panel:last-child { grid-column: 1 / -1; }
.prof-card { display: flex; flex-direction: column; gap: 12px; }
.prof-top { display: flex; gap: 14px; align-items: center; }
.prof-top > img { width: 140px; height: 140px; box-shadow: 0 0 0 3px var(--ink); flex: none; }
.prof-id { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.pf-name { font-size: 33px; line-height: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pf-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.pf-stats div { background: var(--paper-2); padding: 8px 10px; } .pf-stats b { display: block; font-size: 25px; line-height: 1; } .pf-stats span { font-size: 12px; color: var(--muted); text-transform: uppercase; }
.showcase { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.showcase img { width: 100%; aspect-ratio: 1; box-shadow: 0 0 0 3px var(--ink); background: var(--paper-3); }
.showcase .empty { aspect-ratio: 1; display: grid; place-items: center; background: var(--paper-2); color: var(--muted); font-size: 14px; text-align: center; }
#pf-edit { display: flex; flex-direction: column; gap: 10px; }
.history { display: flex; flex-direction: column; gap: 6px; }
.hrow { display: grid; grid-template-columns: 70px 1fr auto auto; gap: 10px; align-items: center; padding: 6px 10px; background: var(--paper-2); font-size: 17px; }
.hrow > span:nth-child(2) { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hrow .res { font-size: 19px; letter-spacing: .04em; } .hrow .res.win { color: #3a9a00; } .hrow .res.loss { color: var(--red); } .hrow .res.draw { color: var(--muted); }
.hrow img { width: 30px; height: 30px; vertical-align: middle; margin-right: 6px; box-shadow: 0 0 0 2px var(--ink); }

/* friends drawer */
.drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(400px, 100vw); z-index: 50; background: var(--paper); padding: max(14px, env(safe-area-inset-top)) 14px 14px; display: flex; flex-direction: column; gap: 12px; transform: translateX(110%); transition: transform .25s; }
.drawer.on { transform: none; }
.drawer-head { display: flex; align-items: center; gap: 10px; } .drawer-head img { width: 42px; } .drawer-head h3 { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#fr-list-view { display: flex; flex-direction: column; gap: 10px; min-height: 0; flex: 1; }
.fr-add { display: flex; gap: 8px; }
.fr-list { display: flex; flex-direction: column; gap: 8px; overflow: auto; flex: 1; }
.frow { display: grid; grid-template-columns: 46px 1fr auto; gap: 10px; align-items: center; padding: 6px 8px; background: var(--paper-2); cursor: pointer; }
.frow img { width: 46px; height: 46px; box-shadow: 0 0 0 2px var(--ink); }
.frow .fn { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 18px; }
.frow .fs { font-size: 13px; color: var(--muted); }
.frow .dot { display: inline-block; width: 10px; height: 10px; margin-right: 5px; background: #b9b3cf; } .frow .dot.on { background: var(--green); }
.frow .new { background: var(--red); color: #fff; padding: 0 6px; font-size: 12px; }
.frow .acts { display: flex; gap: 6px; }
.frow .acts .btn { padding: 2px 10px; font-size: 15px; }
.fr-section { font-size: 15px; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; margin-top: 4px; }
.fr-chat { display: none; flex-direction: column; gap: 10px; min-height: 0; flex: 1; }
.fr-chat.on { display: flex; } #fr-list-view.off { display: none; }
.fr-msgs { flex: 1; overflow: auto; display: flex; flex-direction: column; gap: 6px; padding: 6px; background: var(--paper-2); min-height: 120px; }
.msg { max-width: 80%; padding: 4px 10px; font-size: 16px; background: #fff; box-shadow: 0 0 0 2px var(--ink); align-self: flex-start; }
.msg.mine { align-self: flex-end; background: var(--lime); }
.msg time { display: block; font-size: 11px; color: var(--muted); }

/* codex */
.codex { overflow: auto; line-height: 1.2; font-size: 18px; }
.codex h3 { font-size: 25px; margin: 20px 0 8px; display: flex; align-items: center; gap: 8px; } .codex h3:first-child { margin-top: 0; }
.codex h3 img { width: 36px; height: 36px; object-fit: contain; }
.codex ul, .codex ol { padding-left: 24px; margin: 6px 0; } .codex li { margin: 6px 0; }
.spellrow { display: grid; grid-template-columns: 60px 1fr; gap: 12px; align-items: center; padding: 10px; background: var(--paper-2); margin: 8px 0; }
.spellrow img { width: 60px; height: 60px; object-fit: contain; }
.spellrow b { font-size: 22px; } .spellrow em { font-style: normal; font-size: 12px; background: var(--ink); color: var(--lime); padding: 1px 6px; margin-left: 6px; vertical-align: middle; }
.example { background: #eef9ff; padding: 10px 12px; margin: 8px 0; font-size: 17px; border-left: 6px solid var(--sky); }

/* modal */
.modal-wrap { position: fixed; inset: 0; z-index: 60; display: none; place-items: center; background: rgba(29,27,47,.45); }
.modal-wrap.on { display: grid; }
.modal { width: min(460px, calc(100% - 32px)); max-height: calc(100% - 32px); overflow: auto; text-align: center; display: flex; flex-direction: column; gap: 14px; }
.modal h3 { font-size: 28px; } .modal p { margin: 0; font-size: 17px; }
.modal img.wide { width: 100%; box-shadow: var(--ps); }
.modal-btns { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; margin: 4px 0 6px; }

@media (max-width: 900px) {
  .lobby { inset: 76px 12px max(12px, env(safe-area-inset-bottom)); flex-direction: column; justify-content: flex-start; align-items: stretch; overflow: auto; padding-top: 34vh; gap: 18px; }
  .col-play, .col-board { width: auto; max-height: none; overflow: visible; }
  .col-board { height: auto; } .col-board .board-list { max-height: 360px; }
  .hub-logo { position: fixed; top: 78px; left: 0; right: 0; justify-content: center; font-size: 36px; pointer-events: none; }
  .profile { grid-template-columns: 1fr; }
  .hide-s { display: none; }
}
@media (max-width: 820px) {
  .plate { padding: 4px 6px; gap: 6px; } .pfp { width: 40px; height: 40px; } .plate b { font-size: 15px; } .pts { min-width: 42px; padding: 2px 6px; } .pts b { font-size: 20px; } .pts span { font-size: 11px; }
  .stars img { width: 17px; height: 16px; }
  .duel-top { gap: 6px; left: 8px; right: 8px; } .mid { min-width: 52px; } .roundlbl { font-size: 16px; } .timer { width: 48px; height: 48px; } .timer span { font-size: 19px; }
  .prize { left: 10px; transform: none; align-items: flex-start; top: calc(max(10px, env(safe-area-inset-top)) + 74px); }
  .crownbox { width: 92px; height: 78px; } .crownbox img { width: 80px; left: 6px; } .crownbox b { font-size: 33px; top: 12px; }
  .crownsleft i { width: 23px; height: 23px; font-size: 14px; }
  .rivalinfo { top: calc(max(10px, env(safe-area-inset-top)) + 74px); right: 8px; padding: 4px 6px; font-size: 12px; gap: 3px; }
  .rivalinfo .ri-row > span { display: none; } .ri-lock { font-size: 12px; padding: 1px 4px; }
  .minis i { width: 17px; height: 22px; font-size: 13px; } .minispells img { width: 21px; height: 21px; }
  .sp { flex-direction: column; gap: 1px; padding: 4px 6px; min-width: 72px; text-align: center; } .sp img { width: 30px; height: 30px; } .sp b { font-size: 15px; } .sp em { display: none; }
  .sp .lim { font-size: 11px; top: -10px; right: -4px; }
  .spells { gap: 9px; flex-wrap: nowrap; }
  .duel-bottom { gap: 9px; padding: 8px 10px max(12px, env(safe-area-inset-bottom)); }
  .handrow { flex-direction: column; gap: 10px; }
  .duel-hint { font-size: 15px; min-height: 28px; line-height: 22px; white-space: normal; }
  .lockrow { width: auto; } .lock { min-width: 220px; } .btn.big { font-size: 20px; padding: 9px 22px; }
  .reveal { top: 40%; } .rv-spell { min-height: 46px; } .rv-spell .chip img { width: 28px; height: 28px; } .rv-spell .chip { font-size: 14px; }
  .coach { left: 8px; right: 8px; width: auto; top: auto; bottom: calc(var(--tray, 250px) + 6px); } .coach-pfp { width: 52px; height: 52px; } .coach p { font-size: 16px; }
  .chatpick { bottom: calc(max(14px, env(safe-area-inset-bottom)) + 62px); }
  .iconbtn { width: 46px; height: 46px; } .iconbtn img { width: 32px; height: 32px; }
  .topbtns { gap: 10px; }
}
@media (max-height: 700px) and (min-width: 821px) {
  .card { width: 58px; } .card b { font-size: 33px; }
}
@media (max-width: 480px) {
  .plate .pfp { display: none; } .plate { padding: 4px 6px; } .pts span { display: none; }
}

/* ---------- fonts: Lilita One for the logo, big titles and big numbers; everything you read is Nunito ---------- */
.logo, h2, h3, .mode-txt b, #banner .bt, #r-title, .card b, .rc-face b, .crownbox b, .pod-base, .pf-name, .roundlbl, .timer span, .pop {
  font-family: var(--pix); font-weight: 400 !important; letter-spacing: .02em; }
.btn, .seg button, .tag, .label, .rv-msg, .duel-hint, .waiting, .potline, .sp b, .me b, .coach b, .rv-who, .r-stats b, .pf-stats b, .pts b,
.brow .rk, .lb .rank, .pod-vl, .brow .vl, .live, .badge, .order, .sp .lim, .ri-lock, .board-tab span, .r-score, #banner small, .crownsleft i, .minis i,
.card::before, .card::after, .nametag, .bubble, .phrases button, .msg, .frow .fn {
  font-family: var(--font); font-weight: 800; letter-spacing: 0; }
.btn.big, .btn.primary, .tag, .label, .rv-who, .pts b, .r-stats b, .pf-stats b, .sp b { font-weight: 900; }
.label { letter-spacing: .04em; font-size: 15px; }
.tag { letter-spacing: .04em; }
.mode-txt span { font-size: 14px; font-weight: 800; }
.mode.wide-mode { min-height: 86px; }
.col-play { overflow-x: hidden; gap: 12px; scrollbar-width: thin; }
.mode.big { min-height: 128px; } .mode { min-height: 82px; } .mode.soon { min-height: 66px; }
@media (max-height: 760px) and (min-width: 901px) {
  .hub-logo { font-size: clamp(26px, 11cqw, 44px); } .mode.big { min-height: 108px; } .mode.wide-mode { min-height: 72px; } .mode { min-height: 70px; } .mode.soon { min-height: 56px; }
  .mode.big .mode-txt b { font-size: 30px; } .guest-note { font-size: 13px; padding: 7px 9px; }
}
.prep-note { margin: 4px 0 0; padding: 8px 10px; background: #eef9ff; border-left: 5px solid var(--sky); font-size: 15px; }
.prep-note:empty { display: none; }
p, li, .muted, .fine, .pitch, .coach p, .codex, .modal p, .guest-note { line-height: 1.4; }

/* ---------- windows: pop up over the lobby (or the duel) instead of replacing it ---------- */
.screen.window { z-index: 30; background: rgba(29, 27, 47, .62); }   /* no backdrop blur: it re-blurs the animated stage every frame */
.screen.window > .page { position: absolute; inset: auto; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(1000px, calc(100% - 28px));
  max-height: calc(100% - 28px); margin: 0; padding: 16px 18px 20px; background: var(--paper-2); overflow: auto; gap: 14px;
  box-shadow: var(--ps), 0 12px 0 0 rgba(29,27,47,.35); animation: winpop .22s cubic-bezier(.3,1.4,.5,1); }
.screen.window > .page.narrow { width: min(720px, calc(100% - 28px)); }
@keyframes winpop { from { transform: translate(-50%, -46%) scale(.94); opacity: 0; } }
.screen.window .pagehead { grid-template-columns: 1fr auto auto; position: sticky; top: -16px; z-index: 2; margin: -16px -18px 0; padding: 12px 14px 12px 18px; background: var(--ink); color: #fff; }
.screen.window .pagehead h2 { font-size: 26px; display: flex; align-items: center; gap: 10px; color: #fff; text-shadow: 2px 2px 0 rgba(0,0,0,.4); }
.screen.window .pagehead h2 img { width: 30px; height: 30px; object-fit: contain; }
.screen.window .pagehead .seg { background: var(--ink-2); } .screen.window .pagehead .seg button { color: #c9c5e0; }
.screen.window .pagehead .seg button.on { background: var(--lime); color: var(--ink); }
.closex { background: var(--red) !important; color: #fff; font-family: var(--pix); }
.closex:hover { filter: brightness(1.1); }
#tags.dim { opacity: 0; }
.profile { grid-template-columns: minmax(280px, 340px) 1fr; }

/* ---------- collapsible leaderboard ---------- */
.board-head .iconbtn.small { width: 32px; height: 32px; font-size: 22px; font-family: var(--pix); }
.board-tab { display: none; position: absolute; right: 0; top: 50%; transform: translateY(-50%); z-index: 4; flex-direction: column; align-items: center; gap: 8px;
  padding: 12px 8px; background: var(--paper); pointer-events: auto; }
.board-tab img { width: 34px; height: 34px; object-fit: contain; }
.board-tab span { font-size: 15px; letter-spacing: .1em; writing-mode: vertical-rl; }
.board-tab .tab-pfps { display: flex; flex-direction: column; gap: 6px; }
.board-tab .tab-pfps img { width: 34px; height: 34px; box-shadow: 0 0 0 2px var(--ink); background: var(--paper-3); }
.board-tab b { font-family: var(--pix); font-size: 22px; }
.board-tab:hover { background: #fff; }
#s-hub.board-closed .col-board { display: none; }
#s-hub.board-closed .board-tab { display: flex; }
.col-board { width: min(360px, 27vw); }

/* trial players: ranked is locked */
.mode.locked { filter: saturate(.55) brightness(.92); }
.mode.locked .tag { background: var(--gold); }

/* duel intro: only the banner + Minds while "DUEL!" shows */
#s-duel.intro .prize, #s-duel.intro .duel-bottom, #s-duel.intro .rivalinfo, #s-duel.intro .chatbtn { opacity: 0; pointer-events: none; }
#s-duel .prize, #s-duel .duel-bottom, #s-duel .rivalinfo { transition: opacity .3s; }
/* round change: a dimmed screen with the new round, the round score and both Minds */
#s-duel.roundchange .prize, #s-duel.roundchange .duel-bottom, #s-duel.roundchange .rivalinfo, #s-duel.roundchange .chatbtn { opacity: 0; pointer-events: none; }
#banner.dim { background: radial-gradient(circle, rgba(18,14,44,.6), rgba(10,8,28,.9)); }
.rs-vs { display: flex; align-items: center; justify-content: center; gap: clamp(12px, 4vw, 40px); margin-top: 22px; }
.rs-vs > i { font-style: normal; font-size: clamp(30px, 7vw, 54px); color: #fff; text-shadow: 3px 3px 0 var(--ink), -2px -2px 0 var(--ink), 2px -2px 0 var(--ink), -2px 2px 0 var(--ink); }
.rs-side { display: flex; flex-direction: column; align-items: center; gap: 6px; animation: rs-in .4s cubic-bezier(.3,1.5,.5,1) both; }
.rs-side.rival { animation-name: rs-in-r; }
.rs-side img { width: clamp(64px, 14vw, 104px); aspect-ratio: 1; image-rendering: pixelated; background: var(--paper); box-shadow: var(--ps); }
.rs-side.rival img { transform: scaleX(-1); }
.rs-side b { font-size: clamp(13px, 2.4vw, 18px); color: #fff; max-width: 30vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-shadow: 2px 2px 0 var(--ink); }
.rs-crowns img { width: clamp(20px, 3.4vw, 28px); margin: 0 2px; } .rs-crowns img.off { filter: grayscale(1) brightness(.5); opacity: .7; }
@keyframes rs-in { from { opacity: 0; transform: translateX(-60px); } }
@keyframes rs-in-r { from { opacity: 0; transform: translateX(60px); } }
#d-round.new { animation: round-pop .6s cubic-bezier(.3,1.5,.5,1); }
@keyframes round-pop { 0% { transform: scale(1.8); color: var(--lime); } 100% { transform: scale(1); } }

@media (max-width: 900px) {
  .board-tab { display: none !important; } #s-hub.board-closed .col-board { display: flex; }
  .board-head .iconbtn.small { display: none; }
  .col-board { width: auto; }
  .screen.window > .page { width: calc(100% - 16px); max-height: calc(100% - 16px); padding: 14px 12px 16px; }
  .screen.window .pagehead { margin: -14px -12px 0; top: -14px; padding: 10px 10px 10px 14px; }
  .screen.window .pagehead h2 { font-size: 22px; }
}
/* card digits: big and crisp in the pixel font (thin outline so they stay readable) */
.card b { font-size: clamp(32px, 4.8vw, 48px); font-weight: 700; text-shadow: 2px 3px 0 var(--ink), -1.5px -1.5px 0 var(--ink), 1.5px -1.5px 0 var(--ink), -1.5px 1.5px 0 var(--ink), 1.5px 1.5px 0 var(--ink); }
.card::before, .card::after { font-size: 13px; font-weight: 700; }
@media (max-height: 700px) and (min-width: 821px) { .card b { font-size: 36px; } }
@media (max-width: 520px) {
  #hub-tutorial { display: none; }
  .me { max-width: 46vw; }
  .mindgrid.big { grid-template-columns: repeat(3, 1fr); gap: 10px; }
}

/* start screen */
.tapstart { display: none; margin-top: 6px; animation: tappulse 1.2s ease-in-out infinite; }
.tapstart.on { display: inline-flex; }
@keyframes tappulse { 50% { transform: scale(1.06); } }
#s-boot { cursor: pointer; }

/* Mind Energy */
.mind .en { position: absolute; right: 7px; bottom: 7px; padding: 0 6px; font-size: 13px; font-weight: 900; background: var(--lime); color: var(--ink); box-shadow: 0 0 0 2px var(--ink); }
.mind .en.none { background: #ffd0d5; color: var(--red); }
.mind.tired { filter: grayscale(.85); opacity: .6; }
.mind.tired::after { content: 'RESTING'; position: absolute; left: 50%; top: 42%; transform: translate(-50%, -50%) rotate(-8deg); background: var(--ink); color: #fff; font-size: 12px; font-weight: 900; padding: 2px 8px; letter-spacing: .08em; }

/* inventory */
.invbtn { font-size: 26px; }
.enbadge { display: none; position: absolute; bottom: -9px; left: 50%; transform: translateX(-50%); font-style: normal; font-size: 12px; font-weight: 900; padding: 0 5px; background: var(--lime); color: var(--ink); box-shadow: 0 0 0 2px var(--ink); white-space: nowrap; }
.enbadge.on { display: block; }
.nametag .ten { color: #3a9a00; font-weight: 900; }
.inv-sum { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; }
.inv-sum > span { color: var(--muted); }
.inv-total { display: flex; gap: 10px; align-items: center; }
.inv-total i { font-style: normal; font-size: 30px; width: 52px; height: 52px; display: grid; place-items: center; background: var(--lime); box-shadow: 0 0 0 3px var(--ink); }
.inv-total b { display: block; font-family: var(--pix); font-weight: 400; font-size: 34px; line-height: 1; }
.inv-total b small { font-size: 20px; color: var(--muted); }
.inv-total span { font-size: 13px; color: var(--muted); }
.inv-facts { display: flex; flex-direction: column; gap: 2px; font-size: 14px; color: var(--ink-2); }
.inv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; padding: 4px; }
.inv-mind { background: var(--paper); padding: 8px; display: flex; flex-direction: column; gap: 6px; cursor: pointer; box-shadow: 0 0 0 3px var(--ink), inset 0 4px 0 var(--rar); transition: transform .1s; }
.inv-mind:hover { transform: translateY(-3px); }
.inv-img { position: relative; background: var(--paper-3); }
.inv-img img { width: 100%; aspect-ratio: 1; display: block; }
.inv-flag { position: absolute; left: 4px; top: 4px; font-style: normal; font-size: 10px; font-weight: 900; padding: 1px 5px; background: var(--gold); color: var(--ink); box-shadow: 0 0 0 2px var(--ink); }
.inv-flag.is-pfp { top: auto; bottom: 4px; background: var(--sky); }
.inv-name { display: flex; justify-content: space-between; align-items: baseline; gap: 6px; }
.inv-name b { font-family: var(--pix); font-weight: 400; font-size: 20px; }
.inv-name span { font-size: 13px; font-weight: 900; color: var(--rar); }
.inv-en { display: flex; align-items: center; gap: 8px; }
.inv-en .enbar { flex: 1; display: flex; gap: 3px; }
.inv-en .enbar i { flex: 1; height: 12px; background: #e6dcc0; box-shadow: 0 0 0 2px var(--ink); }
.inv-en .enbar i.on { background: var(--lime); }
.inv-en span { font-size: 14px; font-weight: 900; white-space: nowrap; }
.inv-free { font-size: 12px; color: var(--muted); }
.inv-mind.tired .inv-img { filter: grayscale(.85); opacity: .7; }
.inv-empty { display: grid; justify-items: center; gap: 6px; text-align: center; padding: 30px 10px; }
.inv-chest { font-size: 54px; } .inv-empty span { color: var(--muted); max-width: 420px; }
.modal img.inv-big { width: 140px; height: 140px; margin: 0 auto; box-shadow: var(--ps); }
@media (max-width: 520px) { .inv-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; } .inv-total b { font-size: 28px; } }

/* animated bits run on the GPU (no repaint every frame) */
.logo img, .pod-crown, .r-crown, .tapstart, .card, .sp, .mode { will-change: transform; }
.lb td { vertical-align: middle; } .lb th:first-child, .lb td.rank { width: 48px; text-align: center; } .lb .lbv { white-space: nowrap; }

/* Mind Island */
.shopbtn, .stylebtn { font-size: 24px; }
.stylebtn { background: linear-gradient(180deg, #fff3b0, #ffd36a); }
.mode.island-mode { --bg: linear-gradient(#5ec8ff, #3b86d1); background-size: cover; background-position: center 40%; }
.mode.island-mode .badge { top: auto; bottom: 8px; right: 8px; background: var(--lime); color: var(--ink); font-size: 13px; padding: 0 6px; }
#s-island { background: #3b86d1; touch-action: none; user-select: none; }
#island-cv { position: absolute; inset: 0; width: 100%; height: 100%; display: block; cursor: grab; }
.isl-top { position: absolute; top: 12px; left: 12px; right: 12px; display: flex; gap: 10px; align-items: center; pointer-events: none; }
.isl-top > * { pointer-events: auto; }
.isl-top .btn { padding: 10px 16px; font-size: 17px; }
.isl-res { display: flex; gap: 4px; background: var(--paper); padding: 6px; margin-right: auto; }
.isl-res span { display: flex; align-items: center; gap: 5px; padding: 3px 10px; background: var(--paper-2); font-size: 17px; white-space: nowrap; }
.isl-res b { font: 400 20px var(--pix); }
.isl-res .dust { background: #fff1b8; }
.isl-right { display: flex; gap: 10px; }
.isl-right .iconbtn { font-size: 24px; }
.isl-sub { position: absolute; top: 78px; left: 12px; display: flex; gap: 8px; flex-wrap: wrap; pointer-events: none; }
.isl-chip { background: rgba(255,248,228,.92); padding: 3px 10px; font-size: 13px; font-weight: 800; }
.isl-chip.bad { background: #ffd6d0; color: #a3271b; }
.isl-bottom { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 10px; width: min(640px, calc(100% - 24px)); pointer-events: none; }
.isl-bottom > * { pointer-events: auto; }
.isl-tip { background: rgba(29,27,47,.84); color: #fff; padding: 6px 14px; font-size: 14px; font-weight: 700; text-align: center; box-shadow: none; }
.isl-tools { display: flex; gap: 6px; background: var(--paper); padding: 6px; }
.isl-tools button { position: relative; width: 84px; padding: 6px 4px 5px; border: 0; background: var(--paper-2); display: flex; flex-direction: column; align-items: center; gap: 2px; font: 800 14px var(--font); color: var(--ink); cursor: pointer; transition: transform .08s; }
.isl-tools button:hover { transform: translateY(-2px); }
.isl-tools button.on { background: var(--lime); box-shadow: 0 0 0 3px var(--ink); }
.isl-tools i { font-style: normal; font-size: 26px; line-height: 30px; height: 30px; display: grid; place-items: center; }
.isl-tools i img { width: 28px; height: 32px; image-rendering: pixelated; object-fit: contain; }
.isl-tools em { font-style: normal; color: var(--muted); }
.isl-tools .badge { top: -8px; right: -6px; display: none; background: var(--lime); color: var(--ink); }
.isl-tools .badge.on { display: block; }
.isl-tools .badge:empty { display: none; }
.isl-seeds { display: none; flex-direction: column; gap: 4px; background: var(--paper); padding: 6px; width: min(360px, 100%); }
.isl-seeds.on { display: flex; }
/* long lists (build menu, seeds) scroll inside the box instead of running off the screen */
.isl-seeds { max-height: min(46vh, 420px); overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; touch-action: pan-y; }
.isl-seeds button { display: grid; grid-template-columns: 34px 1fr auto; grid-template-rows: auto auto; column-gap: 8px; align-items: center; text-align: left; padding: 5px 8px; border: 0; background: var(--paper-2); cursor: pointer; font-family: var(--font); color: var(--ink); }
.isl-seeds button.on { background: #eaffb0; box-shadow: inset 0 0 0 2px var(--ink); }
.isl-seeds button.none { opacity: .55; }
.isl-seeds img { grid-row: 1 / 3; width: 30px; height: 34px; image-rendering: pixelated; object-fit: contain; }
.isl-seeds b { font-size: 15px; } .isl-seeds span { font-size: 12px; color: var(--muted); grid-column: 2; }
.isl-seeds em { grid-row: 1 / 3; grid-column: 3; font: 400 20px var(--pix); font-style: normal; }
.isl-seeds .buy { display: block; text-align: center; font-weight: 800; background: var(--gold); }
@media (max-width: 720px) {
  .isl-top { top: 8px; left: 8px; right: 8px; gap: 6px; flex-wrap: wrap; }
  .isl-top .lbl { display: none; }
  .isl-top .btn { padding: 8px 12px; }
  .isl-res { order: 3; width: 100%; justify-content: space-between; padding: 4px; }
  .isl-res span { padding: 2px 6px; font-size: 14px; } .isl-res b { font-size: 16px; }
  .isl-right { margin-left: auto; gap: 6px; } .isl-right .iconbtn { width: 44px; height: 44px; font-size: 20px; }
  .isl-sub { top: 112px; left: 8px; } .isl-chip { font-size: 11px; }
  .isl-tools button { width: 60px; font-size: 12px; } .isl-tools i { font-size: 22px; }
  .isl-tip { font-size: 12px; padding: 5px 10px; }
}
/* shop */
.shop-bar { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 10px 14px; }
.shop-bar > span:first-child { font: 400 24px var(--pix); }
.shop-bar .muted { flex: 1; font-size: 13px; }
.shop-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; padding: 4px; }
.shop-card { display: grid; grid-template-columns: 64px 1fr; gap: 10px; background: var(--paper); padding: 10px; align-items: center; }
.shop-card.soon { opacity: .7; }
.shop-img { width: 64px; height: 64px; background: var(--paper-2); display: grid; place-items: center; }
.shop-img img { width: 44px; height: 50px; image-rendering: pixelated; object-fit: contain; }
.shop-img i { font-style: normal; font-size: 36px; }
.shop-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.shop-txt b { font: 400 20px var(--pix); }
.shop-txt span { font-size: 13px; color: var(--muted); }
.shop-txt em { font-style: normal; font-size: 13px; font-weight: 800; }
.shop-btns { grid-column: 1 / 3; display: flex; gap: 8px; flex-wrap: wrap; }
.shop-btns .btn { flex: 1; white-space: nowrap; }
.shop-grid .inv-empty { grid-column: 1 / -1; }
/* inventory items */
.items-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 12px; }
.item { background: var(--paper); padding: 8px; display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; }
.item-img { width: 56px; height: 56px; background: var(--paper-2); display: grid; place-items: center; }
.item-img img { width: 38px; height: 44px; image-rendering: pixelated; object-fit: contain; }
.item-img img.seedimg { width: 26px; height: 30px; filter: saturate(.6); }
.item-img i { font-style: normal; font-size: 30px; }
.item b { font-size: 13px; line-height: 1.1; } .item em { font: 400 18px var(--pix); font-style: normal; }
.items-foot { display: flex; gap: 10px; justify-content: center; margin-top: 14px; }
.mode-row .mode.wide-mode .mode-txt b { font-size: 21px; }

/* ---- the prize: hidden 1-15 values, made big and obvious ---- */
.prize { gap: 6px; }
.prizetag { background: var(--ink); color: var(--gold); padding: 2px 12px; font-size: 14px; letter-spacing: .18em; box-shadow: 0 0 0 2px var(--gold); }
.crownbox { width: 132px; height: 112px; box-shadow: 0 0 0 3px var(--ink), 0 0 0 6px var(--gold), 0 0 26px 8px rgba(255,197,61,.55); animation: prizeGlow 1.6s ease-in-out infinite; }
.crownbox img { width: 112px; left: 10px; }
.crownbox b { top: 12px; font-size: 48px; }
.crownbox small { position: absolute; bottom: 4px; left: 0; right: 0; text-align: center; font-size: 11px; letter-spacing: .14em; color: var(--ink); font-weight: 900; }
.crownbox[data-tier="mid"] { box-shadow: 0 0 0 3px var(--ink), 0 0 0 6px #ff9f1c, 0 0 34px 12px rgba(255,159,28,.6); }
.crownbox[data-tier="high"] { box-shadow: 0 0 0 3px var(--ink), 0 0 0 6px #ff4d6d, 0 0 46px 18px rgba(255,77,109,.6); animation: prizeGlow .8s ease-in-out infinite; }
.crownbox[data-tier="high"] b { font-size: 56px; color: #fff3b0; }
@keyframes prizeGlow { 50% { filter: brightness(1.12); transform: scale(1.04); } }
.crownbox.new { animation: drop .45s cubic-bezier(.3,1.6,.5,1), prizeGlow 1.6s ease-in-out .45s infinite; }
.crownsleft i.done { opacity: .45; text-decoration: line-through; }
.crownsleft i.hid { background: #3a3656; color: #8f8ab0; }
.crownsleft i.upnext { position: relative; background: #3a3656; color: #fff; }
.crownsleft i.upnext em { position: absolute; top: 100%; margin-top: 3px; left: 50%; transform: translateX(-50%); font-style: normal; font-size: 10px; font-weight: 900; padding: 1px 4px; white-space: nowrap; box-shadow: 0 0 0 2px var(--ink); }
.crownsleft i.upnext.t-low em { background: #9be05a; color: var(--ink); } .crownsleft i.upnext.t-mid em { background: #ffc53d; color: var(--ink); } .crownsleft i.upnext.t-high em { background: #ff4d6d; color: #fff; }
.crownsleft i.upnext.t-high { box-shadow: 0 0 0 2px var(--ink), 0 0 10px 3px rgba(255,77,109,.7); }
@media (max-height: 560px) { .crownbox { width: 100px; height: 86px; } .crownbox img { width: 86px; left: 7px; } .crownbox b { font-size: 36px; } .crownbox[data-tier="high"] b { font-size: 42px; } .prizetag { font-size: 11px; } }

/* ---- ranked stake banner ---- */
.prep-note .stake { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 4px; }
.prep-note .stake b { padding: 3px 10px; font-size: 18px; box-shadow: 0 0 0 2px var(--ink); white-space: nowrap; }
.prep-note .stake .sx { background: var(--ink); color: var(--gold); } .prep-note .stake .sw { background: #9be05a; color: var(--ink); }
.prep-note .stake .sl { background: #ff6a5a; color: #fff; } .prep-note .stake .se { background: #fff3b0; color: var(--ink); }
.prep-note small { display: block; color: var(--muted); }

/* ---- island build menu + building popup ---- */
.isl-build button img { width: 40px; height: 40px; object-fit: contain; image-rendering: pixelated; }
.isl-build button span + span { color: var(--ink); font-weight: 800; }
.isl-bmenu { display: none; align-items: center; gap: 8px; background: var(--paper); padding: 6px 8px; margin-bottom: 6px; }
.isl-bmenu.on { display: flex; }
.isl-bmenu img { width: 40px; height: 40px; object-fit: contain; image-rendering: pixelated; }
.isl-bmenu div { display: flex; flex-direction: column; min-width: 0; } .isl-bmenu div span { font-size: 12px; color: var(--muted); }
.isl-bmenu div span.bm-up { color: var(--ink); font-weight: 800; } .isl-bmenu .bm-up em { font-style: normal; color: #2f9e44; }
.isl-bmenu button { border: 0; padding: 6px 10px; background: var(--paper-2); font: 800 14px var(--font); cursor: pointer; box-shadow: 0 0 0 2px var(--ink); }

/* ---- raids ---- */
#s-raid { background: #3b86d1; }
#raid-cv { position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: pixelated; touch-action: none; }
.raid-top { position: absolute; top: max(8px, env(safe-area-inset-top)); left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 12px; background: var(--paper); padding: 6px 12px; white-space: nowrap; max-width: 96vw; }
.raid-top b { font-size: 16px; overflow: hidden; text-overflow: ellipsis; max-width: 34vw; }
.raid-stars i { font-style: normal; color: #c9c3d6; font-size: 22px; } .raid-stars i.on { color: #ffc53d; text-shadow: 0 0 6px rgba(255,197,61,.8); }
.raid-pct { font: 400 20px var(--title, inherit); min-width: 44px; text-align: right; }
.raid-time { font-weight: 900; font-size: 18px; min-width: 44px; } .raid-time.low { color: var(--red); }
.raid-loot { font-weight: 800; }
.raid-bottom { position: absolute; left: 0; right: 0; bottom: max(8px, env(safe-area-inset-bottom)); display: flex; flex-direction: column; align-items: center; gap: 6px; pointer-events: none; }
.raid-tip { background: rgba(29,27,47,.85); color: #fff; padding: 4px 12px; font-weight: 800; font-size: 14px; }
.raid-tip:empty { display: none; }
.raid-bar { display: flex; gap: 6px; background: var(--paper); padding: 6px; pointer-events: auto; align-items: stretch; }
.raid-bar button { width: 70px; border: 0; background: var(--paper-2); display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 4px; font: 800 12px var(--font); cursor: pointer; }
.raid-bar button img { height: 44px; image-rendering: pixelated; }
.raid-bar button b { font-size: 26px; line-height: 44px; }
.raid-bar button.on { background: var(--lime); box-shadow: 0 0 0 3px var(--ink); }
.raid-bar button.used { opacity: .35; filter: grayscale(1); cursor: default; }
.raid-bar .sep { width: 2px; background: var(--ink); opacity: .2; margin: 4px 4px; }
.raidbtn { background: #ff6a5a; color: #fff; }
.raid-stars.big { font-size: 44px; color: #ffc53d; text-align: center; letter-spacing: 6px; }
h3.raid-result { text-align: center; }
/* ---- army picker + raid bar v2 ---- */
.army-cap { font-size: 16px; margin: 4px 0 8px; } .army-cap b { font-size: 22px; }
.army-list { display: flex; flex-direction: column; gap: 6px; }
.army-row { display: grid; grid-template-columns: 34px 1fr auto 28px auto; align-items: center; gap: 8px; background: var(--paper-2); padding: 4px 8px; }
.army-row img { width: 30px; height: 40px; object-fit: contain; image-rendering: pixelated; }
.army-row small { display: block; color: var(--muted); font-size: 12px; } .army-row em { font-style: normal; font-weight: 900; font-size: 18px; text-align: center; }
.army-hero { display: flex; align-items: center; gap: 10px; margin-top: 8px; padding: 6px 8px; background: #fff3b0; box-shadow: 0 0 0 2px var(--ink); }
.army-hero img { height: 44px; image-rendering: pixelated; } .army-hero small { display: block; color: var(--muted); }
.raid-bar button { position: relative; }
.raid-bar button em { position: absolute; top: 2px; right: 4px; font-style: normal; font-weight: 900; font-size: 13px; }
.raid-bar button.hero { background: #fff3b0; }
.raid-bar button.ready { animation: cryPulse .8s ease-in-out infinite; }
@keyframes cryPulse { 50% { box-shadow: 0 0 0 3px #ffc53d, 0 0 14px 4px rgba(255,197,61,.8); } }
.raid-loot-won b { font-size: 26px; color: #c98a00; }

/* ---- adventure ---- */
#s-adv { background: #3b86d1; }
#adv-cv { position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: pixelated; touch-action: none; }
.adv-hp { display: flex; align-items: center; gap: 4px; } .adv-hp .bar { width: 90px; height: 10px; background: #3a3656; box-shadow: 0 0 0 2px var(--ink); display: block; }
.adv-hp .bar i { display: block; height: 100%; background: linear-gradient(180deg, #ff8a7a, #e0303a); transition: width .2s; }
.adv-bag { display: flex; gap: 8px; font-size: 14px; } .adv-bag b { font-size: 15px; }
.adv-ab { width: 110px !important; } .adv-ab.used { opacity: .5; } .adv-ab em { font-size: 16px !important; }
.advbtn { background: #4fae5a; color: #fff; }
.adv-loot { list-style: none; padding: 0; font-size: 18px; } .adv-loot b { color: #2f9a1a; }

/* raid + adventure live in the tool bar (the top bar ran out of room on phones) */
.isl-tools .tsep { width: 2px; background: var(--ink); opacity: .2; margin: 4px 2px; }
.isl-tools button.go { color: #fff; } .isl-tools button.go.adv { background: #4fae5a; } .isl-tools button.go.raid { background: #e0503a; }
.isl-tools button.go span { color: #fff; }
@media (max-width: 820px) { .isl-tools button { width: 62px; font-size: 12px; } .isl-tools i { font-size: 20px; height: 24px; line-height: 24px; } }

.isl-build .bm-head { grid-column: 1 / -1; font-weight: 900; font-size: 13px; padding: 4px 6px 0; color: var(--muted); }
.isl-build button.stored { background: #fff3b0; } .isl-build button.gem { background: linear-gradient(180deg, #e9e0ff, #d4c4ff); }

.shop-info { grid-column: 1 / -1; background: var(--paper-2); padding: 8px 12px; font-size: 14px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.shop-info.gemsinfo { background: linear-gradient(90deg, #efe6ff, #dccdff); }
.shop-card.gemcard { background: linear-gradient(180deg, #f6f0ff, #e6dbff); }
.btn.gem { background: #8a5cff; color: #fff; }
.isl-res .gems b { color: #7a4cff; }
#shop-tabs { flex-wrap: wrap; }

/* ---- world map ---- */
.wmap { position: relative; width: 440px; max-width: 100%; height: 260px; margin: 6px auto; border-radius: 6px; overflow: hidden;
  background: radial-gradient(circle at 30% 30%, #bfe8ff, #8fd0ff 50%, #e8d4ff); box-shadow: inset 0 0 0 3px var(--ink); }
.wmap .route { position: absolute; height: 0; border-top: 3px dashed rgba(29,27,47,.25); transform-origin: 0 0; }
.wmap .route.open { border-top-color: #ffc53d; }
.wmap .pin { position: absolute; transform: translate(-50%, -50%); border: 0; background: #7fd060; padding: 6px 10px; border-radius: 40% 40% 50% 50%; box-shadow: 0 0 0 2px var(--ink), 0 6px 0 2px #6b4428; cursor: pointer; display: flex; flex-direction: column; align-items: center; font: 800 12px var(--font); }
.wmap .pin b { font-size: 20px; } .wmap .pin em { font-style: normal; font-size: 11px; }
.wmap .pin.on { background: #d4ff1f; box-shadow: 0 0 0 3px var(--ink), 0 0 16px 4px rgba(212,255,31,.8), 0 6px 0 2px #6b4428; }
.wmap .pin.locked { background: #b9b6c4; filter: grayscale(.6); }
.wmap-desc { font-size: 14px; } .wmap-pot { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 14px; }

/* ---- world map screen ---- */
#s-map { background: #5fb8f0; }
#map-cv { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; cursor: grab; }
.map-panel { position: absolute; left: 50%; bottom: max(10px, env(safe-area-inset-bottom)); transform: translateX(-50%); display: flex; align-items: center; gap: 14px; background: var(--paper); padding: 8px 12px; max-width: 96vw; }
#map-info { display: flex; flex-direction: column; font-size: 13px; min-width: 0; max-width: 420px; } #map-info b { font-size: 17px; } #map-info span { color: var(--muted); }
.map-pot { display: flex; align-items: center; gap: 6px; font-size: 18px; white-space: nowrap; }
@media (max-width: 760px) { .map-panel { gap: 8px; padding: 6px; } #map-info { font-size: 11px; } #map-info b { font-size: 14px; } }
.army-none { background: #ffe0d8; padding: 6px 10px; font-weight: 800; box-shadow: 0 0 0 2px var(--ink); }

/* ---- admin ---- */
.codebox { display: flex; gap: 6px; } .codebox input { width: 140px; padding: 4px 8px; font: 700 14px var(--font); }
.adm { display: grid; grid-template-columns: minmax(240px, 1fr) 2fr; gap: 10px; }
.adm-search { display: flex; gap: 6px; } .adm-search input { flex: 1; padding: 6px 8px; font: 700 14px var(--font); }
.adm-row { display: flex; flex-direction: column; align-items: flex-start; width: 100%; text-align: left; border: 0; background: var(--paper-2); margin-top: 4px; padding: 6px 8px; cursor: pointer; font: 600 13px var(--font); }
.adm-row span { color: var(--muted); font-size: 12px; } .adm-row em, .adm-ban { color: var(--red); font-style: normal; font-weight: 900; }
.adm-box { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; background: var(--paper-2); padding: 8px; margin: 6px 0; }
.adm-box input { width: 110px; padding: 4px 6px; font: 700 13px var(--font); } .adm-box small { width: 100%; }
.adm-flags div { font-size: 12px; border-bottom: 1px solid rgba(0,0,0,.08); padding: 3px 0; }
.btn.red { background: var(--red); color: #fff; }
@media (max-width: 760px) { .adm { grid-template-columns: 1fr; } }
.items-h { margin: 12px 0 4px; font-size: 15px; }
.isl-build .bm-empty { grid-column: 1 / -1; padding: 10px; color: var(--muted); font-weight: 700; }
.items-note { margin-top: 10px; }
.paygems { display: flex; align-items: center; gap: 6px; cursor: pointer; color: #6a3cff; }

.gem-packs { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 8px; margin: 8px 0; }
.gem-pack { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px; background: linear-gradient(180deg, #f3ecff, #dccdff); box-shadow: 0 0 0 2px var(--ink); text-align: center; }
.gem-pack b { font-size: 26px; } .gem-pack em { font-style: normal; font-weight: 900; font-size: 18px; color: #6a3cff; } .gem-pack small { color: #c43c8a; font-weight: 800; } .gem-pack strong { font-size: 13px; }
.army-facts { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 14px; margin-bottom: 4px; }

/* messages: in the middle of the screen, easy to see */
#toast { top: 42%; bottom: auto; transform: translate(-50%, calc(-50% + 12px)); z-index: 90; padding: 14px 24px; font-size: 20px; font-weight: 800; max-width: min(560px, 88vw); box-shadow: 0 0 0 3px var(--ink), 0 8px 0 3px rgba(29,27,47,.3), 0 0 0 100vmax rgba(29,27,47,0); }
#toast.on { transform: translate(-50%, -50%); }
#toast.bad { background: #ffe0e3; color: #8a1f2a; }

/* ---- lobby: the island is impossible to miss ---- */
.mode.island-big { --bg: linear-gradient(135deg, #7fd8ff, #b8f0a0); background-size: cover; background-position: center; min-height: 150px; box-shadow: 0 0 0 3px var(--ink), 0 0 0 6px #4fae5a, 0 7px 0 5px rgba(29,27,47,.3); }
.mode.island-big .mode-txt b { font-size: 32px; }
.mode.island-big.wants { animation: islGlow 1.6s ease-in-out infinite; }
@keyframes islGlow { 50% { box-shadow: 0 0 0 3px var(--ink), 0 0 0 6px #d4ff1f, 0 0 26px 8px rgba(212,255,31,.75); } }
.isl-chips { position: relative; display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
.isl-chips span { background: rgba(29,27,47,.85); color: #fff; font-size: 13px; font-weight: 800; padding: 2px 8px; }
.mode-row.three { grid-template-columns: repeat(3, 1fr); gap: 10px; }
.mode-row.three .mode-txt b { font-size: 19px; }
.mode-row.three .mode-txt span { font-size: 12px; }
.mode[hidden] { display: none; }
/* ---- island coach ---- */
.isl-coach { display: none; position: absolute; left: 50%; top: 70px; transform: translateX(-50%); z-index: 12; width: min(520px, 92vw); background: var(--paper); padding: 10px 14px; }
.isl-coach.on { display: block; animation: drop .3s ease-out; }
.isl-coach p { margin: 2px 0 8px; font-size: 16px; font-weight: 700; line-height: 1.3; }
.isl-coach div { display: flex; align-items: center; gap: 8px; justify-content: flex-end; }
.isl-coach em { margin-right: auto; color: var(--muted); font-style: normal; font-size: 13px; font-weight: 800; }
.coach-n { font-size: 12px; font-weight: 900; color: var(--muted); }
.coach-mark { animation: coachPulse 1s ease-in-out infinite; position: relative; z-index: 3; }
@keyframes coachPulse { 50% { box-shadow: 0 0 0 4px #d4ff1f, 0 0 20px 8px rgba(212,255,31,.8); transform: translateY(-3px); } }

/* lobby on small screens: the mode column must never collapse (Ranked + Island were hidden behind the leaderboard) */
@media (max-width: 1000px) { .col-play { flex: none; max-height: none; overflow: visible; } }
/* phones held sideways: modes on the left, leaderboard one tap away on the right */
@media (orientation: landscape) and (max-height: 540px) {
  .lobby { inset: 56px 10px max(6px, env(safe-area-inset-bottom)); flex-direction: row; align-items: stretch; justify-content: flex-start; padding-top: 0; overflow: hidden; gap: 10px; }
  .col-play { flex: none; width: min(460px, 62vw); max-height: 100%; overflow: auto; gap: 6px; padding: 2px 6px 8px 2px; }
  .hub-logo { display: none; }
  .mode.big { min-height: 84px; } .mode.island-big { min-height: 92px; }
  .mode.big .mode-txt b, .mode.island-big .mode-txt b { font-size: 24px; }
  .mode-txt span { font-size: 12px; } .mode-ico { width: 34px; }
  .mode-row.three .mode { min-height: 54px; } .mode-row.three .mode-txt b { font-size: 16px; }
  .guest-note { font-size: 12px; padding: 5px 8px; }
  #s-hub.board-closed .col-board { display: none; }
  #s-hub:not(.board-closed) .col-board { display: flex; flex: 1; min-width: 0; height: 100%; overflow: auto; }
  .board-tab { display: flex !important; }
  #s-hub:not(.board-closed) .board-tab { display: none !important; }
}

/* ---- talk to a Mind ---- */
#mindp { display: flex; flex-direction: column; gap: 8px; }
#mindp .drawer-head em { margin-left: auto; font-style: normal; font-size: 13px; font-weight: 800; color: var(--muted); }
.dh-ico { font-size: 24px; }
.mp-list { display: flex; gap: 6px; overflow-x: auto; flex: none; padding: 3px; scrollbar-width: thin; }
.mp-list button { position: relative; flex: none; width: 58px; padding: 3px; background: #fff; box-shadow: 0 0 0 2px var(--ink); border: 0; cursor: pointer; font: 800 11px var(--body, inherit); }
.mp-list button.on { background: var(--lime); }
.mp-list img { width: 36px; height: 36px; object-fit: contain; image-rendering: pixelated; display: block; margin: 0 auto; }
.mp-list span { display: block; overflow: hidden; }
.mp-list i { position: absolute; top: 0; right: 2px; font-style: normal; font-size: 13px; }
.mp-job { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; flex: none; }
.mp-job button { padding: 5px 2px; background: #fff; box-shadow: 0 0 0 2px var(--ink); border: 0; cursor: pointer; font: 800 12px inherit; line-height: 1.1; }
.mp-job button.on { background: var(--lime); }
.mp-job i { display: block; font-style: normal; font-size: 18px; }
.mp-desc { margin: 0; font-size: 13px; color: var(--muted); font-weight: 700; flex: none; }
#mp-chat { flex: 1; min-height: 120px; overflow: auto; display: flex; flex-direction: column; gap: 5px; }
.msg small { display: block; font-size: 12px; color: var(--muted); }

/* ---- chat, mail, reports ---- */
.fr-tools { display: flex; align-items: center; gap: 6px; } .fr-tools small { flex: 1; font-size: 12px; }
.rep-text { width: 100%; padding: 8px; font: 700 15px var(--font); box-sizing: border-box; resize: vertical; }
.letter { background: #fff; box-shadow: 0 0 0 2px var(--ink); padding: 8px 10px; margin-bottom: 8px; }
.letter h4 { margin: 0; font-size: 16px; } .letter time { font-size: 12px; color: var(--muted); } .letter p { margin: 4px 0; font-size: 14px; white-space: pre-wrap; overflow-wrap: anywhere; }
.iconbtn .badge { position: absolute; }
.adm-tabs { display: flex; flex-wrap: wrap; gap: 5px; margin: 8px 0; }
.adm-box input.wide { width: 100%; }
.adm-stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px; }
.adm-stats div { background: var(--paper-2); padding: 8px; } .adm-stats b { display: block; font-size: 26px; } .adm-stats span { font-size: 12px; color: var(--muted); font-weight: 800; }
.adm-report { background: var(--paper-2); padding: 8px; margin-bottom: 6px; } .adm-report.done { opacity: .55; } .adm-report p { margin: 4px 0; white-space: pre-wrap; overflow-wrap: anywhere; }

/* ---- Mind Town, cup, AI keys ---- */
#town-cv { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; image-rendering: pixelated; }
.town-top { position: absolute; top: 8px; left: 8px; right: 8px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; background: var(--paper); padding: 6px 10px; font-weight: 800; font-size: 14px; }
#town-stay { color: var(--muted); font-size: 13px; }
.town-zoom { margin-left: auto; display: flex; gap: 5px; }
.town-side { position: absolute; left: 8px; bottom: 8px; width: min(400px, calc(100vw - 16px)); max-height: 56vh; display: flex; flex-direction: column; gap: 6px; background: var(--paper); padding: 8px; }
.town-side h4 { margin: 0; font-size: 15px; }
#town-feed { flex: 1; min-height: 60px; overflow: auto; font-size: 14px; overflow-wrap: anywhere; }
#town-feed .news { color: #8a5a00; font-weight: 800; }
.mode.town-tile { --bg: linear-gradient(135deg, #6c8f5a, #a8966a); min-height: 74px; }
.mode.cup-tile { --bg: linear-gradient(135deg, #7a5a22, #c79a3a); min-height: 74px; }
.mode.town-tile .mode-txt b, .mode.cup-tile .mode-txt b { font-size: 20px; }
.cup-row { display: flex; gap: 8px; align-items: center; padding: 3px 0; border-bottom: 1px solid rgba(0,0,0,.08); }
.cup-row span { flex: 1; font-weight: 800; } .cup-row em { font-style: normal; color: #b07a00; font-weight: 800; }
.ai-key { background: var(--paper-2); padding: 8px; } .ai-key code { display: block; margin-top: 4px; font-size: 13px; overflow-wrap: anywhere; user-select: all; }
.ai-row { display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; align-items: center; padding: 6px 0; border-bottom: 1px solid rgba(0,0,0,.08); }
.ai-row small { grid-column: 1; color: var(--muted); } .ai-row label { font-size: 13px; font-weight: 800; } .ai-row button { grid-column: 2; grid-row: 1 / span 2; }
.mode.town-tile .mode-txt span, .mode.cup-tile .mode-txt span { font-size: 12px; white-space: nowrap; }

@media (max-height: 520px) { .town-side { width: min(250px, 42vw); max-height: 46vh; padding: 5px; gap: 3px; } .town-side h4 { display: none; } #town-feed { min-height: 34px; font-size: 12px; } .town-top { padding: 3px 6px; } }

/* phones held upright: nothing may fall off the edge */
@media (max-width: 560px) {
  .topbtns { flex-wrap: wrap; justify-content: flex-end; gap: 4px; max-width: 62vw; }
  .topbtns .iconbtn { width: 38px; height: 38px; }
  #hub-tutorial { display: none; }   /* the Tutorial tile in the lobby does the same; keeps the top bar to two short rows */
  .isl-bottom { left: 0; right: 0; width: 100%; transform: none; }
  .isl-tools { width: 100%; max-width: 100vw; justify-content: flex-start; overflow-x: auto; -webkit-overflow-scrolling: touch; box-sizing: border-box; }
  .isl-tools > * { flex: none; }
  .town-zoom { margin-left: 0; flex-wrap: wrap; }
}

/* admin: how serious a problem is */
.adm-report.sev-critical { border-left: 5px solid #c0392b; } .adm-report.sev-high, .adm-report.sev-error { border-left: 5px solid #d98a1f; } .adm-report.sev-warning, .adm-report.sev-info { border-left: 5px solid #8a93a6; }
.legal-links { display: flex; gap: 12px; justify-content: center; font-size: 13px; font-weight: 800; margin-top: 8px; }
.legal-links a { color: inherit; }

/* ---- loading screen (loader.js): airship in pixel clouds + a card with tips ---- */
#loader { position: fixed; inset: 0; z-index: 40; display: none; place-items: center; background: #2b3f8f; }
#loader.on { display: grid; animation: fadein .25s; }
#loader canvas { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; image-rendering: pixelated; }
#loader .ld-card { position: relative; margin-top: 34vh; background: var(--paper); box-shadow: var(--ps); padding: 12px 20px 14px; width: min(440px, calc(100vw - 32px)); text-align: center; display: flex; flex-direction: column; gap: 6px; }
#loader .ld-title { font-size: clamp(19px, 4vw, 28px); letter-spacing: .03em; white-space: nowrap; }
#loader .ld-title::after { content: ''; animation: lddots 1.2s steps(4) infinite; }
@keyframes lddots { 0% { content: ''; } 25% { content: '.'; } 50% { content: '..'; } 75% { content: '...'; } }
#loader .ld-sub { font-size: 15px; color: var(--muted); min-height: 1.2em; }
#loader .ld-bar { height: 10px; background: #e3dccb; box-shadow: var(--ps); overflow: hidden; margin: 4px 0; }
#loader .ld-bar i { display: block; height: 100%; width: 30%; background: var(--lime); animation: ldbar 1.1s ease-in-out infinite; }
@keyframes ldbar { from { transform: translateX(-100%); } to { transform: translateX(340%); } }
#loader .ld-tip { font-size: 14px; margin: 0; min-height: 2.4em; }
@keyframes fadein { from { opacity: 0; } }
/* troop levels in Shop → Army */
.troop-lv { display: block; font-size: 12px; margin-top: 4px; color: var(--ink); } .troop-lv em { font-style: normal; color: #2f9e44; font-weight: 800; }
.troop-up { display: flex; gap: 4px; margin-top: 4px; flex-wrap: wrap; }
/* 🔥 burning village button on the island */
.isl-burn { display: none; border: 0; cursor: pointer; background: #e8481c; color: #fff; font-weight: 900; animation: burnpulse 1.2s ease-in-out infinite; }
.isl-burn.on { display: inline-block; }
@keyframes burnpulse { 50% { background: #ff7a2e; } }
/* 📜 raid history */
.rlog { display: flex; flex-direction: column; gap: 6px; max-height: 46vh; overflow-y: auto; margin-top: 8px; }
.rlog-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; background: var(--paper-2); padding: 6px 10px; }
.rlog-row small { display: block; color: var(--muted); font-size: 12px; }
.rlog-tabs { margin-top: 8px; }
.linkbtn { border: 0; background: none; padding: 0; font: 900 15px var(--font); color: var(--sky-d); text-decoration: underline; cursor: pointer; }

/* ✏️ island edit mode: what is selected + bulk actions */
.isl-edit { display: none; flex-wrap: wrap; align-items: center; gap: 6px; background: var(--paper); padding: 6px 8px; margin-bottom: 6px; max-height: 30vh; overflow-y: auto; }
.isl-edit.on { display: flex; }
.isl-edit .ed-what { font-size: 13px; margin-right: 4px; }
.isl-edit button { border: 0; padding: 5px 9px; background: var(--paper-2); font: 800 13px var(--font); cursor: pointer; box-shadow: 0 0 0 2px var(--ink); }
.isl-edit button.go { background: var(--lime); }
.isl-edit button.gem { background: #d9c8ff; }
.isl-edit button.gem.go { background: #b48cff; color: #fff; }

/* ✨ cosmetics: profile frames (looks only) and the Style shop */
.fr-gold { box-shadow: 0 0 0 3px #ffd84a, 0 0 0 5px #8a5a00, 0 0 14px 3px rgba(255, 200, 60, .7) !important; }
.fr-frost { box-shadow: 0 0 0 3px #bfefff, 0 0 0 5px #2f8fd0, 0 0 14px 3px rgba(127, 214, 255, .75) !important; }
.fr-flame { box-shadow: 0 0 0 3px #ffb02e, 0 0 0 5px #c43c3c, 0 0 16px 4px rgba(255, 106, 26, .8) !important; animation: frflame 1.4s ease-in-out infinite; }
.fr-prism { box-shadow: 0 0 0 3px #fff, 0 0 0 6px #9b6bff, 0 0 18px 5px rgba(212, 255, 31, .7) !important; animation: frprism 3s linear infinite; }
@keyframes frflame { 50% { box-shadow: 0 0 0 3px #ffd84a, 0 0 0 5px #e8481c, 0 0 22px 7px rgba(255, 140, 40, .9); } }
@keyframes frprism { 0% { filter: hue-rotate(0deg); } 100% { filter: hue-rotate(360deg); } }
.cos-back { width: 54px; height: 81px; object-fit: cover; image-rendering: pixelated; box-shadow: var(--ps); }
.cos-pfp { width: 56px; height: 56px; image-rendering: pixelated; background: var(--paper-2); margin: 6px; }
.shop-card.owned { outline: 3px solid var(--lime); }
.cos-sky { width: 96px; height: 54px; object-fit: cover; image-rendering: pixelated; box-shadow: var(--ps); }
/* victory confetti (pixel squares + a few crowns) */
.confetti { position: fixed; inset: 0; z-index: 30; pointer-events: none; overflow: hidden; }
.confetti i { position: absolute; top: -20px; width: 8px; height: 8px; animation: confall linear forwards; }
.confetti i.crown { width: 22px; height: 18px; background: url(assets/crown.png) center / contain no-repeat; image-rendering: pixelated; }
@keyframes confall { to { transform: translate(var(--dx), 110vh) rotate(var(--r)); } }
/* name colours (cosmetic) */
.nm-gold { color: #ffc53d !important; text-shadow: 0 0 6px rgba(255, 200, 60, .6); }
.nm-neon { color: #d4ff1f !important; text-shadow: 0 0 6px rgba(212, 255, 31, .8), 0 0 12px rgba(94, 200, 255, .6); }
.nm-rainbow { background: linear-gradient(90deg, #ff5263, #ffc53d, #d4ff1f, #5ec8ff, #9b6bff, #ff5263); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent !important; animation: nmrain 3s linear infinite; }
@keyframes nmrain { to { background-position: 200% 0; } }
.cos-name { display: inline-block; font-size: 15px; padding: 10px 4px; max-width: 110px; overflow-wrap: anywhere; line-height: 1.15; }
/* auras (cosmetic): a pulsing glow around a picture */
.au-gold { animation: augold 1.8s ease-in-out infinite; }
.au-frost { animation: aufrost 1.8s ease-in-out infinite; }
.au-void { animation: auvoid 2.2s ease-in-out infinite; }
.au-prism { animation: auprism 2.4s linear infinite; }
@keyframes augold { 0%, 100% { filter: drop-shadow(0 0 4px #ffd84a); } 50% { filter: drop-shadow(0 0 12px #ffb02e) drop-shadow(0 0 4px #fff3a8); } }
@keyframes aufrost { 0%, 100% { filter: drop-shadow(0 0 4px #9fe6ff); } 50% { filter: drop-shadow(0 0 12px #5ec8ff) drop-shadow(0 0 4px #ffffff); } }
@keyframes auvoid { 0%, 100% { filter: drop-shadow(0 0 5px #6a3cff); } 50% { filter: drop-shadow(0 0 14px #9b6bff) drop-shadow(0 0 3px #1d1b2f); } }
@keyframes auprism { 0% { filter: drop-shadow(0 0 10px #ff5263); } 25% { filter: drop-shadow(0 0 10px #ffc53d); } 50% { filter: drop-shadow(0 0 10px #d4ff1f); } 75% { filter: drop-shadow(0 0 10px #5ec8ff); } 100% { filter: drop-shadow(0 0 10px #ff5263); } }
/* titles (cosmetic): small words under a name */
.cos-title, [data-title]::after { display: block; font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #ffd84a !important; -webkit-text-fill-color: #ffd84a; background: none !important; text-shadow: 0 1px 0 #2b2340; animation: none; white-space: nowrap; }
[data-title]::after { content: '« ' attr(data-title) ' »'; }
.cos-name .cos-title { margin-top: 2px; }
.cos-trail { display: inline-block; font-size: 13px; padding: 16px 2px; white-space: nowrap; animation: trailbob 1.6s ease-in-out infinite; }
@keyframes trailbob { 50% { transform: translateX(4px); opacity: .75; } }

/* default card faces: a pixel frame in the card's colour, corner gems, a soft glow and a diamond pattern (no longer plain paper) */
.card, .rc-face {
  background:
    radial-gradient(circle at 50% 46%, color-mix(in srgb, var(--c, #8a7cff) 30%, #fff) 0 30%, transparent 31%),
    repeating-linear-gradient(45deg, rgba(29,27,47,.05) 0 3px, transparent 3px 9px),
    repeating-linear-gradient(-45deg, rgba(29,27,47,.05) 0 3px, transparent 3px 9px),
    linear-gradient(180deg, #fff, var(--paper) 60%, var(--paper-2));
}
.card { box-shadow: var(--ps), inset 0 0 0 3px #fff, inset 0 0 0 5px color-mix(in srgb, var(--c, #8a7cff) 75%, #1d1b2f), 0 9px 0 0 rgba(29,27,47,.3); }
.card.on { box-shadow: var(--ps), inset 0 0 0 3px #fff, inset 0 0 0 5px color-mix(in srgb, var(--c, #8a7cff) 75%, #1d1b2f), 0 0 0 7px var(--lime), 0 16px 0 2px rgba(29,27,47,.25); }
.card b, .rc-face b { position: relative; z-index: 1; }
.card i.gem, .rc-face i.gem { position: absolute; width: 6px; height: 6px; background: var(--c, #8a7cff); box-shadow: 0 0 0 2px #1d1b2f; transform: rotate(45deg); pointer-events: none; }
.card i.gem.a, .rc-face i.gem.a { top: 50%; left: 6px; } .card i.gem.b, .rc-face i.gem.b { top: 50%; right: 6px; }
.rc-face { box-shadow: 0 -4px 0 0 var(--ink), 0 4px 0 0 var(--ink), -4px 0 0 0 var(--ink), 4px 0 0 0 var(--ink), inset 0 0 0 5px #fff, inset 0 0 0 8px color-mix(in srgb, var(--c, #8a7cff) 75%, #1d1b2f), 0 12px 0 0 rgba(29,27,47,.35); }
/* a player's card (tap a Mind in Mind Town) */
.pcard { display: flex; align-items: center; gap: 14px; text-align: left; margin-bottom: 8px; }
.pcard img { width: 72px; height: 72px; image-rendering: pixelated; background: var(--paper-2); box-shadow: 0 0 0 3px var(--ink); }
.pcard h3 { margin: 0; } .pcard p { margin: 2px 0 0; }
/* 🧠 Your Mind: the Autopilot panel in the lobby (right side) */
.col-mind { width: min(330px, 27vw); max-height: 100%; overflow: auto; display: flex; flex-direction: column; gap: 8px; padding: 12px; margin-left: auto; background: linear-gradient(180deg, #f6f0ff, var(--paper) 40%); }
#s-hub.board-closed .col-mind { margin-right: 64px; }
.mp-head { display: flex; align-items: center; gap: 10px; } .mp-head > div { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.mp-head img { width: 44px; height: 44px; image-rendering: pixelated; box-shadow: 0 0 0 3px var(--ink); background: var(--paper-2); }
.mp-head small { color: var(--muted); font-size: 12px; }
.col-mind.running .mp-head img { animation: tappulse 1.2s ease-in-out infinite; }
.col-mind.folded .mp-body { display: none; } .col-mind.folded #mp-fold { transform: rotate(-90deg); }
.mp-body { display: flex; flex-direction: column; gap: 8px; }
.mp-plan { font-weight: 800; font-size: 13px; background: #fff; padding: 6px 8px; box-shadow: 0 0 0 2px var(--ink); }
.mp-now:empty { display: none; } .mp-now { font-size: 13px; color: #6b3fd1; font-weight: 800; }
.mp-row { display: flex; gap: 8px; align-items: center; } .mp-row .btn.primary { flex: 1; }
.mp-presets { display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: 6px; }
.mp-preset { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 4px; border: 0; background: var(--paper-2); box-shadow: 0 0 0 2px var(--ink); font: 800 12px var(--font); cursor: pointer; color: var(--ink); }
.mp-preset i { font-style: normal; font-size: 20px; } .mp-preset.on { background: #e7ff7a; }
.mp-chat { max-height: 150px; min-height: 60px; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; background: #fff; padding: 6px; box-shadow: 0 0 0 2px var(--ink); }
.mp-line { font-size: 13px; padding: 4px 8px; max-width: 90%; } .mp-line.mind { background: #efe6ff; align-self: flex-start; } .mp-line.me { background: #eaffb0; align-self: flex-end; }
.mp-log { list-style: none; margin: 0; padding: 0; font-size: 12px; display: grid; gap: 3px; max-height: 160px; overflow-y: auto; }
.mp-log time { color: var(--muted); margin-right: 6px; font-weight: 800; }
.col-mind.locked .mp-row, .col-mind.locked .mp-presets, .col-mind.locked .fr-add, .col-mind.locked .label, .col-mind.locked .mp-chat, .col-mind.locked .mp-log { display: none; }
.mp-hm { display: grid; gap: 6px; padding: 6px 8px 0; font-size: 12px; } .mp-hm:empty { display: none; } .mp-hm p { margin: 0; }
.mp-hm-row { display: flex; gap: 4px; align-items: center; } .mp-hm-row select { flex: 1; min-width: 0; font: 800 12px var(--font); padding: 3px; }
.mp-cog { font-size: 11px; white-space: nowrap; }
.col-mind.folded .mp-hm { display: none; }
@media (max-width: 900px) { .col-mind, #s-hub.board-closed .col-mind { width: auto; margin: 0; max-height: none; overflow: visible; } }
/* 🤝 trade drawer */
#trade { z-index: 55; overflow-y: auto; } .tr-ico { font-size: 30px; }
.tr-list { list-style: none; margin: 0; padding: 8px; background: #fff; box-shadow: 0 0 0 2px var(--ink); display: grid; gap: 4px; min-height: 34px; }
.tr-row { display: grid; grid-template-columns: 1fr 96px auto; gap: 8px; align-items: center; padding: 4px 0; } .tr-row input { width: 100%; } .tr-row small { color: var(--muted); }
#tr-add { width: 100%; padding: 6px; font: 700 14px var(--font); }
.tr-state { display: grid; gap: 4px; font-weight: 800; font-size: 14px; } .tr-state .ok { color: #2f9e44; }
.tr-sum { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; text-align: left; } .tr-sum ul { list-style: none; padding: 0; margin: 4px 0; } .warn { color: #c0392b; font-weight: 800; }
.isl-bmenu .bm-lock { font-size: 12px; font-weight: 800; color: #8a5a00; background: #fff3b0; padding: 4px 8px; box-shadow: 0 0 0 2px var(--ink); max-width: 220px; }

/* 🧠 AI Minds dock: floats on every screen, folds into a bubble */
.mdock { position: fixed; right: 12px; bottom: 12px; z-index: 45; width: 340px; max-width: calc(100vw - 24px); }
.mdock.hide { display: none; }
.mdock .md-bubble { display: none; align-items: center; gap: 6px; margin-left: auto; padding: 8px 12px; border: 0; cursor: pointer; background: linear-gradient(135deg, #9b6bff, #5ec8ff); color: #fff; font: 900 14px var(--font); box-shadow: 0 0 0 3px var(--ink), 0 6px 0 var(--ink); }
.mdock .md-bubble b { font-size: 20px; } .mdock .md-bubble i { font-style: normal; background: var(--lime); color: var(--ink); padding: 0 6px; font-size: 11px; } .mdock .md-bubble i:empty { display: none; }
.mdock.on .md-bubble { animation: mdpulse 1.6s ease-in-out infinite; }
@keyframes mdpulse { 50% { box-shadow: 0 0 0 3px var(--ink), 0 6px 0 var(--ink), 0 0 18px 6px rgba(155, 107, 255, .7); } }
.mdock.min .md-bubble, .mdock.fight .md-bubble { display: flex; } .mdock.min .md-win, .mdock.fight .md-win { display: none; }
.mdock.isl { bottom: 84px; }
.md-win { background: var(--paper); box-shadow: 0 0 0 3px var(--ink), 0 8px 0 var(--ink); max-height: min(78vh, 640px); display: flex; flex-direction: column; }
.md-head { display: flex; align-items: center; gap: 8px; padding: 8px 10px; background: linear-gradient(135deg, #9b6bff, #5ec8ff); color: #fff; }
.md-head b { font-size: 15px; } .md-head small { flex: 1; opacity: .9; font-size: 11px; }
.md-tabs { display: flex; gap: 4px; padding: 6px 8px; overflow-x: auto; background: var(--paper-2); } .md-tabs:empty { display: none; }
.md-tab { position: relative; flex: none; display: grid; justify-items: center; gap: 1px; padding: 3px; border: 0; cursor: pointer; background: #fff; box-shadow: 0 0 0 2px var(--ink); font: 800 10px var(--font); }
.md-tab img { width: 34px; height: 34px; image-rendering: pixelated; } .md-tab.on { background: var(--lime); } .md-tab em { position: absolute; top: -4px; right: -4px; font-style: normal; background: #9b6bff; color: #fff; width: 14px; height: 14px; line-height: 14px; font-size: 11px; }
.md-tab.run::after { content: ''; position: absolute; top: 2px; left: 2px; width: 7px; height: 7px; background: #3ddc5a; box-shadow: 0 0 0 1px var(--ink); animation: mdpulse 1.2s infinite; }
.md-body { padding: 8px 10px 10px; overflow-y: auto; display: grid; gap: 7px; font-size: 13px; }
.md-hero { display: flex; gap: 8px; align-items: center; } .md-hero img { width: 64px; height: 64px; image-rendering: pixelated; box-shadow: 0 0 0 2px var(--ink); flex: none; } .md-hero p { margin: 0; }
.md-or { display: grid; gap: 3px; font-size: 12px; font-weight: 800; } .md-or select { font: 800 13px var(--font); padding: 4px; }
.md-card { display: flex; gap: 8px; align-items: center; } .md-card img { width: 52px; height: 52px; image-rendering: pixelated; box-shadow: 0 0 0 2px var(--ink); }
.md-card div { display: grid; min-width: 0; } .md-card b { font-size: 15px; } .md-card small { font-size: 11px; color: var(--muted); }
.md-card .md-now { color: var(--ink); font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.md-row { display: flex; gap: 6px; flex-wrap: wrap; } .md-row .btn:first-child { flex: 1; }
.md-plan { background: #fff; padding: 6px 8px; box-shadow: 0 0 0 2px var(--ink); font-size: 12px; }
.md-presets { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 5px; }
.md-preset { display: flex; align-items: center; gap: 4px; padding: 5px; border: 0; cursor: pointer; background: #fff8e4; box-shadow: 0 0 0 2px var(--ink); font: 800 12px var(--font); text-align: left; }
.md-preset i { font-style: normal; font-size: 16px; } .md-preset.on { background: var(--lime); } .md-preset:hover { background: #fff1b8; }
.md-chat { display: flex; flex-direction: column; gap: 4px; max-height: 150px; overflow-y: auto; background: #fff; padding: 5px; box-shadow: 0 0 0 2px var(--ink); }
.md-foot { display: flex; gap: 6px; justify-content: space-between; }
.md-steps { margin: 6px 0; padding: 0; list-style: none; display: grid; gap: 4px; counter-reset: st; }
.md-steps li { display: grid; grid-template-columns: 26px 1fr; column-gap: 6px; background: #fff; padding: 5px 7px; box-shadow: 0 0 0 2px var(--ink); }
.md-steps i { grid-row: span 2; font-style: normal; font-size: 20px; align-self: center; } .md-steps span { font-size: 12px; color: var(--muted); }
.md-hist { list-style: none; margin: 0; padding: 0; display: grid; gap: 3px; max-height: 52vh; overflow-y: auto; font-size: 12px; }
.md-hist li { display: grid; grid-template-columns: 92px 22px 1fr; gap: 6px; align-items: center; background: #fff; padding: 3px 6px; }
.md-hist time { color: var(--muted); font-weight: 800; } .md-hist img { width: 22px; height: 22px; image-rendering: pixelated; }
/* 👁 Follow: watch a Mind play */
.mfollow { position: fixed; inset: 0; z-index: 46; display: none; place-items: center; background: rgba(29, 27, 47, .55); padding: 16px; }
.mfollow.on { display: grid; }
.mf-card { width: min(720px, 100%); display: grid; grid-template-columns: 1.1fr 1fr; background: var(--paper); box-shadow: 0 0 0 3px var(--ink), 0 10px 0 var(--ink); }
.mf-scene { position: relative; min-height: 280px; background: var(--scene) center / cover; image-rendering: pixelated; display: grid; place-items: end center; overflow: hidden; }
.mf-mind { width: 150px; height: 150px; image-rendering: pixelated; margin-bottom: 26px; filter: drop-shadow(0 6px 0 rgba(0, 0, 0, .35)); }
.mf-mind.walk { animation: mfwalk 1.2s ease-in-out infinite; }
@keyframes mfwalk { 0%, 100% { transform: translate(-30px, 0); } 25% { transform: translate(-10px, -6px); } 50% { transform: translate(30px, 0) scaleX(-1); } 75% { transform: translate(10px, -6px) scaleX(-1); } }
.mf-where { position: absolute; top: 8px; left: 8px; background: rgba(29, 27, 47, .8); color: #fff; padding: 3px 8px; font-weight: 800; font-size: 13px; }
.mf-info { padding: 10px 12px; display: grid; gap: 6px; align-content: start; } .mf-info b { font-size: 15px; }
.mf-now { margin: 0; font-weight: 800; background: #fff; padding: 6px 8px; box-shadow: 0 0 0 2px var(--ink); }
.mf-duel { display: flex; gap: 8px; align-items: center; justify-content: space-between; background: #2b2340; color: #fff; padding: 6px 8px; } .mf-duel b { font-size: 18px; color: var(--lime); }
.mf-log { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; font-size: 12px; max-height: 180px; overflow-y: auto; } .mf-log time { color: var(--muted); font-weight: 800; margin-right: 6px; }
@media (max-width: 640px) {
  .mdock { right: 8px; left: 8px; bottom: 8px; width: auto; } .mdock.min, .mdock.fight { left: auto; }
  .mf-card { grid-template-columns: 1fr; } .mf-scene { min-height: 190px; } .mf-mind { width: 110px; height: 110px; }
}
.md-head .iconbtn { color: var(--ink); }
/* dock: bigger, movable, the AI's thought */
.mdock.big { width: 480px; } .mdock.big .md-win { max-height: 90vh; } .mdock.big .md-chat { max-height: 340px; min-height: 200px; }
.mdock.moved { right: auto; bottom: auto; }
.md-head { cursor: grab; touch-action: none; user-select: none; } .md-head:active { cursor: grabbing; }
.md-bubble { touch-action: none; }
.md-chat { max-height: 240px; min-height: 120px; }
.md-think { color: #6a3cff !important; font-style: italic; white-space: normal !important; }
.md-trainbox { display: grid; gap: 8px; max-height: 60vh; overflow-y: auto; }
.md-train { border: 0; margin: 0; padding: 6px 8px; background: #fff; box-shadow: 0 0 0 2px var(--ink); display: grid; gap: 4px; }
.md-train legend { font-weight: 900; padding: 0 4px; background: var(--paper); }
.md-train label { display: grid; grid-template-columns: 120px 1fr; gap: 6px; align-items: center; font-size: 12px; font-weight: 800; }
.md-train select { font: 700 12px var(--font); padding: 3px; min-width: 0; }
/* Follow: the duel board and the AI's thought */
.mf-scene { flex-direction: column; }
.mf-bubble { position: absolute; top: 34px; left: 8px; right: 8px; background: #fff; color: var(--ink); padding: 5px 8px; font-size: 12px; font-weight: 800; box-shadow: 0 0 0 2px var(--ink); animation: drop .3s; }
.mf-card.duel .mf-mind { width: 90px; height: 90px; margin-bottom: 4px; }
.mf-board { position: relative; width: calc(100% - 16px); margin: 0 8px 8px; background: rgba(29, 27, 47, .88); color: #fff; padding: 6px 8px; display: grid; gap: 5px; font-size: 12px; }
.mf-crown { display: flex; align-items: center; gap: 8px; } .mf-crown b { font-size: 26px; color: #ffd84a; line-height: 1; } .mf-crown em { margin-left: auto; font-style: normal; color: var(--lime); }
.mf-vs { display: flex; justify-content: space-between; } .mf-vs b { color: var(--lime); font-size: 15px; }
.mf-hand { display: flex; flex-wrap: wrap; gap: 3px; }
.mf-c { display: inline-grid; place-items: center; width: 22px; height: 28px; background: #fff8e4; color: var(--ink); font-weight: 900; box-shadow: 0 0 0 2px #000; }
.mf-c.pick { background: var(--lime); transform: translateY(-4px); animation: mfpick 1s ease-in-out infinite; } .mf-c.win { background: #3ddc5a; } .mf-c.lose { background: #ff6b6b; }
@keyframes mfpick { 50% { transform: translateY(-7px); } }
.mf-spells i { font-style: normal; background: #9b6bff; padding: 0 5px; margin-right: 3px; }
.mf-acts { position: absolute; inset: 40% 0 auto; display: flex; justify-content: center; gap: 18px; font-size: 30px; pointer-events: none; }
.mf-acts i { font-style: normal; animation: mfpop 1.6s ease-in-out infinite; animation-delay: var(--d); }
@keyframes mfpop { 0%, 100% { transform: translateY(0) scale(.9); opacity: .6; } 50% { transform: translateY(-14px) scale(1.15); opacity: 1; } }

/* Mind Town chat: left side, bigger, with times and a filter */
.town-side-head { display: flex; align-items: center; gap: 6px; } .town-side-head h4 { flex: 1; }
.town-side-head .seg button { font-size: 11px; padding: 2px 6px; }
#town-feed { min-height: 160px; display: flex; flex-direction: column; gap: 2px; }
#town-feed > div { padding: 2px 4px; } #town-feed > div:nth-child(odd) { background: rgba(255, 255, 255, .5); }
#town-feed time { color: var(--muted); font-size: 11px; font-weight: 800; margin-right: 5px; }
#town-feed[data-show="chat"] .news, #town-feed[data-show="news"] .chat { display: none; }
.town-side.folded #town-feed, .town-side.folded .fr-add, .town-side.folded .seg { display: none; }
.town-side.folded { max-height: none; width: auto; }
/* cognition warnings: a big banner on every screen, and one inside the dock */
.mcog { position: fixed; top: 10px; left: 50%; transform: translateX(-50%); z-index: 48; display: none; align-items: center; gap: 10px; width: min(620px, calc(100vw - 16px)); padding: 10px 12px; background: #ffb02e; color: var(--ink); box-shadow: 0 0 0 3px var(--ink), 0 6px 0 var(--ink); animation: drop .3s; }
.mcog.on { display: flex; } .mcog.out { background: #ff5263; color: #fff; animation: mcogpulse 1.4s ease-in-out infinite; }
.mcog > b { font-size: 28px; } .mcog > div { flex: 1; display: grid; } .mcog strong { font-size: 16px; } .mcog span { font-size: 13px; }
@keyframes mcogpulse { 50% { box-shadow: 0 0 0 3px var(--ink), 0 6px 0 var(--ink), 0 0 22px 8px rgba(255, 82, 99, .8); } }
.md-cogwarn { display: grid; gap: 4px; padding: 8px; background: #ffb02e; box-shadow: 0 0 0 2px var(--ink); } .md-cogwarn.out { background: #ff5263; color: #fff; }
.md-cogwarn b { font-size: 15px; } .md-cogwarn span { font-size: 12px; }
#md-cog.low { color: #d62839; font-weight: 900; }
.md-add { border: 0; background: var(--lime); font: 900 11px var(--font); padding: 0 5px; cursor: pointer; box-shadow: 0 0 0 1px var(--ink); }
/* the folded dock is only its bubble (no empty frame around it) */
.mdock.px { box-shadow: none; background: none; }
.mdock.min, .mdock.fight { width: auto; }
/* readable text everywhere in the dock and Follow: nothing is cut off, it wraps */
.md-card div { min-width: 0; flex: 1; } .md-card small { font-size: 12px; overflow-wrap: anywhere; }
.md-card .md-now { white-space: normal; overflow: visible; text-overflow: clip; font-size: 13px; }
.md-think { display: block; font-size: 12px !important; line-height: 1.35; max-height: 9em; overflow-y: auto; }
.md-head small { font-size: 12px; } .md-tab span { font-size: 11px; } .md-tab img { width: 40px; height: 40px; }
.md-preset { font-size: 13px; line-height: 1.2; } .md-plan { font-size: 13px; line-height: 1.35; }
.mp-line { overflow-wrap: anywhere; line-height: 1.35; }
.mf-bubble { max-height: 45%; overflow-y: auto; line-height: 1.35; font-size: 13px; }
.mf-log li { line-height: 1.35; overflow-wrap: anywhere; } .mf-now { overflow-wrap: anywhere; }
.md-hist span { overflow-wrap: anywhere; line-height: 1.35; }
.md-train label { grid-template-columns: minmax(110px, 40%) 1fr; } .md-train select { width: 100%; white-space: normal; }
/* 👁 watching an AI play: a bar on top, and the duel hand cannot be played */
.watchbar { position: fixed; top: 8px; left: 50%; transform: translateX(-50%); z-index: 47; display: none; align-items: center; gap: 10px; padding: 6px 10px; background: linear-gradient(135deg, #9b6bff, #5ec8ff); color: #fff; width: min(640px, calc(100vw - 16px)); }
.watchbar.on { display: flex; } .watchbar span { flex: 1; font-size: 12px; opacity: .95; }
#s-duel.watch #d-hand, #s-duel.watch #d-spells, #s-duel.watch #d-lock { pointer-events: none; opacity: .8; }
.md-hist.buys li { grid-template-columns: 96px 22px 1fr; } .md-hist.buys li.real { background: #efe6ff; } .md-hist.buys i { font-style: normal; }
.adm-tx { font-size: 11px; overflow-wrap: anywhere; }
.mp-line.typing { font-style: italic; color: var(--muted); } .mp-line.typing i { animation: mdpulse 1s infinite; font-style: normal; } .mp-line.typing i:nth-child(2) { animation-delay: .2s; } .mp-line.typing i:nth-child(3) { animation-delay: .4s; }
.tos-ok { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; margin: 8px 0; text-align: left; } .tos-ok input { margin-top: 3px; }

/* Shop header: title, purchases, tabs, close (the close button never wraps away) */
#s-shop .pagehead { grid-template-columns: auto auto minmax(0, 1fr) auto; }
#s-shop .pagehead #shop-tabs { flex-wrap: nowrap; overflow-x: auto; max-width: 100%; }
#s-shop .pagehead #shop-hist { white-space: nowrap; }
@media (max-width: 760px) { #s-shop .pagehead { grid-template-columns: 1fr auto auto; } #s-shop .pagehead #shop-tabs { grid-column: 1 / -1; grid-row: 2; } }
/* the AI Minds bubble: big, bright, always in its corner when folded; in windows and fights it stays out of the way */
.mdock .md-bubble { padding: 10px 16px; gap: 10px; animation: mdpulse 2.2s ease-in-out infinite; }
.mdock .md-bubble b { font-size: 26px; } .mdock .md-bubble span { display: grid; text-align: left; line-height: 1.1; }
.mdock .md-bubble strong { font-size: 16px; } .mdock .md-bubble small { font-size: 11px; font-weight: 800; opacity: .95; }
.mdock.win .md-bubble, .mdock.fight .md-bubble { padding: 6px 10px; } .mdock.win .md-bubble small, .mdock.fight .md-bubble small { display: none; }
.mdock.win .md-bubble { display: flex; } .mdock.win .md-win { display: none; }
.mdock.win, .mdock.fight, .mdock.min { left: auto !important; top: auto !important; right: 12px; bottom: 12px; width: auto; }
.mdock.isl.min, .mdock.isl.win { bottom: 84px; }
.mdock.duelscr.fight { top: 40vh !important; bottom: auto; right: 8px; }   /* duels: over the arena art, clear of cards, spells and the ☰ menu */
.mdock.duelscr.fight .md-bubble { padding: 6px; width: 52px; height: 52px; justify-content: center; position: relative; } .mdock.duelscr.fight .md-bubble span { display: none; }
.mdock.duelscr.fight .md-bubble i { position: absolute; top: -8px; right: -8px; padding: 0 4px; font-size: 10px; }
@media (max-width: 640px) { .mdock.moved:not(.min):not(.fight):not(.win) { width: calc(100vw - 16px); } }

/* admin: the list of all players */
.adm-table { overflow: auto; max-height: 62vh; } .adm-table table { width: 100%; border-collapse: collapse; font-size: 12px; }
.adm-table th, .adm-table td { padding: 4px 6px; border-bottom: 1px solid rgba(0, 0, 0, .1); text-align: left; white-space: nowrap; }
.adm-table th { position: sticky; top: 0; background: var(--paper-2); } .adm-table tr[data-pid] { cursor: pointer; } .adm-table tr[data-pid]:hover { background: #fff3c4; }
/* no more cut-off button text: small buttons may wrap to two lines, and shop buttons share the row fairly */
.btn.small { white-space: normal; overflow: visible; text-overflow: clip; text-align: center; padding: 5px 10px; line-height: 1.15; }
.shop-grid { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.shop-btns { display: grid; grid-template-columns: repeat(auto-fit, minmax(78px, 1fr)); gap: 6px; }
.shop-btns .btn { min-width: 0; white-space: normal; font-size: 15px; padding: 6px 6px; }
.troop-up { display: grid; grid-template-columns: 1fr; gap: 5px; }
.troop-up .btn { width: 100%; font-size: 13px; white-space: normal; padding: 5px 8px; }
.troop-lv { line-height: 1.35; }
/* 🧠 AI Jobs: one big tap per job, a clear status, settings folded away */
.md-jobs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.md-job { display: grid; justify-items: center; gap: 2px; padding: 8px 4px; border: 0; cursor: pointer; background: #fff8e4; box-shadow: 0 0 0 2px var(--ink); font: 800 12px var(--font); line-height: 1.15; text-align: center; }
.md-job i { font-style: normal; font-size: 24px; } .md-job:hover { background: #fff1b8; } .md-job.on { background: var(--lime); box-shadow: 0 0 0 3px var(--ink); }
.md-status { display: grid; gap: 3px; padding: 8px 10px; background: #fff; box-shadow: 0 0 0 2px var(--ink); } .md-status.run { background: #f1ffe0; }
.md-status b { font-size: 15px; } .md-status .md-now { font-weight: 800; font-size: 13px; line-height: 1.35; overflow-wrap: anywhere; }
.md-set, .md-coach { background: #fff; box-shadow: 0 0 0 2px var(--ink); padding: 6px 8px; } .md-set summary, .md-coach summary { cursor: pointer; font-weight: 900; font-size: 13px; }
.md-set label { display: grid; gap: 3px; font-size: 12px; font-weight: 800; margin-top: 6px; } .md-set select, .md-set input { font: 700 13px var(--font); padding: 4px; width: 100%; }
.md-coach .md-chat { margin-top: 6px; } .md-pick { margin: 0; }
.md-tab em.job { background: var(--lime); color: var(--ink); width: auto; padding: 0 2px; font-size: 12px; }
@media (max-width: 420px) { .md-job { padding: 6px 2px; font-size: 11px; } .md-job i { font-size: 20px; } .md-mixhelp { font-size: 11px; line-height: 1.3; } }
@media (max-width: 330px) { .md-jobs { grid-template-columns: repeat(3, 1fr); } }
/* 📋 job plans: numbered jobs, the order strip, the job running now */
.md-jobhead { display: flex; align-items: center; justify-content: space-between; gap: 6px; } .md-jobhead .label { margin: 0; }
.md-mixhelp { line-height: 1.3; }
.md-job { position: relative; } .md-job .md-n { position: absolute; top: -6px; left: -6px; font-style: normal; background: var(--ink); color: #fff; width: 20px; height: 20px; display: grid; place-items: center; font-size: 12px; font-weight: 900; }
.md-job.now { animation: mdpulse 1.6s ease-in-out infinite; }
.md-order { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; font-size: 12px; font-weight: 800; padding: 6px 8px; background: #fff; box-shadow: 0 0 0 2px var(--ink); }
.md-order span { padding: 1px 6px; background: #fff8e4; } .md-order span.now { background: var(--lime); } .md-order b { opacity: .6; }
.md-status b small { font-size: 12px; opacity: .7; }
/* 🔍 proof that a real AI plays */
.md-proof { display: grid; gap: 4px; max-height: 50vh; overflow-y: auto; background: #fff; padding: 8px 10px; box-shadow: 0 0 0 2px var(--ink); text-align: left; }
.md-proof h4 { margin: 6px 0 2px; font-size: 14px; } .md-proof ol { margin: 0; padding-left: 18px; display: grid; gap: 4px; font-size: 12px; line-height: 1.35; overflow-wrap: anywhere; }
.md-proof time { display: block; color: var(--muted); font-weight: 800; font-size: 11px; }
.md-away { display: grid; gap: 3px; padding: 8px 10px; background: #2b2340; color: #fff; box-shadow: 0 0 0 2px var(--ink); } .md-away.on { background: linear-gradient(135deg, #2b2340, #4b3a8a); }
.md-away span { font-size: 12px; opacity: .9; } .md-away .btn { justify-self: start; }
.md-rules { display: grid; gap: 4px; margin-top: 6px; padding-top: 6px; border-top: 2px dashed rgba(0,0,0,.15); } .md-rules label { display: grid; grid-template-columns: minmax(100px, 40%) 1fr; gap: 6px; align-items: center; font-size: 12px; font-weight: 800; } .md-rules select { width: 100%; font: 700 12px var(--font); padding: 3px; }
/* 👁 Follow: a live card (animated scene, steps of the round, thought, countdown, newest moments) */
.mf-card2 { width: min(860px, 100%); display: grid; grid-template-columns: 1.25fr 1fr; background: var(--paper); box-shadow: 0 0 0 3px var(--ink), 0 10px 0 var(--ink); max-height: calc(100vh - 32px); overflow: hidden; }
.mf-stage { position: relative; min-height: 360px; background: var(--scene) center / cover; image-rendering: pixelated; overflow: hidden; }
.mf-stage::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20, 14, 40, .35), rgba(20, 14, 40, 0) 35%, rgba(20, 14, 40, .55)); pointer-events: none; }
.mf-stage > * { position: absolute; z-index: 1; }
.mf-where { top: 10px; left: 10px; background: rgba(20, 14, 40, .85); color: #fff; padding: 4px 10px; font-weight: 900; font-size: 13px; box-shadow: 0 0 0 2px #000; }
.mf-live { top: 10px; right: 10px; background: #000; color: #ff5a5f; font: 900 12px var(--font); padding: 3px 8px; letter-spacing: 1px; animation: mflive 1.2s steps(2) infinite; }
@keyframes mflive { 50% { opacity: .35; } }
.mf-hero { width: 128px; height: 128px; left: calc(50% - 64px); bottom: 26px; image-rendering: pixelated; filter: drop-shadow(0 8px 0 rgba(0, 0, 0, .4)); }
.mf-rival { width: 104px; height: 104px; right: 12%; bottom: 30px; image-rendering: pixelated; transform: scaleX(-1); filter: drop-shadow(0 8px 0 rgba(0, 0, 0, .4)); animation: mfbob 1.8s ease-in-out infinite reverse; }
.s-duel .mf-hero { left: 14%; }
.a-rest { animation: mfbreathe 3s ease-in-out infinite; } .a-island { animation: mfwork 0.9s ease-in-out infinite; } .a-duel { animation: mfbob 1.6s ease-in-out infinite; }
.a-raid { animation: mfmarch 0.7s steps(2) infinite; } .a-adventure { animation: mfwalk2 4s linear infinite; } .a-town { animation: mfbob 2.2s ease-in-out infinite; }
@keyframes mfbob { 50% { transform: translateY(-10px); } }
@keyframes mfbreathe { 50% { transform: scale(1.04, .96) translateY(3px); } }
@keyframes mfwork { 0%, 100% { transform: rotate(0); } 30% { transform: rotate(-8deg) translateY(-6px); } 60% { transform: rotate(6deg); } }
@keyframes mfmarch { 50% { transform: translateY(-6px) rotate(-3deg); } }
@keyframes mfwalk2 { 0% { transform: translateX(-110px); } 50% { transform: translateX(110px); } 50.01% { transform: translateX(110px) scaleX(-1); } 100% { transform: translateX(-110px) scaleX(-1); } }
.mf-fx { inset: 0; pointer-events: none; } .mf-fx i { position: absolute; left: var(--x); bottom: 40%; font-style: normal; font-size: 28px; animation: mffloat 2.4s ease-in-out infinite; animation-delay: var(--d); opacity: 0; }
@keyframes mffloat { 0% { transform: translateY(20px) scale(.6); opacity: 0; } 30% { opacity: 1; } 100% { transform: translateY(-70px) scale(1.1); opacity: 0; } }
.mf-thought { left: 10px; right: 10px; top: 46px; background: #fff; color: var(--ink); padding: 8px 10px; font: 800 13px/1.35 var(--font); box-shadow: 0 0 0 2px #000, 0 4px 0 #000; max-height: 38%; overflow-y: auto; animation: drop .3s; }
.mf-score { left: 10px; right: 10px; bottom: 8px; display: flex; justify-content: space-between; align-items: center; background: rgba(20, 14, 40, .88); color: #fff; padding: 4px 10px; font-weight: 800; font-size: 12px; }
.mf-score b { color: var(--lime); font-size: 20px; margin: 0 6px; } .mf-score em { font-style: normal; color: #ffd84a; font-weight: 900; text-align: center; display: grid; } .mf-score small { color: #cfc6ea; font-size: 10px; }
.mf-side { padding: 12px; display: grid; gap: 10px; align-content: start; overflow-y: auto; }
.mf-who { display: flex; gap: 8px; align-items: center; } .mf-who img { width: 40px; height: 40px; image-rendering: pixelated; box-shadow: 0 0 0 2px var(--ink); background: #fff; } .mf-who b { display: block; font-size: 16px; } .mf-who small { color: var(--muted); font-weight: 800; }
.mf-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px; }
.mf-steps li { flex: 1 1 auto; text-align: center; padding: 4px 6px; font: 900 11px var(--font); background: #ece4cc; color: #8a8199; box-shadow: 0 0 0 2px rgba(0, 0, 0, .15); }
.mf-steps li.ok { background: #d7f5a6; color: var(--ink); } .mf-steps li.now { background: var(--lime); color: var(--ink); box-shadow: 0 0 0 2px var(--ink); animation: mfpulse 1s ease-in-out infinite; }
@keyframes mfpulse { 50% { transform: translateY(-2px); } }
.mf-nowbox { background: var(--ink); color: #fff; padding: 8px 10px; box-shadow: 0 4px 0 #000; } .mf-nowbox small { color: var(--lime); font-weight: 900; font-size: 11px; letter-spacing: 1px; }
.mf-nowbox p { margin: 3px 0 0; font-weight: 800; line-height: 1.35; overflow-wrap: anywhere; }
.mf-bar { height: 8px; background: rgba(255, 255, 255, .15); margin: 6px 0 2px; } .mf-bar i { display: block; height: 100%; background: var(--lime); transition: width 1s linear; }
.mf-feed { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: 12px; }
.mf-feed li { display: grid; grid-template-columns: 34px 1fr; gap: 6px; padding: 4px 6px; background: #fff; box-shadow: 0 0 0 2px rgba(0, 0, 0, .12); line-height: 1.3; overflow-wrap: anywhere; }
.mf-feed li.new { box-shadow: 0 0 0 2px var(--ink); animation: drop .3s; } .mf-feed time { font-weight: 900; color: var(--muted); }
@media (max-width: 700px) { .mf-card2 { grid-template-columns: 1fr; overflow-y: auto; } .mf-stage { min-height: 230px; } .mf-hero { width: 96px; height: 96px; left: calc(50% - 48px); } .mf-rival { width: 80px; height: 80px; } }

/* 📣 invite link box */
.invite-link { background: #fff; color: var(--ink); padding: 10px 12px; margin: 8px 0; box-shadow: 0 0 0 3px var(--ink); word-break: break-all; font-weight: 800; font-size: 14px; user-select: all; }
.xtag { color: inherit; font-weight: 900; text-decoration: none; white-space: nowrap; } .xtag:hover { text-decoration: underline; }