/* Wispmarch layout. Game colours live in game.js. (c) 2026 CyberMax. */
.wrap{max-width:1040px}
.headline h1{font-size:clamp(20px,4vw,30px);margin:0 0 8px}.headline h1 .num{color:var(--muted);font-weight:700;font-size:.62em}
.stage{position:relative;height:clamp(420px,calc(100svh - 150px),760px);border-radius:20px;overflow:hidden;background:#120F24;box-shadow:var(--shadow);color:#F3EEFF}
#c{display:block;width:100%;height:100%;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent;outline:none}
.hudbtn{position:absolute;right:10px;top:10px;width:44px;height:44px;border-radius:12px;border:0;background:rgba(255,255,255,.12);color:#fff;font-size:16px;cursor:pointer;z-index:2}
.ov{position:absolute;inset:0;z-index:3;display:flex;align-items:center;justify-content:center;background:rgba(10,8,24,.72);backdrop-filter:blur(3px);overflow:auto;padding:16px}
.ov.over{background:rgba(10,8,24,.82)}
.menu-in{width:100%;max-width:520px;margin:auto;text-align:center;display:flex;flex-direction:column;align-items:center;gap:8px}
.kick{margin:0;color:#FFC857;font-weight:800;font-size:12px;letter-spacing:.12em;text-transform:uppercase}
.title{margin:0;font-size:clamp(34px,8vw,54px);letter-spacing:-.02em;color:#FFE9A8;text-shadow:0 0 24px rgba(255,200,87,.55)}
.title.sm{font-size:clamp(26px,6vw,36px)}
.ov .chips{justify-content:center}
.ov .chip{background:rgba(255,255,255,.08);color:#F3EEFF;border-color:rgba(255,255,255,.2)}
.ov .chip[aria-pressed=true]{background:#FFC857;color:#120F24;border-color:#FFC857}
.ov .btn.ghost{color:#F3EEFF;border-color:rgba(255,255,255,.28)}
.ov .muted{color:#BDB4D9}
.btn.big{min-height:56px;font-size:20px;padding:12px 34px;background:#FFC857;color:#120F24;box-shadow:0 0 30px rgba(255,200,87,.45)}
.modline{margin:0;min-height:1.2em}
.lbl{margin:6px 0 0;font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#BDB4D9}
.pick{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.pick button{min-width:64px;min-height:44px;border-radius:12px;border:1.5px solid rgba(255,255,255,.2);background:rgba(255,255,255,.06);color:#F3EEFF;font:inherit;font-size:13px;font-weight:700;cursor:pointer;padding:6px 10px;position:relative;display:flex;flex-direction:column;align-items:center;line-height:1.2}
.pick button i{font-style:normal;font-size:18px}
.pick button[aria-pressed=true]{border-color:#FFC857;background:rgba(255,200,87,.16)}
.pick button.locked{opacity:.55}.pick button.locked::after{content:"🔒";position:absolute;right:-6px;top:-8px;font-size:12px}
.pick button.passlock::after{content:"🔒 Fun Pass";font-size:9px;right:-4px;top:-9px;background:#FF6A3D;color:#120F24;border-radius:6px;padding:1px 4px}
.pick .dot{width:18px;height:18px;border-radius:50%;display:block;margin-bottom:2px}
.mrow{justify-content:center;margin-top:6px}
#shoplist,#cardlist{display:grid;gap:8px;width:100%}
.srow{display:flex;align-items:center;gap:10px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);border-radius:12px;padding:8px 10px;text-align:left}
.srow .ic{font-size:22px;width:30px;text-align:center}.srow .tx{flex:1;font-size:14px}.srow .tx b{display:block;font-size:15px}
.srow .pips{color:#FFC857;letter-spacing:2px;font-size:12px}
.card{display:flex;align-items:center;gap:12px;text-align:left;width:100%;min-height:72px;border-radius:14px;border:2px solid rgba(255,255,255,.2);background:rgba(30,24,62,.92);color:#F3EEFF;font:inherit;cursor:pointer;padding:10px 14px;animation:pop .28s cubic-bezier(.2,1.6,.4,1) both}
.card:hover,.card:focus-visible{border-color:#FFC857;transform:translateY(-2px)}
.card .ic{font-size:28px;width:40px;text-align:center}.card b{display:block;font-size:16px}.card small{color:#BDB4D9;font-size:13px}
.card .k{margin-left:auto;font-size:11px;color:#8F86B3;border:1px solid #4A4270;border-radius:6px;padding:1px 6px}
.card.evo{border-color:#FFC857;background:linear-gradient(135deg,rgba(255,200,87,.25),rgba(255,106,61,.2))}
.card.new b::after{content:" NEW";color:#45E0B4;font-size:11px}
.card:nth-child(2){animation-delay:.06s}.card:nth-child(3){animation-delay:.12s}
@keyframes pop{from{opacity:0;transform:scale(.8)}to{opacity:1;transform:none}}
.build{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;font-size:13px}.build span{background:rgba(255,255,255,.08);border-radius:8px;padding:3px 8px}
.under{justify-content:center;margin:10px 0}
.grid{font-size:22px;letter-spacing:2px;margin:2px 0;white-space:pre-line;line-height:1.3}
.emb{margin:0;color:#FFC857;font-weight:800}
.cen{justify-content:center}
.over .fp-after{background:rgba(255,255,255,.06);border-radius:12px;padding:8px 12px;font-size:14px;text-align:left;color:#F3EEFF}
@media (max-width:560px){.stage{border-radius:14px;margin:0 -8px}.headline h1{font-size:20px}}