/* Squeek Arena base layout layer, adapted from the Sprint project.
   The monochrome retro theme near the end of this file re-skins these
   rules black and white; the layout itself lives here. */
:root{
  --ink:#33241a; --ink-soft:#7a5c40; --paper:#fdf3d8; --card:#fffaf0;
  --line:#33241a; --accent:#e8622c;
  --sky:#ffe1a8; --radius:6px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:Verdana,Geneva,system-ui,sans-serif;font-size:16px;line-height:1.55;
  background:var(--paper);color:var(--ink);
  background-image:repeating-linear-gradient(0deg,rgba(51,36,26,.045) 0 4px,transparent 4px 8px)}
.page{max-width:560px;margin:0 auto;padding:14px 14px 40px}
.hidden{display:none!important}
.hint{font-size:.86rem;color:var(--ink-soft);line-height:1.5;font-style:italic}.row{display:flex;align-items:center}kbd{background:#fff;border:2px solid var(--ink);border-bottom-width:4px;padding:0 6px;font-size:.85em}
code{background:#ffe9bd;padding:0 4px;font-size:.92em}

/* header */
.pixel-sprite{image-rendering:pixelated;image-rendering:crisp-edges}

/* cards & buttons */
.card{background:var(--card);border:3px solid var(--line);border-radius:var(--radius);
  padding:16px;margin-bottom:16px;box-shadow:6px 6px 0 rgba(51,36,26,.85)}
.card h2{margin:0 0 10px;font-size:1.02rem;font-weight:700}
.btn{appearance:none;border:3px solid var(--ink);background:#fff;color:var(--ink);border-radius:var(--radius);
  padding:11px 16px;font-size:.95rem;font-weight:700;cursor:pointer;box-shadow:0 4px 0 var(--ink)}
.btn:active{transform:translateY(3px);box-shadow:0 1px 0 var(--ink)}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn-primary{background:var(--accent);color:#fff}
.btn-ghost{color:var(--ink-soft);box-shadow:0 4px 0 #b9a184}
.badge{font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;background:var(--sky);border:2px solid var(--ink);padding:3px 8px;color:#8a5a1d;white-space:nowrap}

/* challenge card */.tier{display:inline-block;background:#fff0bd;border:2px solid var(--ink);color:#8a5a1d;padding:2px 9px;font-size:.78rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em}

/* trophy shelf + themes */

/* how to + footer */
.howto ol{margin:0;padding-left:20px;line-height:1.6;font-size:.94rem}

/* race: blocky pixel track: hard-stop stripes, dirt strip, checker flags */
#rhythmHint{color:var(--ink-soft);font-weight:400;font-style:italic}

/* result */


/* ================= Squeek Arena ================= */
.arena-trainer-row{display:flex;gap:12px;flex-wrap:wrap}
.arena-choice{display:flex;flex-direction:column;align-items:center;gap:6px;background:#fff8e6;border:3px solid var(--ink);border-radius:10px;padding:10px 16px;cursor:pointer;font-weight:700;font-family:inherit}
.arena-choice.selected{background:#ffe1a8;box-shadow:inset 0 0 0 3px #e8622c}
.arena-boss-card{display:flex;gap:12px;align-items:center;border:2px solid var(--ink);border-radius:10px;padding:8px 12px;margin:8px 0;background:#fff8e6}
.arena-boss-card .btn{margin-left:auto}
.pk-stage{position:relative;height:330px;background:linear-gradient(#fdf3d8 62%,#cfe8a8 62%);border:3px solid var(--ink);border-radius:8px;overflow:hidden}
.pk-info{position:absolute;background:#fffdf4;border:3px solid var(--ink);border-radius:8px;padding:6px 10px;min-width:185px;z-index:3}
.pk-info-enemy{top:10px;left:10px}
.pk-info-player{bottom:10px;right:10px}
.pk-info-row{display:flex;justify-content:space-between;gap:12px;font-weight:800}
.pk-hp{display:flex;align-items:center;gap:6px;margin-top:4px}
.pk-hp-label{font-size:.7rem;font-weight:800;color:#b3541e}
.pk-hp-track{flex:1;height:10px;background:#e7dcc3;border:2px solid var(--ink);border-radius:5px;overflow:hidden}
.pk-hp-fill{height:100%;width:100%;transition:width .4s ease}
.pk-hp-num{font-size:.8rem;font-weight:700;text-align:right;margin-top:2px}
.pk-boss{position:absolute;top:14px;right:16px;width:130px;height:165px}
.pk-player{position:absolute;bottom:6px;left:16px;width:130px;height:165px}
.pk-trainer{position:absolute;bottom:6px;left:30px;width:100px;height:150px}
.pk-box{margin-top:10px;border:3px solid var(--ink);border-radius:8px;background:#fffdf4;padding:12px;box-shadow:inset 0 0 0 3px #fdf3d8}
.pk-msg{font-weight:700;margin:0 0 6px}
.pk-q{font-size:1.05rem;margin:0 0 8px;min-height:1.4em}
.pk-timer{height:8px;background:#e7dcc3;border-radius:4px;overflow:hidden;margin-bottom:10px}
.pk-timer-fill{height:100%;background:#e8622c;width:100%}
.pk-answers{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.pk-actions{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}
.pk-shake{animation:pkshake .35s}
@keyframes pkshake{0%,100%{transform:translateX(0)}25%{transform:translateX(-7px)}75%{transform:translateX(7px)}}
.arena-cert-title{font-family:"Courier New",ui-monospace,monospace;font-weight:700;font-size:1.35rem;letter-spacing:.03em}
.arena-cert-row{display:flex;gap:18px;align-items:flex-end;margin:10px 0}
@media (max-width:560px){
  .pk-answers{grid-template-columns:1fr}
  .pk-boss,.pk-player{width:104px;height:132px}
  .pk-trainer{width:80px;height:120px}
  .pk-stage{height:300px}
  .pk-info{min-width:150px}
}

/* ================= Arena screens ================= */
.menu-buttons{display:flex;flex-direction:column;gap:10px;margin:14px 0}
.nav-row{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}

/* ================= Retro game theme ================= */
body{background:#5c94fc}
.page{position:relative;z-index:1}
.hud{display:flex;justify-content:space-between;gap:10px;font-family:"Press Start 2P",monospace;font-size:clamp(9px,2.6vw,12px);color:#fff;text-shadow:2px 2px 0 rgba(0,0,0,.35);padding:8px 4px 2px}
.screen{animation:screenIn .22s steps(4)}
@keyframes screenIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.screen h2{font-family:"Press Start 2P",monospace;font-size:15px;line-height:1.6}
#screenHome{background:transparent;border:none;box-shadow:none;padding-top:6px}
.title-sign{background:#c84c0c;border:4px solid #5e2603;box-shadow:inset 0 0 0 3px #e88a4a,0 6px 0 rgba(0,0,0,.25);padding:28px 10px 20px;text-align:center;animation:signFloat 3.2s ease-in-out infinite}
@keyframes signFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
.title-logo{font-family:"Press Start 2P",monospace;font-size:clamp(24px,7vw,42px);color:#ffe9c9;text-shadow:3px 3px 0 #5e2603;line-height:1.3;margin:0}
.title-sub{font-family:"Press Start 2P",monospace;font-size:clamp(8px,2.4vw,10px);color:#ffd9a0;margin:14px 0 0;letter-spacing:1px}.menu-wrap{position:relative;width:fit-content;margin:16px auto 8px;padding-left:56px}
.menu-buttons{display:flex;flex-direction:column;gap:16px;align-items:flex-start}
.menu-item{font-family:"Press Start 2P",monospace;font-size:clamp(12px,3.6vw,15px);background:none;border:none;color:#fff;text-shadow:2px 2px 0 rgba(0,0,0,.4);cursor:pointer;padding:3px 2px;text-align:left}
.menu-item:hover,.menu-item.focused{color:#ffe9c9}
.menu-cursor{position:absolute;left:0;top:0;width:30px;height:38px;transition:top .12s steps(3);animation:bob .5s steps(2) infinite}
.ground{height:64px;margin-top:12px;position:relative;background-color:#9c5a24;background-image:linear-gradient(#79c94f,#79c94f),repeating-linear-gradient(90deg,rgba(60,30,5,.35) 0 2px,transparent 2px 36px),repeating-linear-gradient(0deg,rgba(60,30,5,.3) 0 2px,transparent 2px 18px);background-size:100% 12px,100% calc(100% - 12px),100% calc(100% - 12px);background-position:top,0 12px,0 12px;background-repeat:no-repeat,repeat,repeat}

@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
.anim-bob{animation:bob .55s steps(2) infinite}
.pk-lunge-r{animation:lungeR .45s steps(6)}
@keyframes lungeR{30%{transform:translateX(56px) translateY(-8px)}100%{transform:translateX(0)}}
.pk-lunge-l{animation:lungeL .45s steps(6)}
@keyframes lungeL{30%{transform:translateX(-56px) translateY(-8px)}100%{transform:translateX(0)}}
.pk-flash{animation:flashAnim .35s steps(3)}
@keyframes flashAnim{0%{filter:brightness(2.6)}100%{filter:brightness(1)}}
@keyframes gshake{0%,100%{transform:translateX(0) rotate(0)}25%{transform:translateX(-4px) rotate(-3deg)}75%{transform:translateX(4px) rotate(3deg)}}

/* ================= Monochrome (black and white retro) ================= */
:root{--ink:#141414;--ink-soft:#555555;--paper:#f4f4f4;--card:#ffffff}
body{background:#f4f4f4}
.hud{color:#141414;text-shadow:none}
.cloud,.cloud::before,.cloud::after{background:#e0e0e0}
.title-sign{background:#141414;border-color:#000000;box-shadow:inset 0 0 0 3px #f4f4f4,0 6px 0 rgba(0,0,0,.22)}
.title-logo{color:#ffffff;text-shadow:3px 3px 0 #000000}
.title-sub{color:#d9d9d9}
.menu-wrap{width:max-content;max-width:92vw}
.menu-item{color:#141414;text-shadow:none}
.menu-item:hover,.menu-item.focused{color:#ffffff;background:#141414}
.menu-cursor{left:4px}
.ground{background-color:#f7f7f7;background-image:linear-gradient(#161616,#161616),repeating-linear-gradient(90deg,rgba(0,0,0,.6) 0 2px,transparent 2px 36px),repeating-linear-gradient(0deg,rgba(0,0,0,.55) 0 2px,transparent 2px 18px);background-size:100% 12px,100% calc(100% - 12px),100% calc(100% - 12px);background-position:top,0 12px,0 12px;background-repeat:no-repeat,repeat,repeat}
.btn{background:#141414;color:#ffffff;border-color:#000000}
.btn-ghost{background:#ffffff;color:#141414}
.arena-boss-card{background:#fafafa}
.arena-choice{background:#ffffff}
.arena-choice.selected{background:#e9e9e9;box-shadow:inset 0 0 0 3px #141414}
.pk-stage{background:linear-gradient(#ffffff 62%,#e4e4e4 62%)}
.pk-box{background:#ffffff;box-shadow:inset 0 0 0 3px #e8e8e8}
.pk-hp-track{background:#e2e2e2}
.pk-timer{background:#e2e2e2}
.pk-timer-fill{background:#141414}
.btn-ghost{box-shadow:0 4px 0 #141414}

/* ================= Tidy pass: centering and overflow guards ================= */
.screen p,.hint{overflow-wrap:break-word}
.screen h2{text-align:center}
.nav-row{justify-content:center}
.arena-trainer-row{justify-content:center}
#screenGacha p{text-align:center}
#arenaSummary,#arenaLiveNote{text-align:center}
#screenHowto ol{max-width:56ch;margin-left:auto;margin-right:auto;text-align:left}
#screenCertified{text-align:center}
.arena-cert-row{justify-content:center}
.title-logo{overflow-wrap:break-word}
.menu-item{line-height:1.5}
.hud{flex-wrap:nowrap}
.hud span{white-space:nowrap}
.arena-boss-card{flex-wrap:nowrap}
.arena-boss-card>div{flex:1;min-width:0;overflow-wrap:break-word}
.arena-boss-card canvas{flex-shrink:0}
.arena-boss-card .btn{flex-shrink:0}
.pk-q,.pk-msg{text-align:center}
.pk-actions{justify-content:center}
.pk-answer{overflow-wrap:anywhere;line-height:1.35}
.pk-info{max-width:47%}
.pk-info-row span:first-child{overflow-wrap:anywhere}
@media (max-width:480px){
  .arena-boss-card{flex-wrap:wrap}
  .arena-boss-card .btn{margin-left:0;width:100%}
  .hud{font-size:8px}
}

/* ================= Tidy pass 2: audit fixes ================= */
.arena-choice.selected{background:#dedede;box-shadow:none}
.nav-row .btn{min-width:150px}
.pk-actions .btn{flex:1 1 0}
/* ================= Tidy pass 3: clouds confined, equal nav buttons ================= */
#screenHome{position:relative;overflow:hidden}
#screenHome .cloud{position:absolute;top:10px;left:3%;z-index:0}
#screenHome .cloud-b{left:auto;right:4%;top:16px}.nav-row .btn{flex:1 1 0;max-width:340px}

/* ================= Gacha stage: a real gacha moment ================= */
.gacha-stage{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:330px;padding:10px 0 4px;overflow:hidden}
.gacha-box{cursor:pointer;animation:gachaWiggle 1.5s ease-in-out infinite}
@keyframes gachaWiggle{0%,58%,100%{transform:rotate(0deg)}64%{transform:rotate(-4deg) translateX(-2px)}72%{transform:rotate(4deg) translateX(2px)}80%{transform:rotate(-3deg)}88%{transform:rotate(2deg)}}
.gacha-box.gacha-wiggle-hard{animation:gachaHard .12s linear infinite}
@keyframes gachaHard{0%{transform:rotate(-5deg) translateX(-2px)}50%{transform:rotate(5deg) translateX(2px)}100%{transform:rotate(-5deg) translateX(-2px)}}.gacha-prompt{font-family:'Press Start 2P',monospace;font-size:12px;margin-top:18px;cursor:pointer;animation:promptBlink 1.1s steps(2,start) infinite}
@keyframes promptBlink{50%{opacity:.15}}
.gacha-flash{position:absolute;inset:0;background:#fff;opacity:0;pointer-events:none}
.gacha-flash.on{animation:gachaFlashA .5s ease-out}
@keyframes gachaFlashA{0%{opacity:0}12%{opacity:1}100%{opacity:0}}
.gacha-rays{position:absolute;left:50%;top:42%;width:340px;height:340px;transform:translate(-50%,-50%);border-radius:50%;background:repeating-conic-gradient(from 0deg,#e6e6e6 0deg 10deg,rgba(0,0,0,0) 10deg 22deg);animation:raysSpin 16s linear infinite;pointer-events:none}
.gacha-stage.jackpot .gacha-rays{background:repeating-conic-gradient(from 0deg,#c6c6c6 0deg 10deg,rgba(0,0,0,0) 10deg 22deg);animation-duration:6s}
@keyframes raysSpin{to{transform:translate(-50%,-50%) rotate(360deg)}}
#arenaPartner{position:relative;text-align:center}
#arenaPartner canvas,#arenaPartner p{position:relative;z-index:1}
.gacha-result-sprite{animation:resultPop .45s cubic-bezier(.2,1.6,.4,1),resultBob 2.2s ease-in-out .55s infinite}
@keyframes resultPop{from{transform:scale(.15)}to{transform:scale(1)}}
@keyframes resultBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
.text-btn{background:none;border:none;font:inherit;font-size:13px;color:#444;text-decoration:underline;cursor:pointer;padding:4px}

/* hidden must always win over flex layouts (gacha nav pre-open fix) */
[hidden]{display:none !important}

/* ================= Sound, suspense, sparkles, battle juice, collection ================= */
.gacha-dim{position:absolute;inset:0;background:#111;opacity:0;transition:opacity .8s ease;pointer-events:none;z-index:2}
.gacha-dim.on{opacity:.45}
.gacha-box.gacha-still{animation:none}
.spark{position:absolute;left:50%;top:32%;width:7px;height:7px;background:#111;pointer-events:none;z-index:3;animation:sparkFly .8s ease-out forwards}
.spark.big{width:11px;height:11px}
@keyframes sparkFly{0%{transform:translate(0,0) rotate(0deg);opacity:1}100%{transform:translate(var(--tx),var(--ty)) rotate(160deg);opacity:0}}
#screenBattle{position:relative}
#screenBattle.shake-it{animation:screenShake .3s linear}
@keyframes screenShake{0%,100%{transform:translate(0,0)}25%{transform:translate(-5px,2px)}50%{transform:translate(5px,-2px)}75%{transform:translate(-3px,-1px)}}
.dmg-float{position:absolute;font-family:'Press Start 2P',monospace;font-size:19px;color:#111;background:#fff;border:3px solid #111;padding:4px 8px;pointer-events:none;z-index:5;animation:dmgUp 1.15s ease-out forwards}
.dmg-float.crit{font-size:26px;background:#111;color:#fff}
.dmg-float.heal{font-size:13px}
@keyframes dmgUp{0%{transform:translateY(8px) scale(.6);opacity:0}12%{transform:translateY(0) scale(1.15);opacity:1}22%{transform:translateY(-4px) scale(1)}70%{opacity:1}100%{transform:translateY(-48px);opacity:0}}
.collection-note{text-align:center}
.collection-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:10px}
.collection-card{border:3px solid #111;padding:10px 6px;text-align:center;background:#fff}
.collection-card p{margin:6px 0 0}

/* ================= Wallet connect (Step 2) ================= */
.wallet-panel{text-align:center;padding:6px 0 2px}
.wallet-chip{text-align:center;margin:4px 0 0}

/* ================= Mint ================= */
.mint-card{border:3px solid #111;background:#fff;padding:24px 12px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:16px}
.mint-card p{margin:0}
.mint-price{font-family:'Press Start 2P',monospace;font-size:12px}
.mint-qty{display:flex;align-items:center;gap:16px}
.mint-step{width:46px;height:46px;font-size:20px;padding:0;line-height:1}
#mintQty{font-family:'Press Start 2P',monospace;font-size:17px;min-width:34px}

/* ================= Choose hamster: fixed-height scrolling inventory ================= */
#chooseList{max-height:54vh;overflow-y:auto;padding-right:6px;scrollbar-width:thin;scrollbar-color:#111 #e8e8e8}
#chooseList::-webkit-scrollbar{width:10px}
#chooseList::-webkit-scrollbar-track{background:#e8e8e8;border:2px solid #111}
#chooseList::-webkit-scrollbar-thumb{background:#111}
#chooseList .arena-boss-card:first-child{margin-top:0}

/* ================= Landscape per screen + bounded title clouds ================= */
.ground-hill{position:absolute;bottom:52px}
.screen{position:relative;z-index:1}
#screenHome{padding-top:54px}
#screenHome .cloud{width:74px;height:22px;background:#e0e0e0;opacity:.95;animation:cloudDriftR 8s ease-in-out infinite alternate}
#screenHome .cloud::before{content:"";position:absolute;left:14px;top:-12px;width:30px;height:12px;background:#e0e0e0}
#screenHome .cloud::after{content:"";position:absolute;left:38px;top:-7px;width:22px;height:7px;background:#e0e0e0}
#screenHome .cloud-a{top:14px;left:4%}
#screenHome .cloud-b{top:18px;left:auto;right:5%;transform:scale(.65);animation-name:cloudDriftL;animation-duration:10s;animation-delay:-4s}
#screenHome .cloud-c{top:30px;left:36%;transform:scale(.45);animation-duration:12s;animation-delay:-7s}
@keyframes cloudDriftR{from{translate:0 0}to{translate:42px 0}}
@keyframes cloudDriftL{from{translate:0 0}to{translate:-42px 0}}

/* ================= Title slim row, network board, certified join ================= */
.title-links{position:relative;z-index:1;display:flex;gap:10px;justify-content:center;margin-top:12px}
.mini-btn{font-family:"Press Start 2P",monospace;font-size:9px;padding:10px 12px;border:3px solid #141414;background:#fff;color:#141414;text-decoration:none;box-shadow:0 3px 0 #141414;cursor:pointer}
.mini-btn:active{transform:translateY(2px);box-shadow:0 1px 0 #141414}
.net-stage{border:3px solid #141414;background:linear-gradient(#ffffff 68%,#e4e4e4 68%);box-shadow:6px 6px 0 rgba(0,0,0,.85);display:flex;justify-content:center;padding:10px 0 6px;margin-bottom:12px}
.net-stage canvas{max-width:100%;height:auto}
.net-say{border:3px solid #141414;background:#fff;padding:10px 12px;font-family:"Press Start 2P",monospace;font-size:11px;line-height:1.6;text-align:center;margin:0 0 12px;box-shadow:4px 4px 0 rgba(0,0,0,.85)}
.net-list{border:3px solid #141414;background:#fff;box-shadow:4px 4px 0 rgba(0,0,0,.85);margin-bottom:14px}
.net-item{display:flex;justify-content:space-between;gap:12px;padding:10px 12px;font-family:"Press Start 2P",monospace;font-size:10px}
.net-item + .net-item{border-top:2px solid #e0e0e0}
.net-item span{opacity:.6}
.btn-join{display:block;text-align:center;text-decoration:none;background:#141414;color:#fff;margin:12px 0}