/* ============================================================
   Reyansh's Arcade — shared design system
   Used by index.html, coming-soon.html, pet-bookmarklet-builder.html
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');

:root{
  --bg:#FFFFFF;
  --bg-soft:#F4F1FE;
  --primary-soft:#E4DBFF;
  --card:#FFFFFF;
  --ink:#241C42;
  --muted:#6B6485;
  --primary:#7C5CFC;
  --primary-dim:#5E3FE0;
  --border:rgba(36,28,66,0.08);
  --shadow:rgba(124,92,252,0.18);
  --reflex:#FF6F91;
  --puzzle:#14B8A6;
  --board:#F59E0B;
  --word:#8B5CF6;
  --memory:#3B82F6;
  --creative:#EC4899;
  --bookmarklet:#64748B;
}

body.dark{
  --bg:#1B1533;
  --bg-soft:#241C42;
  --primary-soft:#3A2E63;
  --card:#241C42;
  --ink:#FBF3E7;
  --muted:#9C93C2;
  --primary:#A78BFA;
  --primary-dim:#8A6AF0;
  --border:rgba(255,255,255,0.08);
  --shadow:rgba(0,0,0,0.4);
}

*{box-sizing:border-box;}

/* Browsers give <button> its own default font instead of inheriting the
   page's — without this, every button site-wide silently falls back to
   the OS UI font instead of the pixel font used everywhere else. */
button{font-family:inherit;}

html{scroll-behavior:smooth;}

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:'Press Start 2P',monospace;
  line-height:1.7;
  transition:background .25s ease, color .25s ease;
  overflow-x:hidden;
}

.wrap{max-width:1120px;margin:0 auto;padding:0 24px;}

h1,h2,.font-display{letter-spacing:0.5px;}

/* ---------- shared header ---------- */
.site-header nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:22px 0;
}
.logo{
  font-family:'Press Start 2P',monospace;
  font-weight:normal;
  font-size:12px;
  line-height:1.4;
  display:flex;
  align-items:center;
  gap:8px;
  text-decoration:none;
  color:var(--ink);
}
.header-logo-icon{width:clamp(22px,6vw,30px);height:clamp(22px,6vw,30px);object-fit:contain;display:block;flex-shrink:0;border-radius:8px;}
.site-header .nav-right{display:flex;align-items:center;gap:14px;}

.theme-btn{
  width:38px;height:38px;
  border-radius:50%;
  border:1px solid var(--border);
  background:var(--bg-soft);
  color:var(--ink);
  font-size:16px;
  cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
}

.pill-btn{
  display:inline-flex;
  align-items:center;
  gap:6px;
  background:var(--primary);
  color:#fff;
  font-weight:600;
  font-size:13.5px;
  padding:11px 20px;
  border-radius:999px;
  text-decoration:none;
  box-shadow:0 5px 0 var(--primary-dim);
  border:none;
  cursor:pointer;
  white-space:nowrap;
}
.pill-btn:active{transform:translateY(3px);box-shadow:0 2px 0 var(--primary-dim);}

/* Secondary/ghost pill — used for the in-game End Game button, so it
   doesn't visually compete with the primary Start/Pause action. */
.pill-btn.quit-btn{
  display:none;
  background:transparent;
  color:var(--muted);
  box-shadow:none;
  border:2px solid var(--border);
}
.pill-btn.ghost-btn{
  background:transparent;
  color:var(--muted);
  box-shadow:none;
  border:2px solid var(--border);
}
.pill-btn.ghost-btn:active{transform:translateY(2px);}
.pill-btn.quit-btn:active{transform:translateY(2px);box-shadow:none;}

/* ---------- mobile touch polish (applies site-wide) ---------- */
button,
a.tile,
.pill-btn,
.diff-btn,
.control-toggle,
.theme-btn,
.setup-toggle,
.dpad button,
.pillrow .pill{
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
}

