/* ─────────────────────────────────────────────
   The Arcade — "The Fellowship of the Aisle"
   Shared arcade game chrome (game-fellowship / cake / corks / cards).
───────────────────────────────────────────── */

:root{
  /* Arcade cabinet chrome now matches the shared C64 arcade shell
     (assets/css/c64.css), so the whole arcade — menus, leaderboards and
     the cabinet frame — reads as one machine, distinct from the wedding
     site. The blues come from c64.css (--c64-*). Gold/cream/blush
     accents and the green groom badge are kept for continuity across
     games and the hub. Level backdrops (THEMES) and sprite colors (PAL)
     in game.js are left alone on purpose — deliberate per-level art. */
  --arcade-frame: var(--gold);
  --arcade-frame2: var(--c64-border);
  --arcade-panel: var(--c64-screen);
  --arcade-panel2: #4a3aa0;     /* a step lighter than the screen, for the panel gradient */
  --arcade-panel-deep: #2b2168; /* darker than the screen, for inset cards/inputs/lists */
  --arcade-panel-hi: #514595;   /* lavender highlight for selected/"mine" states */
  --arcade-ink: var(--cream);
  --arcade-gold: var(--gold);
  --arcade-gold-d: var(--bark);
  --arcade-moss: var(--fern);
  --arcade-moss-d: var(--moss);
  --arcade-blush: #e8a0b4;      /* deliberate non-palette accent (bride-side flavor) */
  --nav-h: 68px; /* measured C64 nav height on this page */
}
#wrap *{box-sizing:border-box;}

/* The cabinet sits centered in the middle of the C64 screen (the
   .c64-frame wrapper + assets/css/c64.css provide the framed blue screen,
   the pixel title-bar nav and the status-bar footer), so opening a game
   feels like sitting down at a cabinet inside the arcade rather than on
   the website. */
.arcade-shell{
  flex:1; min-height:0;
  display:flex; align-items:center; justify-content:center;
  padding: clamp(1rem,3vw,2.5rem) clamp(0.75rem,3vw,2rem);
}

body.arcade-page{ font-family:'Press Start 2P',monospace; -webkit-font-smoothing:none;
  overflow:hidden; touch-action:none; }

/* Desktop / large screens: framed 16:10 box */
#wrap{position:relative;width:100%;max-width:900px;margin:0 auto;aspect-ratio:16/10;
  overflow:hidden;background:#000;
  box-shadow:0 0 0 4px var(--arcade-frame),0 0 0 8px #000,0 0 0 12px var(--arcade-frame2);image-rendering:pixelated;}

/* The Fellowship of the Aisle plays edge-to-edge on desktop too: the
   cabinet expands to fill the whole C64 screen between the title bar and
   footer — full width, no letterbox, no inner gold frame (the C64 border
   is the only frame), nothing to scroll. Its responsive canvas already
   handles an arbitrary play-area aspect (same code path as phones).
   Scoped to >=821px so the mobile full-bleed rule below still wins on
   phones. */
@media (min-width:821px){
  .game-fellowship .arcade-shell,
  .game-fullbleed .arcade-shell{ padding:0; }
  .game-fellowship #wrap,
  .game-fullbleed #wrap{
    flex:1; align-self:stretch;
    width:100%; max-width:none; margin:0;
    aspect-ratio:auto; box-shadow:none;
  }
}

/* Mobile / small screens: the game goes truly full-bleed below the C64
   title bar — drop the screen border + footer status bar and let the
   cabinet fill the space, so phones get an uninterrupted play area. */
@media (max-width:820px){
  /* higher specificity than c64.css's base .c64-frame so the border
     actually collapses here (c64.css loads after game.css) */
  body.arcade-page .c64-frame{ border:0; }
  body.arcade-page .c64-footer{ display:none; }
  .arcade-shell{ min-height:auto; padding:0; display:block; }
  #wrap{position:fixed;top:var(--nav-h);left:0;right:0;bottom:0;width:100%;height:auto;
    max-width:none;aspect-ratio:auto;box-shadow:none;margin:0;}
}

