:root{
  --ui-paper:#f6efdf;
  --ui-paper-2:#ece2cc;
  --ui-ink:#271f18;
  --ui-sub:#7b6a56;
  --ui-line:rgba(39,31,24,.14);
  --red:#c8372a;
  --red-deep:#a52a20;
  --gold:#b8935a;
  --shadow:0 12px 34px rgba(0,0,0,.42);
  --sans:"Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic","Noto Sans JP",system-ui,sans-serif;
  --serif:"Hiragino Mincho ProN","Yu Mincho","YuMincho","Noto Serif JP",serif;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;overflow:hidden;background:#1d1713}
body{
  color:#fff;font-family:var(--sans);
  touch-action:manipulation;
  -webkit-user-select:none;user-select:none;-webkit-touch-callout:none;
  overscroll-behavior:none;
}
#game{position:fixed;inset:0;height:100dvh;overflow:hidden}
#cv{display:block;width:100%;height:100%;touch-action:none}
.hidden{display:none !important}

#vignette{
  position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(ellipse 82% 76% at 50% 44%, transparent 58%, rgba(12,8,6,.18) 88%, rgba(10,7,5,.34) 100%),
    linear-gradient(to bottom, rgba(10,7,5,.20), transparent 16%, transparent 84%, rgba(10,7,5,.24));
}

/* ---------- HUD ---------- */
#hud{
  position:absolute;top:0;left:0;right:0;z-index:10;
  display:flex;align-items:flex-start;justify-content:space-between;gap:12px;
  padding:calc(env(safe-area-inset-top) + 14px) calc(env(safe-area-inset-right) + 14px) 0 calc(env(safe-area-inset-left) + 14px);
  pointer-events:none;
}
.icon-btn{
  pointer-events:auto;appearance:none;border:0;width:44px;height:44px;border-radius:22px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(28,21,16,.72);color:#f4eddc;
  box-shadow:0 6px 18px rgba(0,0,0,.28), inset 0 0 0 1px rgba(255,255,255,.08);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  font:700 18px/1 var(--sans);cursor:pointer;transition:transform .16s,background .16s;
}
.icon-btn:hover{background:rgba(28,21,16,.88)}
.icon-btn:active{transform:scale(.94)}
.icon-btn.dark{background:rgba(39,31,24,.1);color:var(--ui-ink);box-shadow:none;font-size:24px}
.icon-btn:focus-visible,button:focus-visible{outline:2px solid #fff;outline-offset:3px}
.menu-lines{display:grid;gap:4px}
.menu-lines i{display:block;width:18px;height:2px;border-radius:1px;background:currentColor}

#char-tag{
  pointer-events:none;display:flex;flex-direction:column;align-items:center;gap:1px;
  padding:7px 20px 6px;border-radius:3px 3px 15px 15px;
  background:linear-gradient(175deg,#fbf7ec 0%,#f2e9d5 68%,#e7dcc4 100%);
  color:var(--ui-ink);
  box-shadow:0 10px 26px rgba(0,0,0,.32), inset 0 0 0 1px rgba(120,95,60,.16), inset 0 1px 0 rgba(255,255,255,.8);
}
#char-glyph{font:700 38px/1.05 var(--serif);letter-spacing:.02em}
#char-meta{font:600 10px/1.25 var(--sans);color:var(--ui-sub);letter-spacing:.1em;white-space:nowrap}
#char-tag.is-faded{opacity:0;transform:translateY(-8px);transition:opacity .3s,transform .3s}

/* ---------- ink meter ---------- */
#ink-meter{
  position:absolute;z-index:10;left:calc(env(safe-area-inset-left) + 18px);top:50%;
  transform:translateY(-50%);
  display:flex;flex-direction:column;align-items:center;gap:8px;pointer-events:none;
  opacity:.94;transition:opacity .3s;
}
#ink-meter .drop{width:7px;height:9px;border-radius:0 50% 50% 50%;background:#f6efdf;transform:rotate(45deg);box-shadow:0 0 8px rgba(255,255,255,.35)}
.meter-track{
  width:9px;height:132px;border-radius:5px;overflow:hidden;
  background:rgba(20,15,12,.55);box-shadow:inset 0 0 0 1px rgba(255,255,255,.16);
  display:flex;align-items:flex-end;
}
#ink-fill{
  width:100%;height:55%;border-radius:4px;
  background:linear-gradient(to top,#0d0b09,#3a2c22 82%,#6b5140);
  transition:height .12s linear;
}
.meter-label{font:700 10px/1 var(--serif);letter-spacing:.16em;color:rgba(246,239,223,.86);writing-mode:vertical-rl}