/* ---------- shared footer ---------- */
.site-footer{
  padding:44px 0 34px;
  margin-top:50px;
  border-top:1px solid var(--border);
  font-size:12.5px;
  color:var(--muted);
}
.footer-grid{
  display:grid;
  grid-template-columns:2fr 1fr 1fr;
  gap:32px;
  text-align:left;
}
.footer-brand{display:flex;flex-direction:column;align-items:flex-start;gap:8px;}
.footer-logo{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:8px;
  text-decoration:none;
  color:var(--ink);
}
.footer-logo-icon{width:clamp(64px,18vw,108px);height:clamp(64px,18vw,108px);object-fit:contain;display:block;border-radius:22px;}
span.footer-logo-icon{font-size:clamp(64px,18vw,108px);line-height:1;width:auto;height:auto;}
.footer-logo-name{
  font-family:'Press Start 2P',monospace;
  font-weight:normal;
  font-size:13px;
  line-height:1.4;
}
.footer-brand p{margin:0;font-size:12px;color:var(--muted);line-height:1.6;}
.footer-brand p.footer-tagline{margin-top:14px;}
.footer-col h4{
  font-size:10.5px;
  color:var(--ink);
  margin:0 0 16px;
  font-weight:normal;
  text-transform:uppercase;
  letter-spacing:0.6px;
}
.footer-col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:11px;}
.footer-col a{color:var(--muted);text-decoration:none;font-size:12px;}
.footer-col a:hover{color:var(--primary);}
@media (max-width:680px){
  .footer-grid{grid-template-columns:1fr;gap:28px;text-align:center;}
  .footer-brand{align-items:center;}
  .footer-logo{align-items:center;}
  .footer-col ul{align-items:center;}
}

/* ---------- shared mini-hero (used on game pages) ---------- */
.mini-hero{
  display:flex;
  align-items:center;
  gap:22px;
  text-align:left;
  margin-bottom:24px;
  padding:20px;
  border-radius:18px;
  background:var(--card);
  border:2px solid var(--border);
}
.mini-hero-chip{
  width:128px;height:128px;
  flex-shrink:0;
  border-radius:28px;
  background:var(--hero-chip-color, var(--primary));
  display:flex;align-items:center;justify-content:center;
  font-size:64px;
  overflow:hidden;
}
/* When a game/tile has real artwork, drop the colored background so
   only the image shows — the emoji-on-a-color-block look is only for
   games that don't have illustrated icons yet. */
.tile-chip.has-img, .mini-hero-chip.has-img{ background:transparent; }
.tile-chip img, .mini-hero-chip img{
  width:100%;height:100%;
  object-fit:cover;
  display:block;
  border-radius:inherit;
}
.mini-hero h1{
  font-weight:700;
  font-size:clamp(24px,5vw,32px);
  line-height:1.4;
  margin:6px 0 12px;
  color:var(--ink);
}
.mini-hero .byline{
  display:inline-block;
  font-size:10.5px;
  font-weight:700;
  letter-spacing:0.5px;
  text-transform:uppercase;
  color:#fff;
  background:var(--hero-chip-color, var(--primary));
  padding:6px 13px;
  border-radius:999px;
  margin:0 0 12px;
}
.mini-hero .sub{
  font-size:15px;
  line-height:1.6;
  color:var(--muted);
  margin:0;
}
@media (max-width:420px){
  .mini-hero{flex-direction:column;text-align:center;}
}