canvas{display:block;width:100%;height:100%;image-rendering:pixelated;image-rendering:crisp-edges;}
.ui-layer{position:absolute;inset:0;pointer-events:none;}
.panel{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;
  justify-content:center;
  background:repeating-linear-gradient(0deg,rgba(0,0,0,0.18) 0 2px,transparent 2px 4px),
    linear-gradient(180deg,var(--arcade-panel),var(--arcade-panel2));
  pointer-events:all;padding:18px;text-align:center;overflow-y:auto;z-index:12;}
.hidden{display:none !important;}
#wrap h1.title{font-size:clamp(13px,2.6vw,22px);color:var(--arcade-gold);margin:0 0 12px;line-height:1.5;
  text-shadow:3px 3px 0 #000;}
.subtitle{font-size:clamp(7px,1.2vw,10px);color:var(--arcade-blush);margin:0 0 16px;line-height:1.6;}
#wrap .btn{display:inline-flex;font-family:inherit;font-size:clamp(8px,1.4vw,11px);color:#000;background:var(--arcade-gold);
  border:none;border-radius:0;padding:12px 18px;cursor:pointer;margin:5px;box-shadow:4px 4px 0 var(--arcade-gold-d);
  transition:transform .05s,box-shadow .05s;line-height:1.5;text-decoration:none;letter-spacing:0;text-transform:none;}
#wrap .btn:hover{filter:brightness(1.08);transform:none;}
#wrap .btn.green{background:var(--arcade-moss);color:var(--arcade-ink);box-shadow:4px 4px 0 var(--arcade-moss-d);}
#wrap .btn.green:active{box-shadow:0 0 0 var(--arcade-moss-d);}
#wrap .btn:active{transform:translate(4px,4px);box-shadow:0 0 0 var(--arcade-gold-d);}
#wrap .btn:disabled{background:#555;color:#999;box-shadow:4px 4px 0 #333;cursor:default;filter:none;}
#wrap .btn.ghost{background:transparent;color:var(--arcade-ink);box-shadow:none;border:2px solid rgba(196,163,90,0.55);}
#wrap .btn.ghost:hover{border-color:var(--arcade-gold);}
.side-row{display:flex;gap:16px;flex-wrap:wrap;justify-content:center;margin:6px 0 14px;}
.side-card{width:140px;border:3px solid var(--arcade-gold-d);background:var(--arcade-panel-deep);padding:12px 8px;
  cursor:pointer;pointer-events:all;transition:transform .08s;}
.side-card:hover{transform:translateY(-3px);}
.side-card.selected{background:var(--arcade-panel-hi);border-color:var(--arcade-blush);}
.side-card canvas{width:56px;height:56px;margin:0 auto 8px;display:block;background:transparent;box-shadow:none;}
.side-card .name{font-size:9px;color:var(--arcade-gold);line-height:1.5;}
.side-card .desc{font-size:7px;color:var(--sage);margin-top:6px;line-height:1.6;}
input.nameInput{font-family:inherit;font-size:10px;padding:11px 12px;border:3px solid var(--arcade-gold-d);
  background:var(--arcade-panel-deep);color:var(--arcade-ink);text-align:center;width:240px;margin-bottom:10px;pointer-events:all;}