/* ---------- tools / done ---------- */
#tools{
  position:absolute;z-index:11;right:calc(env(safe-area-inset-right) + 16px);
  bottom:calc(env(safe-area-inset-bottom) + 102px);
  display:flex;flex-direction:column;gap:10px;
}
.tool-btn{
  appearance:none;border:0;width:46px;height:46px;border-radius:23px;cursor:pointer;
  background:rgba(28,21,16,.66);color:#f4eddc;
  box-shadow:0 7px 18px rgba(0,0,0,.28), inset 0 0 0 1px rgba(255,255,255,.09);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  font:700 18px/1 var(--sans);transition:transform .16s,background .16s;
  display:flex;align-items:center;justify-content:center;
}
.tool-btn:hover{background:rgba(28,21,16,.84)}
.tool-btn:active{transform:scale(.93)}
.tool-btn:disabled{opacity:.38;cursor:default}

#done{
  position:absolute;z-index:12;left:50%;bottom:calc(env(safe-area-inset-bottom) + 20px);
  transform:translateX(-50%);
  appearance:none;border:0;height:62px;min-width:196px;padding:0 36px;border-radius:31px;cursor:pointer;
  background:linear-gradient(180deg,#fdf9ee,#eee3cc);color:var(--ui-ink);
  font:800 20px/1 var(--sans);letter-spacing:.08em;
  box-shadow:0 14px 34px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.9), inset 0 0 0 1px rgba(103,80,49,.18);
  transition:transform .18s,box-shadow .18s;
}
#done:hover{transform:translateX(-50%) translateY(-2px);box-shadow:0 18px 40px rgba(0,0,0,.44), inset 0 1px 0 rgba(255,255,255,.9)}
#done:active{transform:translateX(-50%) scale(.97)}
#done.highlight{animation:donePulse 1.5s ease-in-out infinite}
@keyframes donePulse{
  0%,100%{box-shadow:0 14px 34px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.9), inset 0 0 0 1px rgba(103,80,49,.18)}
  50%{box-shadow:0 16px 44px rgba(0,0,0,.46), 0 0 0 12px rgba(248,238,216,.14), inset 0 1px 0 rgba(255,255,255,.9)}
}

#toast{
  position:absolute;z-index:15;left:50%;bottom:calc(env(safe-area-inset-bottom) + 96px);
  transform:translate(-50%,10px);
  max-width:min(84vw,360px);padding:11px 18px;border-radius:14px;
  background:rgba(24,18,14,.88);color:#f7f1e3;font:600 13px/1.5 var(--sans);
  box-shadow:0 12px 30px rgba(0,0,0,.36);
  opacity:0;pointer-events:none;transition:opacity .24s,transform .24s;
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  text-align:center;
}
#toast.show{opacity:1;transform:translate(-50%,0)}

