/* ============================================================
   Pacha Games — shared look
   Layout: one-screen apps. A HUD strip, a play area, overlay
   sheets for setup and results. Water at dusk throughout.
   ============================================================ */
:root{
  --deep:#072027;          /* night water, page ground */
  --sky:#0e3945;           /* upper atmosphere */
  --mist:#18596a;          /* lower atmosphere */
  --surf:#eaf6f7;          /* tile face */
  --surf-2:#c8e2e7;        /* tile face, lower stop */
  --ink:#072229;           /* text on tiles */
  --chalk:#dcedf0;         /* text on atmosphere */
  --chalk-dim:#8ab0b9;
  --amber:#f2a65a;         /* selection, accents */
  --leaf:#5fc79f;          /* correct */
  --coral:#e3705f;         /* wrong */
  --line:rgba(220,237,240,.16);
  --font-display:"Bricolage Grotesque",ui-sans-serif,system-ui,sans-serif;
  --font-body:"Figtree",ui-sans-serif,-apple-system,system-ui,sans-serif;
  color-scheme:dark;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{height:100%}
body{
  margin:0;background:var(--deep);color:var(--chalk);
  font-family:var(--font-body);font-size:15px;line-height:1.45;
  -webkit-tap-highlight-color:transparent;
}
img{max-width:100%}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer}
a{color:inherit}
:focus-visible{outline:2px solid var(--amber);outline-offset:2px}

h1,h2,h3{
  font-family:var(--font-display);font-weight:800;
  margin:0 0 6px;text-wrap:balance;letter-spacing:-.02em;
}
h1{font-size:29px;line-height:1.08}
h2{font-size:23px;line-height:1.1}
.eyebrow{
  font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--amber);font-weight:700;margin:0 0 7px;
}
.sub{color:var(--chalk-dim);font-size:14px;margin:0 0 18px}
.chip{
  font-size:11px;font-weight:600;letter-spacing:.03em;
  padding:4px 9px;border-radius:999px;
  border:1px solid var(--line);color:var(--chalk-dim);
}
.chips{display:flex;flex-wrap:wrap;gap:6px}

/* ---------- HUD ---------- */
.hud{
  display:flex;align-items:center;gap:6px;
  padding:10px 14px;background:var(--deep);
  border-bottom:1px solid var(--line);flex:0 0 auto;
}
.stat{display:flex;flex-direction:column;gap:1px;min-width:0;padding-right:14px}
.stat .k{
  font-size:10px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--chalk-dim);white-space:nowrap;
}
.stat .v{
  font-family:var(--font-display);font-weight:800;font-size:19px;
  line-height:1;font-variant-numeric:tabular-nums;color:var(--chalk);
}
.stat .v.warn{color:var(--amber)}
.hud .spacer{flex:1 1 auto}
.iconbtn{
  width:38px;height:38px;border-radius:11px;flex:0 0 auto;
  border:1px solid var(--line);display:grid;place-items:center;
  background:rgba(220,237,240,.05);
}
.iconbtn:hover{background:rgba(220,237,240,.11)}
.iconbtn svg{width:18px;height:18px;display:block}