input.nameInput:focus{outline:none;border-color:var(--arcade-gold);}
.hud{position:absolute;top:0;left:0;right:0;display:flex;justify-content:space-between;
  align-items:flex-start;gap:6px;padding:8px 56px 8px 10px;font-size:clamp(7px,1.3vw,10px);color:var(--arcade-ink);
  text-shadow:2px 2px 0 #000;z-index:5;flex-wrap:wrap;}
.hud .tag{background:rgba(0,0,0,0.55);padding:5px 8px;border:2px solid rgba(196,163,90,0.5);}
/* Tiers of Joy — tier count + score need room to breathe in the pixel HUD */
body.game-cake .hud{
  padding:10px 58px 10px 12px; gap:8px 10px;
  font-size:clamp(8px,1.55vw,11px); line-height:1.7;
}
body.game-cake .hud .tag{ padding:7px 11px; letter-spacing:0.05em; min-width:5.5em; text-align:center; }
body.game-cake .level-banner{ top:22%; padding:0 20px; line-height:1.75; }
/* Reserved corner (via .hud's right padding above) so this never overlaps
   the HUD tags, at any viewport width — was previously top-center and easy
   to lose in the middle of the tag row. Bigger + a persistent border
   (not just a drop-shadow) so it reads clearly as a button mid-gameplay. */
.pause-btn{position:absolute;top:8px;right:8px;z-index:7;pointer-events:all;
  font-family:inherit;font-size:13px;color:#000;background:var(--arcade-gold);
  border:2px solid var(--arcade-gold-d);
  width:44px;height:38px;box-shadow:3px 3px 0 var(--arcade-gold-d);cursor:pointer;}
.pause-btn:active{transform:translateY(3px);box-shadow:0 0 0 var(--arcade-gold-d);}
.small-note{font-size:7px;color:var(--sage);margin:0 0 12px;max-width:340px;line-height:1.7;}
.powerup-legend{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 18px;margin:0 0 14px;max-width:380px;}
.powerup-legend-item{display:flex;align-items:center;gap:8px;font-size:7px;color:var(--arcade-ink);line-height:1.5;text-align:left;max-width:150px;}
.powerup-legend-item canvas{flex-shrink:0;width:24px;height:24px;background:transparent;}
.newhigh{font-size:8px;color:var(--arcade-gold);margin:0 0 8px;line-height:1.6;}
/* "Did you mean" chips under the save-score name input (see
   assets/js/name-suggest.js) — tap to reuse a name that's already on
   any game's leaderboard instead of creating a near-duplicate. */
.ns-wrap{max-width:340px;margin:0 0 10px;line-height:2;pointer-events:all;}
.ns-label{display:block;font-size:7px;color:var(--sage);margin-bottom:4px;line-height:1.8;}
.ns-chip{font-family:inherit;font-size:8px;color:var(--arcade-gold);background:var(--arcade-panel-deep);
  border:2px solid var(--arcade-gold-d);padding:6px 9px;margin:0 4px 4px 0;cursor:pointer;}
.ns-chip:hover{border-color:var(--arcade-gold);}

/* Unsaved-run recovery (24h local stash) */
.unsaved-host{width:min(360px,92%);margin:0 0 12px;pointer-events:all;}
.unsaved-banner{border:2px solid var(--arcade-blush);background:rgba(0,0,0,0.45);
  padding:10px 12px;margin:0 0 8px;text-align:left;}
.unsaved-banner-copy{font-size:8px;color:var(--arcade-ink);line-height:1.7;margin:0 0 8px;}
.unsaved-banner-copy strong{color:var(--arcade-gold);font-weight:normal;}
.unsaved-banner-when{color:var(--sage);}
.unsaved-banner-acts{display:flex;flex-wrap:wrap;gap:6px;}
.unsaved-banner-acts button{font-family:inherit;font-size:8px;padding:8px 10px;border:none;cursor:pointer;}
.unsaved-banner-acts .unsaved-save{background:var(--arcade-moss);color:var(--arcade-ink);}
.unsaved-banner-acts .unsaved-dismiss{background:transparent;color:var(--arcade-ink);border:2px solid rgba(196,163,90,0.55);}

/* In-game "score not saved" confirm (replaces window.confirm) */
.unsaved-confirm{position:absolute;inset:0;z-index:40;display:flex;align-items:center;justify-content:center;
  padding:18px;background:rgba(0,0,0,0.72);pointer-events:all;}
.unsaved-confirm.hidden{display:none !important;}
.unsaved-confirm-card{width:min(340px,94%);border:3px solid var(--arcade-gold);background:var(--arcade-panel);
  padding:18px 16px 14px;text-align:center;box-shadow:6px 6px 0 #000;}
.unsaved-confirm-title{font-size:clamp(10px,1.8vw,14px);color:var(--arcade-gold);margin:0 0 10px;line-height:1.5;
  text-shadow:2px 2px 0 #000;}
.unsaved-confirm-body{font-size:8px;color:var(--arcade-ink);line-height:1.8;margin:0 0 14px;}
.unsaved-confirm-body strong{color:var(--arcade-blush);font-weight:normal;}
.unsaved-confirm-acts{display:flex;flex-direction:column;align-items:center;gap:2px;}
.leaderboard-list{width:100%;max-width:380px;max-height:180px;overflow-y:auto;background:var(--arcade-panel-deep);
  border:3px solid var(--arcade-gold-d);margin-bottom:12px;pointer-events:all;}
.lb-row{display:flex;justify-content:space-between;align-items:center;padding:8px 12px;font-size:9px;
  border-bottom:2px solid var(--arcade-panel);color:var(--arcade-ink);}
.lb-row:last-child{border-bottom:none;}
.lb-row.mine{background:var(--arcade-panel-hi);outline:2px solid var(--arcade-gold);}
.lb-row.mine .nm{color:var(--arcade-gold);}
.lb-row .rank{color:var(--arcade-gold);width:26px;text-align:left;}
.lb-row .nm{flex:1;display:flex;align-items:center;gap:4px;text-align:left;padding:0 6px;min-width:0;}
.lb-row .nm-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.lb-row .badge{flex-shrink:0;}
.lb-row .sc{color:var(--arcade-blush);flex-shrink:0;}
.lb-row .badge{font-size:7px;padding:2px 5px;margin-left:6px;white-space:nowrap;display:inline-flex;align-items:center;gap:4px;}
.lb-row .badge--bride{color:#000;background:var(--arcade-gold);}
.lb-row .badge--groom{color:var(--arcade-ink);background:var(--arcade-moss-d);}
/* Plain CSS icon (not a font glyph) so it renders identically on every
   device: a ring outline for bride, a filled dot for groom. */
.badge-dot{width:6px;height:6px;border-radius:50%;border:1px solid currentColor;flex-shrink:0;}
.badge--groom .badge-dot{background:currentColor;}
.empty-lb{padding:18px;color:var(--sage);font-size:8px;line-height:1.8;}
.lb-del{font-family:inherit;font-size:8px;color:#fff;background:#c0392b;border:none;
  padding:4px 6px;margin-left:8px;cursor:pointer;box-shadow:2px 2px 0 #7a1f1f;}
.lb-del:active{transform:translate(2px,2px);box-shadow:none;}
.host-flag{font-size:7px;color:#c0392b;background:var(--arcade-panel-deep);border:2px solid #c0392b;
  padding:6px 10px;margin:0 0 10px;line-height:1.6;}
.victory-photo{width:220px;max-width:70vw;min-height:120px;border:4px solid var(--arcade-gold);
  background:var(--arcade-panel-deep);display:flex;align-items:center;justify-content:center;
  color:var(--arcade-blush);font-size:40px;margin:0 0 14px;overflow:hidden;}
.victory-photo img{width:100%;height:100%;object-fit:cover;display:block;}
/* Control zone sits along the bottom, over the dirt area below the ground line */
.touch-controls{position:absolute;bottom:0;left:0;right:0;display:flex;justify-content:space-between;
  align-items:flex-end;padding:0 18px max(14px, env(safe-area-inset-bottom)) 18px;height:140px;
  pointer-events:none;z-index:6;}
.touch-btn{pointer-events:all;width:64px;height:64px;background:rgba(196,163,90,0.9);
  border:3px solid #000;display:flex;align-items:center;justify-content:center;font-size:24px;
  color:#000;user-select:none;-webkit-user-select:none;box-shadow:3px 3px 0 #000;}
.touch-btn:active{transform:translate(3px,3px);box-shadow:none;}
.dpad{display:flex;gap:12px;}
.level-banner{position:absolute;top:30%;left:0;right:0;text-align:center;
  font-size:clamp(11px,2.4vw,18px);color:var(--arcade-gold);text-shadow:3px 3px 0 #000;opacity:0;
  z-index:8;line-height:1.7;transition:opacity .25s;padding:0 16px;}
.scanlines{position:absolute;inset:0;pointer-events:none;z-index:9;
  background:repeating-linear-gradient(0deg,rgba(0,0,0,0.10) 0 1px,transparent 1px 3px);
  mix-blend-mode:multiply;}