/* PixelCare shared theme for ported games.
   Palette copied from the PixelCare source (src/styles.css .dark tokens and
   src/games/core/palette.ts). Fonts are self-hosted (SIL OFL 1.1, see fonts/). */
@font-face{font-family:'DM Sans';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/dm-sans-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'DM Sans';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/dm-sans-latin-700-normal.woff2) format('woff2')}
@font-face{font-family:'Press Start 2P';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/press-start-2p-latin-400-normal.woff2) format('woff2')}
:root{
  --bg-0:#0a0f1e;--bg-1:#0f1629;--surface-1:#161e33;--surface-2:#1e2840;--surface-3:#283350;
  --canvas:#0b1122;--grid:#151d31;--dim:#4a5670;
  --border:rgba(255,255,255,.08);--border-strong:rgba(255,255,255,.14);
  --text:#eef2f8;--muted:#aab4c8;--subtle:#8892a8;
  --accent:#5fd3bc;--accent-hover:#7ee0cc;--accent-pressed:#45bfa7;--on-accent:#0a0f1e;
  --gold:#f4c06a;--mint:#a6eadb;--orange:#eea36b;--coral:#f2877a;--sky:#7fb3f5;--violet:#a98bf5;--green:#9bd59a;
  --r-card:16px;--r-inner:12px;--r-pill:9999px;
  --font-body:'DM Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --font-heading:'Press Start 2P',ui-monospace,monospace;
  --page-bg:radial-gradient(1200px 600px at 50% -10%,rgba(95,211,188,.1),transparent 60%),linear-gradient(180deg,#0f1629 0%,#0a0f1e 100%);
  color-scheme:dark;
}
html.pc-game,html.pc-game body{overscroll-behavior:none;-webkit-text-size-adjust:100%}
html.pc-game body{font-family:var(--font-body);color:var(--text);-webkit-tap-highlight-color:transparent}
/* Back-to-arcade button: 44x44 tap target */
.pc-back{position:fixed;z-index:9999;top:max(6px,env(safe-area-inset-top));left:max(6px,env(safe-area-inset-left));
  width:44px;height:44px;display:flex;align-items:center;justify-content:center;border-radius:12px;
  background:rgba(22,30,51,.72);border:1px solid var(--border-strong);color:var(--text);text-decoration:none;
  font:16px/1 var(--font-heading);backdrop-filter:blur(4px)}
.pc-back:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(95,211,188,.45)}
.pc-back.pc-right{left:auto;right:max(6px,env(safe-area-inset-right))}
.pc-back.pc-bottom{top:auto;bottom:max(6px,env(safe-area-inset-bottom))}
/* Keyboard cursor for pointer-only games */
.pc-kcursor{position:fixed;z-index:9998;width:28px;height:28px;margin:-14px 0 0 -14px;pointer-events:none;display:none;
  border:2px solid var(--accent);border-radius:50%;box-shadow:0 0 0 2px rgba(10,15,30,.7),0 0 10px rgba(95,211,188,.6)}
.pc-kcursor::after{content:'';position:absolute;left:50%;top:50%;width:4px;height:4px;margin:-2px;border-radius:50%;background:var(--accent)}
.pc-kcursor.down{background:rgba(95,211,188,.25);transform:scale(.85)}
.pc-khint{position:fixed;z-index:9998;left:50%;bottom:max(8px,env(safe-area-inset-bottom));transform:translateX(-50%);
  padding:6px 12px;border-radius:9999px;background:rgba(22,30,51,.85);border:1px solid var(--border-strong);
  font:500 14px/1.3 var(--font-body);color:var(--muted);pointer-events:none;transition:opacity .4s;white-space:nowrap}
@media (pointer:coarse){.pc-khint{display:none}}
/* Shared start / pause / game-over screens (PixelCare.ui) */
.pc-ov{position:fixed;inset:0;z-index:9990;display:flex;align-items:center;justify-content:center;
  padding:max(64px,env(safe-area-inset-top)) 20px max(24px,env(safe-area-inset-bottom));overflow:auto;
  background:rgba(10,15,30,.94);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);touch-action:manipulation}