/* ---------- tiles ---------- */
.tile{
  display:grid;place-items:center;text-align:center;
  padding:4px 13px;border-radius:17px;
  background:linear-gradient(165deg,var(--surf) 0%,var(--surf-2) 100%);
  color:var(--ink);font-weight:600;letter-spacing:-.005em;
  box-shadow:0 3px 10px rgba(4,18,23,.3),inset 0 1px 0 rgba(255,255,255,.85);
}
.tile::after{
  content:"";position:absolute;left:12%;top:11%;width:34%;height:22%;
  border-radius:50%;background:rgba(255,255,255,.62);pointer-events:none;
}
.tile span{
  position:relative;z-index:1;display:block;width:100%;
  min-width:0;   /* a grid item defaults to min-content width, which lets a long
                    word push the text box wider than the tile and slip the fit check */
  /* a phrase takes two lines rather than shrinking; a single long word
     still shrinks, because breaking a word mid-way helps nobody learn it */
}
.tile.sel{
  background:linear-gradient(165deg,#fbd9a9 0%,var(--amber) 100%);
  box-shadow:0 0 0 3px rgba(242,166,90,.4),0 4px 14px rgba(4,18,23,.36),inset 0 1px 0 rgba(255,255,255,.7);
}

/* ---------- overlay sheets ---------- */
.sheet{
  position:absolute;inset:0;z-index:20;
  display:flex;align-items:center;justify-content:center;
  padding:20px 16px;overflow-y:auto;
  background:linear-gradient(180deg,rgba(7,32,39,.58),rgba(7,32,39,.84));
  backdrop-filter:blur(2px);
}
.card{
  width:100%;max-width:400px;background:var(--deep);
  border:1px solid var(--line);border-radius:20px;
  padding:22px 20px;box-shadow:0 18px 50px rgba(0,0,0,.45);
}
.btn{
  display:block;width:100%;padding:13px;border-radius:13px;
  font-family:var(--font-display);font-weight:700;font-size:16px;
  background:var(--amber);color:#2a1503;text-align:center;
  text-decoration:none;
}
.btn:hover{filter:brightness(1.07)}
.btn.ghost{
  background:none;border:1px solid var(--line);color:var(--chalk);
  font-size:15px;padding:11px;
}
.btns{display:flex;flex-direction:column;gap:9px;margin-top:18px}

/* settings rows */
.row{padding:13px 0;border-top:1px solid var(--line)}
.row:first-of-type{border-top:0;padding-top:4px}
.row .lab{display:block;font-size:13px;font-weight:600;margin-bottom:2px}
.row .hint{display:block;font-size:11.5px;color:var(--chalk-dim);margin-bottom:9px;line-height:1.35}
.seg{display:flex;gap:6px;flex-wrap:wrap}
.seg button{
  flex:1 1 auto;min-width:56px;padding:8px 6px;border-radius:10px;
  border:1px solid var(--line);font-size:13px;font-weight:600;
  color:var(--chalk-dim);background:rgba(220,237,240,.04);
}
.seg button[aria-pressed="true"]{
  background:var(--chalk);color:var(--ink);border-color:var(--chalk);
}

/* summary */
.score{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:4px 0 18px}
.score div{border:1px solid var(--line);border-radius:12px;padding:10px 8px;text-align:center}
.score .n{
  font-family:var(--font-display);font-weight:800;font-size:22px;
  line-height:1.1;font-variant-numeric:tabular-nums;display:block;
}
.score .l{
  font-size:9.5px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--chalk-dim);display:block;margin-top:2px;
}
.review h3{
  font-size:10.5px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--chalk-dim);font-weight:700;margin:14px 0 7px;
}
.item{
  display:flex;gap:8px;align-items:baseline;
  padding:6px 0;border-top:1px solid var(--line);font-size:13.5px;
}
.item .mk{flex:0 0 auto;font-size:11px;line-height:1.6;color:var(--coral)}
.item .w{font-weight:600}
.item .eg{display:block;font-size:12px;color:var(--chalk-dim);font-style:italic;margin-top:1px}

/* feedback */
.fb{margin-top:16px;border-top:1px solid var(--line);padding-top:4px}
.fb h3{
  font-size:10.5px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--chalk-dim);font-weight:700;margin:12px 0 10px;
}
.fbq{font-size:13.5px;font-weight:600;margin:0 0 7px;color:var(--chalk)}
.fbscale{margin-bottom:14px}
.fbrow{display:flex;gap:6px}
.fbrow button{
  flex:1 1 0;min-width:0;padding:10px 0;border-radius:11px;
  border:1px solid var(--line);background:rgba(220,237,240,.04);
  color:var(--chalk-dim);font-family:var(--font-display);font-weight:800;font-size:15px;
}
.fbrow button:hover{background:rgba(220,237,240,.1)}
.fbrow button[aria-pressed="true"]{
  background:var(--amber);color:#2a1503;border-color:var(--amber);
}
.fbends{
  display:flex;justify-content:space-between;margin-top:5px;
  font-size:11px;color:var(--chalk-dim);
}
.fbnote{
  margin:2px 0 0;padding:9px 11px;border-radius:11px;
  background:rgba(95,199,159,.14);border:1px solid rgba(95,199,159,.45);
  color:var(--chalk);font-size:12.5px;line-height:1.35;
}

/* toast */
.toast{
  position:absolute;left:50%;bottom:60px;transform:translateX(-50%);z-index:8;
  padding:9px 15px;border-radius:18px;
  max-width:min(92%,360px);text-align:center;line-height:1.3;
  background:rgba(7,32,39,.92);border:1px solid var(--line);
  color:var(--chalk);font-size:13px;font-weight:600;
  animation:toastIn .2s ease-out;pointer-events:none;
}
@keyframes toastIn{from{opacity:0;transform:translate(-50%,8px)}to{opacity:1;transform:translate(-50%,0)}}

/* near miss */
.missdrops{display:flex;align-items:center;justify-content:center;gap:9px;flex-wrap:wrap;margin:14px 0}
.bigdrop{
  padding:15px 17px;border-radius:19px;
  background:linear-gradient(165deg,var(--surf) 0%,var(--surf-2) 100%);
  color:var(--ink);font-weight:700;font-size:17px;line-height:1.15;
  box-shadow:0 5px 16px rgba(4,18,23,.38),inset 0 1px 0 rgba(255,255,255,.85);
  animation:pop .32s cubic-bezier(.2,1.5,.4,1) backwards;
}
.bigdrop.b{animation-delay:.09s}
.arrowmark{color:var(--amber);font-size:19px;font-weight:800;animation:pop .32s cubic-bezier(.2,1.5,.4,1) .05s backwards}
@keyframes pop{from{transform:scale(.55);opacity:0}to{transform:scale(1);opacity:1}}

@media (prefers-reduced-motion:reduce){
  .bigdrop,.arrowmark,.toast{animation:none}
}