@font-face{font-family:'Silkscreen';font-style:normal;font-weight:400;font-display:swap;src:url('../../public/assets/fonts/silkscreen-regular.ttf') format('truetype')}
@font-face{font-family:'Silkscreen';font-style:normal;font-weight:700;font-display:swap;src:url('../../public/assets/fonts/silkscreen-bold.ttf') format('truetype')}
:root{--bg:#080e25;--cream:#f3e6bf;--cyan:#83ded4;--gold:#f4db86;--pink:#e492ae}
body{background:#080e25;background-image:none}
header,footer{border-color:#27396a}
.brand{color:#e2e9f5}
.brand-sub{color:#8aa7c2}
nav button{font:400 10px/1.5 'Silkscreen',monospace;color:#83ded4;letter-spacing:0}
.arcade{border:2px solid #3559af;border-top:2px solid #6987e1;background:#0b1230;box-shadow:7px 7px 0 #03081b}
.arcade .intro{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:14px 28px;padding:25px 28px 27px;background:#1b349c;border:0}
.arcade .intro:before,.arcade .intro:after{display:none}
.arcade .intro .eyebrow{grid-column:1/-1;font:400 10px/1.5 'Silkscreen',monospace;letter-spacing:0;color:#9be0db;margin:0}
.arcade h1{font:700 43px/1.15 'Silkscreen',monospace;letter-spacing:-2px;white-space:nowrap;margin:0;text-shadow:3px 3px 0 #0b1c65}
.arcade h1>.first-name,.arcade h1>.last-name{color:#f5e6b6;text-shadow:3px 3px 0 #0b1c65;margin:0}
.arcade h1>.last-name{margin-left:16px}
.arcade h1 .title-dot{display:none}
.arcade .invitation{font:400 11px/1.9 var(--mono);letter-spacing:0;margin:0;color:#f3e6bf;max-width:240px}
.arcade .invitation>span{font:400 10px/1.8 var(--mono);color:#a7cfed;margin:4px 0 0;white-space:normal}
.arcade .game-topline{min-height:46px}
.collectible-key{font:400 9px/1.5 'Silkscreen',monospace;letter-spacing:0;color:#d6dced;gap:20px}
#game-status{color:#83ded4;font:400 8px/1.5 'Silkscreen',monospace;letter-spacing:0}
.arcade .playfield{background:#0b1230;border-color:#233d80}
.arcade .control-deck,.arcade .game-bottom{border-color:#293a69}
.arcade .deck-label{color:#9fb0d3}
.arcade .game-tip,.arcade .control-hint small{color:#9fb0d3}
.direction{background:#10204d;border-color:#3c5799;color:#becfee}
.direction:hover{background:#243d78;color:#fff}
.direction.is-held{background:#83ded4;border-color:#adf3e8;color:#0a2147}
.joystick:before{background:#22376c}
.stick-base{background:#172956;border-top-color:#6e9bbf;border-bottom-color:#555cb3}
.start-overlay{background:#050b237d;backdrop-filter:blur(1px)}
.start-overlay button{background:#193caa;border-color:#83ded4;box-shadow:4px 4px 0 #06113f;color:#f3e6bf}
.start-overlay button:hover{background:#2d50bd}
.play-word{font:400 16px 'Silkscreen',monospace;letter-spacing:0}
.start-overlay .overlay-label{font:400 9px 'Silkscreen',monospace;color:#b9c9e8;letter-spacing:0}
.start-instructions{font-family:var(--mono)!important;font-size:10px!important}
.first-guide{background:#0e1b46;border-color:#506db4;color:#b6f0df}
.game-actions button{color:#a5bedb}
.arcade .game-actions button span:last-child{font:400 10px/1.5 'Silkscreen',monospace;letter-spacing:0}
.discoveries-count strong,.pellet-meter strong{color:#f3e6bf}
.count-divider{color:#8296c3}
footer{font-size:8px;color:#8ba0c6}
footer button{font-size:8px;color:#8ba0c6}
@media(max-width:1100px) and (min-width:701px){
  .arcade h1{font-size:34px}
  .arcade .intro{padding:24px}
}
@media(max-width:700px){
  .arcade .intro{display:block;padding:20px 19px 23px}
  .arcade .intro .eyebrow{font-size:8px;margin:0 0 12px;letter-spacing:0}
  .arcade h1{font-size:29px;letter-spacing:-1.5px;line-height:1.25}
  .arcade h1>.last-name{margin-left:9px}
  .arcade .invitation{font-size:11px;max-width:none;margin:15px 0 0;line-height:1.8}
  .arcade .invitation br{display:none}
  .arcade .invitation>span{font-size:10px;margin:0 0 0 9px;color:#a7cfed}
  .arcade .game-topline{min-height:43px}
  .collectible-key{font-size:8px;gap:12px}
  #game-status{font-size:7px}
  .start-overlay button{height:51px}
  .arcade .game-actions button span:last-child{font-size:9px}
}
@media(max-width:360px){
  .arcade .intro{padding:18px 14px 21px}
  .arcade h1{font-size:25px;letter-spacing:-1.5px}
  .arcade h1>.last-name{margin-left:7px}
  .arcade .invitation{font-size:10px}
  .arcade .invitation>span{font-size:9px;margin-left:0;display:block}
  .collectible-key{font-size:7px;gap:10px}
  #game-status{font-size:6px}
  .arcade .game-actions button span:last-child{font-size:8px}
}
@media(min-width:560px) and (max-height:500px) and (orientation:landscape){
  .arcade .intro{display:flex;align-items:center;padding:13px 18px;gap:14px}
  .arcade .intro .eyebrow{display:none}
  .arcade h1{font-size:29px;letter-spacing:-1.5px}
  .arcade .invitation{font-size:10px;max-width:235px;margin:0}
  .arcade .invitation>span{font-size:9px;margin:0}
}