:root{
  --paper:#ece2cc; --ink:#1b1710; --soft:#6b6356; --red:#c1382b;
  --serif:Georgia,'Times New Roman','Noto Serif',serif;
}
*,*::before,*::after{box-sizing:border-box;-webkit-tap-highlight-color:transparent;touch-action:manipulation;}
html,body{margin:0;height:100%;background:var(--paper);overflow:hidden;color:var(--ink);
  font-family:var(--serif);user-select:none;-webkit-user-select:none;overscroll-behavior:none;
  -webkit-touch-callout:none;}
#gameCanvas{position:fixed;inset:0;width:100%;height:100%;display:block;touch-action:none;z-index:0;}

/* paper tooth + vignette above the canvas, below UI */
body::before{content:'';position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.5;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/></svg>");}
body::after{content:'';position:fixed;inset:0;z-index:1;pointer-events:none;box-shadow:inset 0 0 120px 30px rgba(60,48,28,.28);}

.screen{position:fixed;inset:0;z-index:10;display:flex;flex-direction:column;
  padding:calc(env(safe-area-inset-top,0px) + 20px) 28px calc(env(safe-area-inset-bottom,0px) + 24px);}
.screen[hidden]{display:none;}

/* ---------- home ---------- */
/* the ensō + ink core are painted by the canvas in the upper area; the UI block
   is grouped toward the lower third for a composed, gallery-like layout. */
#homeScreen.home{justify-content:space-between;background:transparent;}
.gear{position:absolute;top:calc(env(safe-area-inset-top,0px) + 18px);right:26px;
  width:34px;height:34px;display:grid;place-items:center;color:var(--soft);cursor:pointer;z-index:4;
  border:1px solid rgba(27,23,16,.25);border-radius:50%;background:none;}
.gear:active{background:rgba(27,23,16,.06);}
.gear svg{width:17px;height:17px;}

.home-top{z-index:3;display:flex;flex-direction:column;align-items:center;margin-top:40px;}
.home-bottom{z-index:3;display:flex;flex-direction:column;align-items:center;}
.wordmark{font-weight:500;font-size:40px;letter-spacing:6px;line-height:1;text-indent:6px;}
.tagline{font-style:italic;font-size:15px;color:var(--soft);letter-spacing:1px;margin-top:9px;}
.beststat{display:flex;flex-direction:column;align-items:center;}
.best-num{font-weight:500;font-size:46px;line-height:.95;letter-spacing:-1px;color:var(--ink);}
.best-lab{font-style:italic;font-size:12px;letter-spacing:3px;color:var(--soft);margin-top:2px;}

.play{position:relative;cursor:pointer;border:none;background:none;width:116px;height:116px;
  display:grid;place-items:center;pointer-events:auto;margin-top:24px;}
.play .disc{position:absolute;inset:0;border-radius:50%;
  background:radial-gradient(circle at 38% 36%,#3a352b 0%,#241f17 55%,#15110b 100%);
  box-shadow:0 8px 30px rgba(27,23,16,.35);}
.play .tri{position:relative;z-index:2;width:0;height:0;border-style:solid;
  border-width:14px 0 14px 24px;border-color:transparent transparent transparent var(--paper);margin-left:7px;}
.play:active{transform:scale(.97);}

.lvl{display:flex;align-items:center;gap:12px;width:100%;max-width:280px;margin-top:24px;}
.lvl b{font-weight:500;font-size:13px;white-space:nowrap;}
.lvl .trk{flex:1;height:2px;background:rgba(27,23,16,.18);position:relative;}
.lvl .trk > i{position:absolute;left:0;top:-1px;height:4px;width:0;background:var(--ink);transition:width .3s;}
.lvl span{font-style:italic;font-size:12px;color:var(--soft);white-space:nowrap;}

/* ---------- HUD ---------- */
#hud{position:fixed;inset:0;z-index:5;pointer-events:none;padding:calc(env(safe-area-inset-top,0px) + 20px) 26px;}
#hud[hidden]{display:none;}
.srow{display:flex;align-items:baseline;gap:12px;}
#score{font-weight:500;font-size:50px;letter-spacing:-1px;line-height:.9;transition:transform .07s;}
#mult{font-weight:500;font-size:22px;color:var(--red);font-style:italic;opacity:0;transform:translateY(4px);transition:opacity .15s,transform .15s;}
#mult.on{opacity:1;transform:translateY(0);}
.bars{margin-top:14px;display:flex;flex-direction:column;gap:9px;width:160px;}
.meter .lab{font-style:italic;font-size:11px;color:var(--soft);letter-spacing:2px;margin-bottom:4px;}
.meter .bar{position:relative;height:7px;}
.meter .trk{position:absolute;inset:0;clip-path:polygon(0 30%,98% 0,100% 50%,98% 100%,0 70%);}
.meter .fill{position:absolute;left:0;top:0;height:100%;width:100%;background:var(--ink);
  clip-path:polygon(0 30%,98% 0,100% 50%,98% 100%,0 70%);transition:width .14s,background .3s;}
.bar--ink .trk{background:rgba(27,23,16,.14);}
.bar--core .trk{background:rgba(193,56,43,.34);}        /* red wound shows as integrity drops */
#coreWrap.low .fill{background:var(--red);animation:pulseLow 1s ease-in-out infinite;}
@keyframes pulseLow{0%,100%{opacity:1;}50%{opacity:.5;}}
#wave{position:fixed;top:calc(env(safe-area-inset-top,0px) + 22px);right:26px;font-style:italic;font-size:13px;color:var(--soft);z-index:5;}
.coach{position:fixed;left:50%;bottom:88px;transform:translateX(-50%);z-index:6;pointer-events:none;
  font-style:italic;font-size:15px;color:var(--soft);transition:opacity .5s;text-align:center;width:80%;}
.coach[hidden]{display:none;}

/* ---------- game over ---------- */
#over{align-items:center;justify-content:center;text-align:center;background:transparent;}
#over .big{font-weight:500;font-size:80px;letter-spacing:-2px;line-height:.9;}
#over .sub{font-style:italic;font-size:14px;letter-spacing:3px;color:var(--soft);margin-top:6px;}
.divx{width:46px;height:1.5px;background:var(--ink);opacity:.35;margin:22px 0;}
.ostats{display:flex;gap:38px;}
.ostats b{font-weight:500;font-size:24px;display:block;}
.ostats span{font-style:italic;font-size:11px;color:var(--soft);}
.orew{margin-top:24px;font-size:16px;}
.orew .r{color:var(--red);font-style:italic;}
.obest{margin-top:8px;font-size:14px;color:var(--red);font-style:italic;opacity:0;transition:opacity .4s;}
.obest.show{opacity:1;}
.obtns{display:flex;gap:14px;margin-top:30px;}
.btn{padding:14px 30px;cursor:pointer;font-family:var(--serif);font-weight:500;font-size:16px;letter-spacing:2px;text-indent:2px;
  border:1.5px solid rgba(27,23,16,.4);border-radius:2px;background:none;color:var(--ink);}
.btn--fill{background:var(--ink);color:var(--paper);border-color:var(--ink);}
.btn:active{transform:translateY(1px);}

/* ---------- settings ---------- */
#settings{align-items:center;justify-content:center;gap:0;background:transparent;}
#settings h2{font-weight:500;font-size:30px;letter-spacing:4px;text-indent:4px;margin-bottom:6px;}
.set-row{display:flex;align-items:center;justify-content:space-between;width:100%;max-width:300px;
  padding:18px 2px;border-bottom:1px solid rgba(27,23,16,.14);}
.set-row .k{display:flex;flex-direction:column;}
.set-row .k b{font-weight:500;font-size:17px;}
.set-row .k span{font-style:italic;font-size:12px;color:var(--soft);margin-top:2px;}
.toggle{min-width:64px;text-align:center;padding:8px 14px;cursor:pointer;font-family:var(--serif);font-weight:500;font-size:15px;
  border:1.5px solid rgba(27,23,16,.4);border-radius:2px;background:none;color:var(--ink);}
.toggle--wide{min-width:104px;}
.toggle:active{transform:translateY(1px);}
#settings .seal-seat{margin-top:26px;}

/* ---------- resume veil ---------- */
#resumeOverlay{position:fixed;inset:0;z-index:30;display:flex;align-items:center;justify-content:center;
  background:rgba(236,226,204,.55);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);}
#resumeOverlay[hidden]{display:none;}
#resumeOverlay .r{font-style:italic;font-size:18px;letter-spacing:1px;color:var(--ink);}