/* Play Me Arcade — the shared skin. One file for all 26 games. */
:root{
  color-scheme: light only;
  --paper:#f3ead7; --ink:#2a2418; --ink-soft:#5b5343;
  --gold:#c8912f; --clay:#a8482f; --calm:#4e8d5b; --hot:#b7361f;
  --ui: clamp(14px, 3.4vw, 18px);
  --display: "Iowan Old Style","Palatino Linotype","Book Antiqua",Palatino,Georgia,serif;
  --body: "Avenir Next","Segoe UI",Roboto,system-ui,sans-serif;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%;margin:0;overscroll-behavior:none;touch-action:manipulation}
body{background:#141a11;color:var(--ink);font-family:var(--body);display:flex;align-items:center;justify-content:center}
#shell{position:relative;width:100%;height:100%;max-width:1600px;display:flex;flex-direction:column;overflow:hidden;background:#141a11}
canvas#stage{display:block;width:100%;flex:1 1 auto;min-height:0}

#hud{position:absolute;left:0;right:0;top:0;z-index:3;padding:calc(env(safe-area-inset-top) + 10px) 12px 0 12px;display:flex;gap:10px;align-items:flex-start;pointer-events:none}
.panel{background:color-mix(in srgb, var(--paper) 88%, transparent);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);border:1px solid #00000022;border-radius:14px;box-shadow:0 6px 18px #0006}
#meter{flex:1 1 auto;max-width:min(420px,58%);padding:8px 10px 10px;transition:box-shadow .2s}
#meterLabel{display:flex;justify-content:space-between;align-items:baseline;font:600 calc(var(--ui)*.72)/1 var(--body);letter-spacing:.09em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:6px}
#meterTrack{position:relative;height:14px;border-radius:9px;background:#0000001a;overflow:hidden}
#meterFill{position:absolute;inset:0 auto 0 0;width:0%;background:linear-gradient(90deg,var(--calm),#c9a233 55%,var(--hot));transition:width .18s ease-out}
#meterMark{position:absolute;top:-4px;bottom:-4px;width:3px;border-radius:2px;background:var(--ink);box-shadow:0 0 0 2px #f3ead7aa}
#meterNote{margin-top:6px;font:500 calc(var(--ui)*.7)/1.25 var(--body);color:var(--ink-soft)}
#tally{display:flex;gap:8px}
.stat{padding:8px 12px;text-align:center;min-width:64px}
.stat b{display:block;font:700 calc(var(--ui)*1.15)/1 var(--display)}
.stat span{font:600 calc(var(--ui)*.62)/1 var(--body);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft)}

#pad{position:absolute;left:0;right:0;bottom:0;z-index:3;padding:10px 12px calc(env(safe-area-inset-bottom) + 12px);display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.act{flex:1 1 0;min-height:64px;border-radius:18px;border:0;font:700 var(--ui)/1.1 var(--body);color:#fff;
  background:linear-gradient(#5d6b52,#37452c);box-shadow:0 8px 0 #0004,0 10px 22px #0007;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;cursor:pointer;
  transition:transform .07s ease, box-shadow .07s ease}