.pc-ov[hidden],.pc-pause[hidden],.pc-side[hidden],.pc-ov [hidden]{display:none!important}
.pc-ov.pc-ov-pause{background:rgba(10,15,30,.82)}
.pc-card{width:min(460px,100%);display:flex;flex-direction:column;align-items:center;gap:18px;text-align:center;animation:pc-in .22s ease-out}
@keyframes pc-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.pc-kicker{margin:0;font:700 14px/1 var(--font-body);letter-spacing:.2em;text-transform:uppercase;color:var(--accent)}
.pc-title{margin:0;font:400 clamp(28px,8vw,46px)/1.3 var(--font-heading);color:var(--text);text-wrap:balance;overflow-wrap:anywhere}
.pc-line{margin:0;max-width:28ch;font:400 clamp(17px,4.4vw,21px)/1.45 var(--font-body);color:var(--muted);text-wrap:balance}
.pc-stats{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.pc-stat{min-width:120px;padding:12px 18px;border-radius:14px;background:var(--surface-1);border:1px solid var(--border)}
.pc-stat span{display:block;font:700 13px/1 var(--font-body);letter-spacing:.14em;text-transform:uppercase;color:var(--subtle)}
.pc-stat b{display:block;margin-top:10px;font:400 24px/1 var(--font-heading);color:var(--text);font-weight:400}
.pc-flag{margin:0;font:400 15px/1 var(--font-heading);color:var(--gold)}
.pc-play{appearance:none;margin-top:6px;min-width:240px;min-height:72px;padding:0 40px;border:0;border-radius:9999px;cursor:pointer;
  background:var(--accent);color:var(--on-accent);font:400 22px/1 var(--font-heading);
  box-shadow:0 0 0 4px rgba(95,211,188,.18),0 12px 32px rgba(95,211,188,.3);transition:background .15s,transform .15s}
.pc-play:hover{background:var(--accent-hover)}
.pc-play:active{background:var(--accent-pressed);transform:translateY(1px)}
.pc-play:focus-visible{outline:3px solid var(--text);outline-offset:4px}
.pc-alt{appearance:none;min-height:44px;padding:0 18px;border:0;background:none;cursor:pointer;color:var(--muted);
  font:700 17px/1 var(--font-body);text-decoration:underline;text-underline-offset:5px}
.pc-alt:hover{color:var(--text)}
.pc-alt:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:8px}
.pc-keys{margin:0;font:400 14px/1 var(--font-body);color:var(--subtle)}
/* Short landscape (phones on their side): tighten the card so Play and its
   secondary link fit in ~390px. The back/pause buttons sit at the left, clear
   of the centred card, so the 64px top padding is not needed here. */
@media (max-height:500px) and (min-width:560px){
  .pc-ov{padding-top:max(10px,env(safe-area-inset-top));padding-bottom:max(10px,env(safe-area-inset-bottom))}
  .pc-card{gap:10px}
  .pc-title{font-size:clamp(24px,7.5vh,34px);line-height:1.15}
  .pc-line{font-size:16px;line-height:1.35}
  .pc-stat{padding:8px 16px}
  .pc-stat b{margin-top:6px;font-size:20px}
  .pc-play{margin-top:2px;min-height:56px}
}
/* Pause button: 44x44, next to the back button */
.pc-pause{position:fixed;z-index:9991;top:max(6px,env(safe-area-inset-top));left:calc(max(6px,env(safe-area-inset-left)) + 52px);
  width:44px;height:44px;padding:0;border-radius:12px;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:5px;
  background:rgba(22,30,51,.72);border:1px solid var(--border-strong);backdrop-filter:blur(4px)}
.pc-pause::before,.pc-pause::after{content:'';width:5px;height:16px;border-radius:2px;background:var(--text)}
.pc-pause:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(95,211,188,.45)}
.pc-pause.pc-at-tl0{left:max(6px,env(safe-area-inset-left))}
.pc-pause.pc-at-tr{left:auto;right:calc(max(6px,env(safe-area-inset-right)) + 52px)}
.pc-pause.pc-at-bl{top:auto;bottom:max(6px,env(safe-area-inset-bottom))}
.pc-pause.pc-at-br{top:auto;left:auto;bottom:max(6px,env(safe-area-inset-bottom));right:calc(max(6px,env(safe-area-inset-right)) + 52px)}
.pc-pause.pc-at-tr2{left:auto;right:max(6px,env(safe-area-inset-right))}
/* Side panels beside a tall game on wide screens */
.pc-side{position:fixed;z-index:5;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:22px;color:var(--text)}
.pc-side-title{margin:0;font:400 26px/1.35 var(--font-heading)}
.pc-side-line{margin:0;font:400 19px/1.5 var(--font-body);color:var(--muted)}
.pc-side-how,.pc-side-keys{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:12px;font:400 17px/1.4 var(--font-body);color:var(--muted)}
.pc-side-how li{padding-left:22px;position:relative}
.pc-side-how li::before{content:'';position:absolute;left:2px;top:.55em;width:8px;height:8px;border-radius:2px;background:var(--accent)}
.pc-side-stats{display:flex;flex-direction:column;gap:14px}
.pc-side-stats .pc-stat{padding:16px 20px}
.pc-side-stats .pc-stat b{font-size:30px}
.pc-side-keys li{display:flex;align-items:center;gap:12px}
.pc-side-keys kbd{min-width:44px;padding:6px 10px;border-radius:8px;background:var(--surface-2);border:1px solid var(--border-strong);
  font:700 14px/1 var(--font-body);color:var(--text);text-align:center}
html.pc-has-side .pc-khint{display:none}
/* Reduced motion: no transitions or CSS animation anywhere in the game page */
@media (prefers-reduced-motion:reduce){
  html.pc-game *,html.pc-game *::before,html.pc-game *::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important}
}