/* ---------- shared pill selector ---------- */
.pillrow{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.pill{
  flex:1 1 28%;
  text-align:center;
  padding:10px 6px;
  border-radius:10px;
  border:2px solid var(--border);
  background:var(--bg-soft);
  color:var(--muted);
  font-size:11px;
  font-weight:600;
  cursor:pointer;
  user-select:none;
}
.pill.active{
  border-color:var(--pill-color, var(--primary));
  color:#fff;
  background:var(--pill-color, var(--primary));
}

/* ============================================================
   Shared "Game Setup" panel — used by every game page
   (Difficulty buttons, Controls checkboxes, collapse header).
   Defined once here so sizing stays identical across all games.
   ============================================================ */
.setup{
  background:var(--card);
  border:2px solid var(--border);
  border-radius:18px;
  padding:18px;
  margin-bottom:18px;
}

/* ---------- Share / Add to Home Screen card — right-aligned ---------- */
.page-actions{
  display:flex;
  justify-content:flex-end;
  flex-wrap:wrap;
  gap:12px;
  background:var(--card);
  border:2px solid var(--border);
  border-radius:18px;
  padding:14px 18px;
  margin-bottom:18px;
}
.setup h2{
  font-size:11px;
  color:var(--muted);
  margin:0 0 10px;
  font-weight:normal;
}
.setup-block{margin-bottom:16px;}
.setup-block:last-child{margin-bottom:0;}

.setup-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  cursor:pointer;
  user-select:none;
}
.setup .setup-title{
  font-size:13px;
  color:var(--ink);
  font-weight:normal;
  margin:0;
}
.setup-toggle{
  display:flex;align-items:center;justify-content:center;
  width:42px;height:42px;
  flex-shrink:0;
  background:var(--bg-soft);
  border:1px solid var(--border);
  color:var(--ink);
  padding:0;
  border-radius:50%;
  cursor:pointer;
}
.setup-toggle .chevron{
  display:inline-block;
  font-size:14px;
  transition:transform .2s ease;
}
.setup.collapsed .setup-toggle .chevron{transform:rotate(-90deg);}
.sr-only{
  position:absolute;width:1px;height:1px;
  padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

.setup-body{
  overflow:hidden;
  max-height:900px;
  opacity:1;
  transition:max-height .3s ease, opacity .2s ease, margin-top .25s ease;
  margin-top:16px;
}
.setup.collapsed .setup-body{
  max-height:0;
  opacity:0;
  margin-top:0;
}

.orbit-item .icon-inner img{
  width: clamp(28px,8vw,64px);
  height: clamp(28px,8vw,64px);
  display: block;
  object-fit: cover;
  border-radius: 8px;
}

/* ---------- difficulty buttons ---------- */
.diff-buttons{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
}
.diff-btn{
  flex:1 1 calc(25% - 9px);
  text-align:center;
  padding:16px 10px;
  border-radius:14px;
  border:2px solid var(--border);
  background:var(--bg-soft);
  color:var(--muted);
  font-family:inherit;
  font-size:13px;
  font-weight:700;
  cursor:pointer;
  user-select:none;
  transition:background .15s ease, color .15s ease, border-color .15s ease, transform .1s ease;
}
.diff-btn:active{transform:scale(0.98);}
.diff-btn.active{
  background:var(--btn-color,var(--primary));
  border-color:transparent;
  color:#fff;
}

/* pixel-pip difficulty rating — 1 to 4 filled pips per tier, colored
   to match the tier's --btn-color, e.g. Easy = 1 pip, Insane = 4 */
.diff-stars{
  display:flex;
  justify-content:center;
  gap:3px;
  margin-bottom:8px;
}
.diff-stars .pip{
  width:7px;height:7px;
  border-radius:2px;
  background:var(--border);
}
.diff-stars .pip.filled{
  background:var(--btn-color,var(--primary));
}
.diff-btn.active .diff-stars .pip{
  background:rgba(255,255,255,0.35);
}
.diff-btn.active .diff-stars .pip.filled{
  background:#fff;
}

/* ---------- control checkboxes ---------- */
.control-grid{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
}
.control-toggle{
  flex:1 1 calc(25% - 9px);
  display:flex;align-items:center;gap:10px;
  padding:16px 12px;
  border-radius:14px;
  border:2px solid var(--border);
  background:var(--bg-soft);
  cursor:pointer;
  user-select:none;
  font-size:12.5px;
  color:var(--ink);
  font-weight:700;
}
.control-toggle.on{border-color:var(--primary);background:var(--card);}
.control-toggle input{position:absolute;opacity:0;width:0;height:0;}
.check-box{
  width:22px;height:22px;
  flex-shrink:0;
  border-radius:6px;
  border:2px solid var(--border);
  background:var(--card);
  display:flex;align-items:center;justify-content:center;
  font-size:12px;
  color:#fff;
}
.control-toggle.on .check-box{
  background:var(--primary);
  border-color:var(--primary);
}
.control-toggle .icon{font-size:16px;flex-shrink:0;}
/* Touch is the one scheme with no physical affordance to picture, so
   its icon runs bigger than the rest to stay legible at this size. */
.control-toggle .icon-touch{font-size:24px;}

@media (max-width:560px){
  .diff-btn, .control-toggle{flex:1 1 calc(50% - 6px);}
}

/* ============================================================
   Shared game-screen chrome — HUD, stage/overlay, on-screen
   D-pad, and control hints. Same building blocks for every
   game page; see /game-template.html for the full markup.
   ============================================================ */

/* ---------- HUD ---------- */
.hud{
  display:flex;flex-wrap:wrap;gap:10px;
  justify-content:space-between;
  align-items:center;
  margin-bottom:12px;
}
.hud-stats{display:flex;gap:10px;flex-wrap:wrap;}
.stat-chip{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:10px;
  padding:8px 12px;
  font-size:11px;
  display:flex;align-items:center;gap:6px;
  white-space:nowrap;
}
.stat-chip b{color:var(--primary);font-size:12px;}
.hud-actions{display:flex;gap:8px;flex-wrap:wrap;}

/* ---------- stage ---------- */
.stage-wrap{
  position:relative;
  border-radius:20px;
  overflow:hidden;
  border:1px solid var(--border);
  background:linear-gradient(180deg,var(--bg-soft),var(--primary-soft) 140%);
  box-shadow:0 14px 34px var(--shadow);
  margin-bottom:16px;
}
#stage{
  display:block;
  width:100%;
  height:min(62vh,520px);
  touch-action:none;
  cursor:crosshair;
}