.act small{font-weight:600;opacity:.82;font-size:calc(var(--ui)*.66)}
.act:active{transform:translateY(4px);box-shadow:0 4px 0 #0004,0 6px 14px #0007}
.act:focus-visible{outline:3px solid #fff;outline-offset:3px}

.sheet{position:absolute;inset:0;z-index:6;display:none;align-items:center;justify-content:center;padding:18px;
  background:radial-gradient(120% 90% at 50% 0%, #0b100899, #050703ee);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.sheet.on{display:flex}
.card{width:min(560px,100%);max-height:100%;overflow:auto;overscroll-behavior:contain;text-align:center;border-radius:20px;padding:20px 20px calc(18px + env(safe-area-inset-bottom));
  background:radial-gradient(140% 100% at 0% 0%, #fffaf0, transparent 60%),linear-gradient(#f6eeda,#e9dcc0);
  box-shadow:0 24px 60px #000a, inset 0 0 0 1px #fff8}
.eyebrow{font:700 calc(var(--ui)*.66)/1 var(--body);letter-spacing:.22em;text-transform:uppercase;color:var(--clay)}
h1{font:600 clamp(28px,7.4vw,46px)/1.02 var(--display);margin:.3em 0 .1em}
h2{font:600 clamp(21px,5vw,30px)/1.1 var(--display);margin:.2em 0 .3em}
.lede{font:400 var(--ui)/1.5 var(--body);color:var(--ink-soft);margin:0 auto .9em;max-width:42ch}
@media (max-height:700px){
  .card{padding-top:14px}
  h1{font-size:clamp(22px,5.6vw,32px);margin:.1em 0}
  .shot{width:min(190px,38%);margin:8px auto 10px}   /* same frame, smaller */
  .sheet .lede:last-of-type{display:none}   /* the long blurb goes before the buttons do */
}
.voice{font:italic 400 clamp(17px,4.3vw,22px)/1.45 var(--display);margin:.6em auto .8em;max-width:34ch}
.voice::before{content:"“"} .voice::after{content:"”"}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:54px;padding:0 22px;margin:5px 4px;border:0;border-radius:15px;
  font:700 var(--ui)/1 var(--body);color:#fff;background:linear-gradient(#3f5b34,#25381d);box-shadow:0 6px 0 #0003,0 8px 18px #0006;cursor:pointer}
.btn.ghost{background:#0000;color:var(--ink);box-shadow:inset 0 0 0 2px #2a241833}
.btn:active{transform:translateY(3px)}
.btn:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
/* when the music stops, this is what to press */
.btn.pulse{animation:askmoral 1.6s ease-in-out infinite}
@keyframes askmoral{
  0%,100%{ box-shadow:0 6px 0 #0003,0 8px 18px #0006, 0 0 0 0 #c8912f00 }
  50%    { box-shadow:0 6px 0 #0003,0 8px 26px #0007, 0 0 0 10px #c8912f33 }
}
@media (prefers-reduced-motion: reduce){ .btn.pulse{animation:none;outline:3px solid var(--gold);outline-offset:3px} }
.lv{display:flex;flex-direction:column;gap:10px;margin:14px 0 6px}
.lvBtn{display:grid;grid-template-columns:52px 1fr auto;align-items:center;gap:12px;padding:12px 14px;border:0;border-radius:16px;text-align:left;
  background:#fffdf6;box-shadow:0 3px 0 #0002, inset 0 0 0 1px #2a241820;cursor:pointer}
.lvBtn .n{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;font:600 calc(var(--ui)*1.3)/1 var(--display);color:#fff;
  background:radial-gradient(circle at 34% 28%, #6d8f56, #2c421f)}
.lvBtn .t{font:700 calc(var(--ui)*.98)/1.2 var(--body)}
.lvBtn .s{font:500 calc(var(--ui)*.76)/1.3 var(--body);color:var(--ink-soft)}
.lvBtn[disabled]{opacity:.82;filter:none;background:#e9edf3;box-shadow:inset 0 0 0 2px #c9d3e0}
.lvBtn[disabled] .n{background:#9aa7b8}
.lvBtn[disabled] .t{color:#5b6879}
.lvBtn .lock{display:inline-block;font:700 calc(var(--ui)*.72)/1 var(--body);
  color:#7a5a34;background:#f0d9a8;border-radius:8px;padding:3px 7px;margin-top:4px}
.stars{font:400 calc(var(--ui)*1.15)/1 var(--display);letter-spacing:2px;color:var(--gold)}
.stars i{font-style:normal;color:#2a241830}
/* THE TITLE PICTURE, one frame for all 26 games. It used to be styled only
   inside the short-screen media query, so on a tall screen each game drew its
   own art at its own natural size and every sheet came out a different height.
   A fixed square box with object-fit:contain gives every fable the same card. */
.shot{width:min(300px,60%);aspect-ratio:1/1;height:auto;object-fit:contain;
  background:#00000010;border-radius:16px;display:block;margin:12px auto 14px;
  box-shadow:0 6px 18px #0004}
.moral{margin:14px 0 6px;padding:18px 16px;border-radius:16px;background:#fffdf6;box-shadow:inset 0 0 0 1px #2a241826;
  font:400 clamp(18px,4.6vw,24px)/1.5 var(--display)}
.moral .src{display:block;margin-top:10px;font:600 calc(var(--ui)*.66)/1.3 var(--body);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft)}
.fine{font:500 calc(var(--ui)*.68)/1.45 var(--body);color:var(--ink-soft);margin-top:10px}
.row{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
#corner{position:absolute;z-index:4;right:12px;bottom:calc(env(safe-area-inset-bottom) + 88px);display:flex;flex-direction:column;gap:8px}
.mini{width:46px;height:46px;text-decoration:none;border-radius:50%;border:0;display:grid;place-items:center;color:var(--ink);
  background:color-mix(in srgb, var(--paper) 88%, transparent);box-shadow:0 4px 12px #0007;font:700 calc(var(--ui)*.8)/1 var(--body);cursor:pointer}
.hide{display:none !important}
#boot{position:fixed;inset:0;z-index:9;display:grid;place-items:center;background:#141a11;color:#e9dcc0;font:600 var(--ui)/1 var(--body)}

/* the arcade hub — in the site's colours, not the game's */
.hub{max-width:900px;margin:0 auto;padding:22px 16px 56px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:12px}
.tile{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  min-height:112px;border-radius:16px;padding:12px 8px;text-align:center;text-decoration:none;
  background:#fffdf6;box-shadow:0 2px 6px #1d3c6112, 0 8px 18px #1d3c610f;
  border:1px solid #e6ecf5}
.tile b{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;
  background:#2f6fb5;color:#fff;font:700 calc(var(--ui)*1.15)/1 var(--body)}
.tile span{font:700 calc(var(--ui)*.78)/1.25 var(--body);color:#2e7d4f}
.tile:active{transform:translateY(1px)}
.tile.soon{background:#f7f8fa;border-color:#eceff4;box-shadow:none;cursor:default}
.tile.soon b{background:#c7d2e0}
.tile.soon span{color:#93a1b3;font-weight:600}


/* THE ENDCARD. Sits at the foot of the moral sheet in every game, so each fable
   ends the same way the karaoke videos do. Full width of the card, no crop. */
.endcard{display:block;width:min(360px,92%);height:auto;margin:16px auto 4px;
  border-radius:16px;box-shadow:0 6px 18px #0004}
@media (max-height:700px){ .endcard{width:min(230px,64%);margin:10px auto 2px} }