/* ---------- coach / tutorial ---------- */
#coach{position:absolute;inset:0;z-index:20;pointer-events:none}
#coach-ring{
  position:absolute;left:0;top:0;width:128px;height:128px;margin:-64px 0 0 -64px;border-radius:50%;
  border:2px dashed rgba(209,67,49,.92);
  box-shadow:0 0 0 10px rgba(209,67,49,.08), 0 0 34px rgba(209,67,49,.22) inset;
  animation:coachPulse 1.8s ease-in-out infinite;
  transition:opacity .25s;
}
#coach-ring.hidden{display:none}
#coach-ring-label{
  position:absolute;left:50%;top:-15px;transform:translateX(-50%);
  padding:5px 12px;border-radius:12px;background:var(--red);color:#fff;
  font:700 12px/1 var(--sans);letter-spacing:.08em;white-space:nowrap;
  box-shadow:0 6px 14px rgba(0,0,0,.25);
}
@keyframes coachPulse{
  0%,100%{transform:scale(1);opacity:.9}
  50%{transform:scale(1.08);opacity:1}
}
.coach-card{
  pointer-events:auto;position:absolute;left:50%;bottom:calc(env(safe-area-inset-bottom) + 98px);
  transform:translateX(-50%);
  width:min(88vw,392px);padding:18px 18px 14px;border-radius:20px;
  background:linear-gradient(170deg,rgba(252,248,238,.98),rgba(238,227,206,.97));
  color:var(--ui-ink);
  box-shadow:0 20px 54px rgba(0,0,0,.46), inset 0 0 0 1px rgba(103,80,49,.18);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  animation:coachIn .34s cubic-bezier(.2,.9,.25,1);
}
@keyframes coachIn{from{opacity:0;transform:translate(-50%,14px)}to{opacity:1;transform:translate(-50%,0)}}
.coach-step{margin:0 0 3px;font:700 10px/1 var(--sans);letter-spacing:.18em;color:var(--red)}
.coach-title{margin:0 0 6px;font:700 18px/1.35 var(--serif);letter-spacing:.02em}
.coach-text{margin:0;font:500 13px/1.7 var(--sans);color:#54463a}
.coach-actions{display:flex;justify-content:flex-end;margin-top:10px}
.ghost-btn{
  appearance:none;border:0;background:none;color:var(--ui-sub);font:700 12px/1 var(--sans);
  padding:9px 10px;border-radius:10px;cursor:pointer;
}
.ghost-btn:hover{background:rgba(39,31,24,.06)}

/* ---------- menu ---------- */
#menu{
  position:absolute;inset:0;z-index:30;display:flex;align-items:flex-end;justify-content:center;
  background:rgba(18,13,10,.48);backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);
  animation:fadeIn .22s ease;
}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.sheet{
  width:min(600px,100%);max-height:92dvh;overflow:auto;
  padding:18px 20px calc(env(safe-area-inset-bottom) + 18px);
  background:linear-gradient(170deg,#fbf6ea,#efe4ce);
  color:var(--ui-ink);border-radius:24px 24px 0 0;
  box-shadow:0 -20px 60px rgba(0,0,0,.4);
  animation:sheetIn .34s cubic-bezier(.2,.9,.25,1);
}
@keyframes sheetIn{from{transform:translateY(34px);opacity:0}to{transform:translateY(0);opacity:1}}
.sheet-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.sheet-head h2{margin:0;font:700 20px/1.2 var(--serif);letter-spacing:.04em}
.menu-section{padding:13px 0;border-top:1px solid var(--ui-line)}
.menu-section:first-of-type{border-top:0;padding-top:0}
.menu-section h3{margin:0 0 10px;font:700 12px/1 var(--sans);letter-spacing:.16em;color:var(--ui-sub)}
.char-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(48px,1fr));gap:7px}
.char-grid button{
  appearance:none;border:0;aspect-ratio:1;border-radius:13px;cursor:pointer;
  background:rgba(255,255,255,.52);color:var(--ui-ink);
  font:700 23px/1 var(--serif);
  box-shadow:inset 0 0 0 1px rgba(103,80,49,.14);
  transition:transform .14s,background .14s,box-shadow .14s;
}
.char-grid button:hover{background:#fff;transform:translateY(-1px)}
.char-grid button[aria-pressed="true"]{
  background:var(--ui-ink);color:#fbf6ea;
  box-shadow:0 6px 16px rgba(39,31,24,.28);
}
.custom-row{display:flex;gap:8px;margin-top:12px}
.custom-row input{
  flex:1;min-width:0;height:46px;border:0;border-radius:14px;padding:0 15px;
  background:rgba(255,255,255,.62);color:var(--ui-ink);
  font:600 16px/1 var(--serif);box-shadow:inset 0 0 0 1px rgba(103,80,49,.16);
}
.custom-row input::placeholder{color:#a5967f;font-family:var(--sans);font-size:13px}
.custom-row input:focus{outline:2px solid var(--red);outline-offset:1px}
.custom-row button{
  appearance:none;border:0;height:46px;padding:0 18px;border-radius:14px;cursor:pointer;
  background:var(--ui-ink);color:#fbf6ea;font:700 13px/1 var(--sans);
}
.custom-row button:disabled{opacity:.5}
.menu-note{margin:9px 0 0;font:500 11px/1.6 var(--sans);color:var(--ui-sub)}
.segmented{display:flex;gap:6px;padding:5px;border-radius:15px;background:rgba(39,31,24,.07)}
.segmented button{
  flex:1;appearance:none;border:0;height:40px;border-radius:11px;cursor:pointer;
  background:none;color:var(--ui-sub);font:700 13px/1 var(--sans);
  transition:background .16s,color .16s,box-shadow .16s;
}
.segmented button[aria-pressed="true"]{background:#fffdf7;color:var(--ui-ink);box-shadow:0 3px 10px rgba(39,31,24,.14)}
.switch-row{display:flex;align-items:center;justify-content:space-between;margin-top:14px;font:600 13px/1 var(--sans);color:var(--ui-ink);cursor:pointer}
.switch-row input{position:absolute;opacity:0;pointer-events:none}
.switch-row i{position:relative;width:46px;height:27px;border-radius:14px;background:rgba(39,31,24,.18);transition:background .18s}
.switch-row i::after{content:"";position:absolute;left:3px;top:3px;width:21px;height:21px;border-radius:11px;background:#fff;box-shadow:0 2px 6px rgba(0,0,0,.2);transition:transform .18s}
.switch-row input:checked + i{background:var(--red)}
.switch-row input:checked + i::after{transform:translateX(19px)}
.wide-btn{
  width:100%;appearance:none;border:0;min-height:52px;border-radius:16px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;gap:12px;
  background:#fffdf7;color:var(--ui-ink);font:700 14px/1 var(--sans);
  box-shadow:inset 0 0 0 1px rgba(103,80,49,.16),0 4px 12px rgba(39,31,24,.06);
}
.wide-btn span:first-child{font:700 24px/1 var(--serif);color:var(--red)}
.wide-btn.ghost{margin-top:16px;background:transparent;box-shadow:none;border:1px dashed rgba(103,80,49,.3);color:var(--ui-sub);font-size:12px}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.stats div{padding:12px 8px;border-radius:14px;background:rgba(255,255,255,.5);text-align:center}
.stats span{display:block;font:600 10px/1 var(--sans);letter-spacing:.1em;color:var(--ui-sub);margin-bottom:6px}
.stats strong{font:700 18px/1 var(--serif);color:var(--ui-ink)}

/* ---------- result ---------- */
#result{
  position:absolute;inset:0;z-index:40;display:flex;align-items:center;justify-content:center;
  padding:calc(env(safe-area-inset-top) + 20px) 20px calc(env(safe-area-inset-bottom) + 20px);
  background:
    radial-gradient(ellipse 70% 70% at 50% 40%, rgba(58,43,32,.56), rgba(14,10,8,.91) 76%),
    rgba(14,10,8,.72);
  backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px);
  animation:fadeIn .28s ease;
}
.result-card{
  display:flex;align-items:center;justify-content:center;gap:clamp(20px,4vw,52px);
  animation:cardIn .5s cubic-bezier(.2,.9,.25,1);
}
@keyframes cardIn{from{opacity:0;transform:translateY(18px) scale(.97)}to{opacity:1;transform:none}}
.paper-frame{
  position:relative;height:min(72dvh,620px);aspect-ratio:2.4/3.3;flex:0 0 auto;
  border-radius:2px;overflow:hidden;
  box-shadow:0 26px 70px rgba(0,0,0,.55), 0 2px 0 rgba(255,255,255,.14) inset, 0 0 0 1px rgba(255,255,255,.08);
  transform:rotate(-.7deg);
  background:#f6f0e2;
}
#result-cv{display:block;width:100%;height:100%}
.result-panel{
  width:min(320px,86vw);display:flex;flex-direction:column;align-items:flex-start;
  color:#f7f1e3;
}
.result-eyebrow{margin:0 0 4px;font:700 11px/1 var(--sans);letter-spacing:.22em;color:rgba(247,241,227,.58)}
.result-rank{
  margin:0;font:700 clamp(38px,5.4vw,58px)/1 var(--serif);letter-spacing:.06em;
  color:#fff8e9;text-shadow:0 2px 22px rgba(216,160,92,.24);
}
.result-score{margin:6px 0 20px;font:700 clamp(46px,6.2vw,68px)/1 var(--serif);color:#fffdf6}
.result-score small{font:700 17px/1 var(--sans);margin-left:6px;color:rgba(247,241,227,.62);letter-spacing:.06em}
.bars{width:100%;display:flex;flex-direction:column;gap:10px;margin-bottom:16px}
.bar-row{display:grid;grid-template-columns:62px 1fr 30px;align-items:center;gap:10px;font:600 11px/1 var(--sans);color:rgba(247,241,227,.78)}
.bar{height:6px;border-radius:3px;background:rgba(255,255,255,.14);overflow:hidden}
.bar i{display:block;height:100%;width:0;border-radius:3px;background:linear-gradient(90deg,#b8935a,#f0d9a8);transition:width .7s cubic-bezier(.2,.9,.25,1)}
.bar-row b{font:700 12px/1 var(--sans);text-align:right;color:#fff8e9}
.result-note{margin:0 0 18px;min-height:17px;font:600 12px/1.5 var(--sans);color:rgba(247,241,227,.66)}
.result-actions{display:flex;flex-wrap:wrap;gap:9px;width:100%}
.primary-btn,.secondary-btn{
  appearance:none;border:0;height:46px;padding:0 20px;border-radius:23px;cursor:pointer;
  font:700 14px/1 var(--sans);letter-spacing:.04em;transition:transform .16s,background .16s;
}
.primary-btn{background:#fbf5e7;color:#271f18;box-shadow:0 8px 22px rgba(0,0,0,.3)}
.secondary-btn{background:rgba(255,255,255,.12);color:#f7f1e3;box-shadow:inset 0 0 0 1px rgba(255,255,255,.18)}
.primary-btn:hover,.secondary-btn:hover{transform:translateY(-1px)}
.primary-btn:active,.secondary-btn:active{transform:scale(.97)}

/* ---------- share ---------- */
#share-view{
  position:absolute;inset:0;z-index:50;display:flex;align-items:center;justify-content:center;
  padding:20px;background:rgba(10,7,5,.72);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
}
.share-panel{
  width:min(92vw,380px);max-height:92dvh;overflow:auto;padding:18px;border-radius:22px;
  background:linear-gradient(170deg,#fbf6ea,#efe4ce);color:var(--ui-ink);
  display:flex;flex-direction:column;gap:14px;box-shadow:0 26px 60px rgba(0,0,0,.5);
}
#share-img{display:block;width:auto;max-width:100%;max-height:52dvh;align-self:center;border-radius:8px;box-shadow:0 8px 26px rgba(0,0,0,.24)}
#share-text{margin:0;white-space:pre-wrap;word-break:break-all;font:600 13px/1.7 var(--sans);-webkit-user-select:text;user-select:text}
#share-close{align-self:center;background:#271f18;color:#fbf6ea}

/* ---------- responsive ---------- */
@media (max-width:700px){
  #char-glyph{font-size:32px}
  #char-tag{padding:6px 16px 5px}
  #char-meta{font-size:9px}
  #ink-meter{left:calc(env(safe-area-inset-left) + 12px)}
  .meter-track{height:104px}
  #tools{right:calc(env(safe-area-inset-right) + 12px);bottom:calc(env(safe-area-inset-bottom) + 96px);gap:8px}
  .tool-btn{width:44px;height:44px;border-radius:22px;font-size:16px}
  #done{height:58px;min-width:180px;font-size:18px;bottom:calc(env(safe-area-inset-bottom) + 16px)}
  .result-card{flex-direction:column;gap:18px;width:100%}
  .paper-frame{height:auto;width:min(62vw,300px);aspect-ratio:2.4/3.3;max-height:48dvh}
  .result-panel{width:min(86vw,360px);align-items:center;text-align:center}
  .result-score{margin-bottom:16px}
  .bar-row{grid-template-columns:56px 1fr 28px}
  .result-actions{justify-content:center}
  .result-note{text-align:center}
  .sheet{border-radius:22px 22px 0 0;padding-left:16px;padding-right:16px}
  .stats{grid-template-columns:repeat(2,1fr)}
}
@media (max-height:620px){
  #char-meta{display:none}
  .coach-card{bottom:calc(env(safe-area-inset-bottom) + 86px);padding:14px 16px 12px}
  .coach-title{font-size:16px}
  .coach-text{font-size:12px;line-height:1.55}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important}
}