.overlay{
  position:absolute;inset:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:14px;
  text-align:center;
  padding:24px;
  background:color-mix(in srgb, var(--bg) 78%, transparent);
  backdrop-filter:blur(3px);
}
.overlay.hidden{display:none;}
.overlay h3{font-size:14px;margin:0;font-weight:normal;line-height:1.7;}
.overlay p{font-size:11px;color:var(--muted);margin:0;max-width:280px;line-height:1.7;}
.overlay .big-score{font-size:22px;color:var(--primary);}

/* ---------- game controls panel (on-screen D-pad) ---------- */
.pad-wrap{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:28px;
  flex-wrap:wrap;
  padding:16px;
  background:var(--card);
  border:1px solid var(--border);
  border-radius:18px;
  margin-bottom:20px;
  --action-color: var(--hero-chip-color, var(--primary));
}
.pad-wrap.disabled{opacity:0.35;pointer-events:none;}
.dpad{
  display:grid;
  grid-template-columns:repeat(3,44px);
  grid-template-rows:repeat(3,44px);
  gap:4px;
}
.dpad button{
  border:1px solid var(--border);
  background:var(--bg-soft);
  color:var(--ink);
  border-radius:10px;
  font-size:15px;
  cursor:pointer;
}
.dpad button:active{background:var(--primary);color:#fff;}
.dpad .up{grid-column:2;grid-row:1;}
.dpad .left{grid-column:1;grid-row:2;}
.dpad .action-btn{grid-column:2;grid-row:2;background:var(--action-color,var(--primary));color:#fff;font-size:18px;border:none;}
.dpad .right{grid-column:3;grid-row:2;}
.dpad .down{grid-column:2;grid-row:3;}
.pad-label{font-size:10px;color:var(--muted);text-align:center;max-width:150px;line-height:1.7;}

/* ---------- control hint lines ---------- */
.hint{margin:0 0 22px;}
.hint p{font-size:10.5px;color:var(--muted);text-align:center;line-height:1.8;margin:0 0 4px;}
.hint p:last-child{margin-bottom:0;}

/* ---------- How to Play — same card language as .setup, sits at the very
   bottom of every game page, open (not collapsible) since there's nothing
   after it to declutter for ---------- */
.how-to-play{
  background:var(--card);
  border:2px solid var(--border);
  border-radius:18px;
  padding:20px 22px;
  margin-bottom:22px;
}
.how-to-play h2{
  font-size:13px;
  color:var(--ink);
  margin:0 0 14px;
  font-weight:normal;
}
.how-to-play ol{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:12px;
  counter-reset:htp;
}
.how-to-play li{
  display:flex;
  align-items:flex-start;
  gap:12px;
  font-size:12.5px;
  color:var(--muted);
  line-height:1.6;
}
.how-to-play li::before{
  counter-increment:htp;
  content:counter(htp);
  flex-shrink:0;
  width:22px;height:22px;
  border-radius:7px;
  background:var(--hero-chip-color, var(--primary));
  color:#fff;
  font-size:11px;
  font-weight:normal;
  display:flex;align-items:center;justify-content:center;
}

/* ---------- shared toast — used for Share/Install feedback on game
   pages, and reused by desktop-pet.html's "Copied" message ---------- */
.toast{
  position:fixed;
  bottom:24px;
  left:50%;
  transform:translateX(-50%) translateY(20px);
  background:var(--ink);
  color:var(--card);
  padding:10px 18px;
  border-radius:20px;
  font-size:13px;
  font-weight:600;
  opacity:0;
  pointer-events:none;
  transition:opacity .2s ease, transform .2s ease;
  z-index:100;
  max-width:calc(100vw - 40px);
  text-align:center;
}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0);}
@media (prefers-reduced-motion: reduce){
  .toast{transition:none;}
}