/* DOPA BOX — "dopamine design": 明るいベタ塗り / 太い輪郭 / ずらした影 / おもちゃ感 */
:root{
  --ink:#1d1a2f;--paper:#fff6e5;--white:#ffffff;
  --red:#ff4d4d;--orange:#ff8a1f;--yellow:#ffd23f;--green:#2ecc71;--mint:#3ddcc1;
  --blue:#3d8bff;--sky:#6fd3ff;--purple:#9b5de5;--pink:#ff6fb5;
  --gc:var(--yellow);           /* ゲームごとのテーマ色（body の style で上書き） */
  --font:'Dela Gothic One','Hiragino Sans','Noto Sans JP',system-ui,sans-serif;
  --jp:'Hiragino Sans','Noto Sans JP','Yu Gothic',system-ui,sans-serif;
  --line:4px solid var(--ink);
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{height:100%;background:var(--paper);color:var(--ink);font-family:var(--font);user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
body.game{position:fixed;inset:0;overflow:hidden;overscroll-behavior:none;touch-action:none;background:var(--gc)}
canvas#c{position:fixed;inset:0;width:100%;height:100%;display:block;touch-action:none}
.hide{display:none!important}
.dots{background-image:radial-gradient(rgba(29,26,47,.10) 18%,transparent 20%);background-size:26px 26px}

/* ---------- HUD ---------- */
.hud{position:fixed;top:0;left:0;right:0;z-index:5;display:flex;align-items:flex-start;justify-content:space-between;
  padding:calc(env(safe-area-inset-top,0px) + 10px) 12px 0;pointer-events:none}
.icon{pointer-events:auto;flex:none;width:44px;height:44px;border-radius:14px;border:3px solid var(--ink);background:var(--white);
  color:var(--ink);font:inherit;font-size:17px;display:grid;place-items:center;text-decoration:none;cursor:pointer;box-shadow:0 4px 0 var(--ink)}
.icon:active{transform:translateY(3px);box-shadow:0 1px 0 var(--ink)}
.hud-mid{text-align:center;flex:1}
.score{display:inline-block;min-width:120px;font-size:30px;line-height:1;padding:7px 18px 9px;background:var(--white);border:3px solid var(--ink);
  border-radius:16px;box-shadow:0 4px 0 var(--ink);font-variant-numeric:tabular-nums}
.sub{margin-top:8px;font-size:15px;letter-spacing:3px;font-variant-numeric:tabular-nums;color:var(--ink);
  text-shadow:-1.5px -1.5px 0 #fff,1.5px -1.5px 0 #fff,-1.5px 1.5px 0 #fff,1.5px 1.5px 0 #fff}
.sub .on{color:var(--red)} .sub .off{color:rgba(29,26,47,.25)}
.sub .ok{color:var(--green)} .sub .ng{color:var(--red)}

/* ---------- Title screen（カートリッジのラベル風カード） ---------- */
.screen{position:fixed;inset:0;z-index:10;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
  padding:calc(env(safe-area-inset-top,0px) + 20px) 16px calc(env(safe-area-inset-bottom,0px) + 20px);
  background-color:var(--gc);background-image:radial-gradient(rgba(29,26,47,.12) 18%,transparent 20%);background-size:26px 26px;cursor:pointer}
.screen .card{width:min(360px,100%);background:var(--white);border:var(--line);border-radius:28px;box-shadow:0 10px 0 var(--ink);
  padding:26px 20px 24px;animation:pop .45s cubic-bezier(.2,1.6,.4,1)}
@keyframes pop{from{transform:scale(.6) rotate(-4deg);opacity:0}}
.tag{display:inline-block;font-size:12px;letter-spacing:.25em;padding:6px 12px 6px 15px;background:var(--ink);color:var(--white);border-radius:999px}
.title{margin:14px 0 6px;font-size:clamp(46px,14vw,68px);line-height:.98;font-weight:400;color:var(--white);
  -webkit-text-stroke:3px var(--ink);paint-order:stroke fill;text-shadow:0 6px 0 var(--ink);letter-spacing:.01em}
.title .ac{color:var(--gc)}
.how{font-family:var(--jp);font-weight:800;font-size:14.5px;line-height:1.8;color:var(--ink);margin:10px 0 12px}
.how b{background:linear-gradient(transparent 55%,var(--gc) 55%);font-weight:900}
.best{font-size:13px;color:rgba(29,26,47,.55);margin-bottom:16px;letter-spacing:.1em}
.start{display:inline-block;font-size:20px;padding:13px 34px;background:var(--gc);border:var(--line);border-radius:999px;box-shadow:0 6px 0 var(--ink);
  animation:bob 1.1s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(-4px) scale(1.04)}}

/* ---------- Result ---------- */
.result{justify-content:flex-start;overflow-y:auto;touch-action:pan-y;cursor:default;animation:fadein .2s ease-out}
@keyframes fadein{from{opacity:0}}
.result .inner{margin:auto 0;width:min(360px,100%);background:var(--white);border:var(--line);border-radius:28px;box-shadow:0 10px 0 var(--ink);
  padding:22px 18px 20px;position:relative}
.r-game{display:inline-block;font-size:12px;letter-spacing:.25em;padding:5px 12px 5px 15px;background:var(--ink);color:#fff;border-radius:999px}
.r-label{font-size:12px;color:rgba(29,26,47,.5);margin-top:12px;letter-spacing:.35em}
.r-score{font-size:clamp(46px,14vw,64px);line-height:1.05;font-variant-numeric:tabular-nums;color:var(--ink)}
.r-new{display:inline-block;margin-top:4px;padding:4px 12px;background:var(--red);color:#fff;border:3px solid var(--ink);border-radius:10px;font-size:15px;
  animation:newp .4s ease-in-out infinite alternate}
@keyframes newp{to{transform:scale(1.1) rotate(-3deg)}}
.r-rankwrap{height:118px;display:grid;place-items:center;margin-top:6px}
.r-rank{width:108px;height:108px;border-radius:50%;display:grid;place-items:center;font-size:var(--rs,52px);line-height:1;color:#fff;background:var(--rc);
  border:4px solid var(--ink);box-shadow:0 6px 0 var(--ink),inset 0 0 0 5px rgba(255,255,255,.55);opacity:0;transform:scale(3) rotate(-30deg);
  -webkit-text-stroke:2.5px var(--ink);paint-order:stroke fill}
.r-rank.in{animation:stamp .36s cubic-bezier(.2,1.5,.4,1) forwards}
@keyframes stamp{to{opacity:1;transform:scale(1) rotate(-10deg)}}
.r-comment{font-size:18px;margin:8px 0 8px;opacity:0;transition:opacity .3s}
.r-lines{font-family:var(--jp);font-weight:800;font-size:13.5px;color:rgba(29,26,47,.75);line-height:1.8;background:var(--paper);border-radius:14px;padding:8px}
.r-best{font-size:12px;color:rgba(29,26,47,.5);margin:8px 0 6px;letter-spacing:.15em}
.result .btn{opacity:0;transform:translateY(12px);pointer-events:none}
.result.ready .btn{opacity:1;transform:none;pointer-events:auto;transition:opacity .25s,transform .25s}
.result.ready .r-comment{opacity:1}
.shake{animation:shk .35s}
@keyframes shk{20%{transform:translate(-8px,4px)}40%{transform:translate(7px,-5px)}60%{transform:translate(-5px,3px)}80%{transform:translate(3px,-2px)}}

.btn{display:block;width:100%;margin:12px auto 0;padding:14px 16px;border-radius:18px;border:var(--line);font:inherit;font-size:18px;
  color:var(--ink);background:#fff;text-decoration:none;cursor:pointer;text-align:center;box-shadow:0 6px 0 var(--ink)}
.btn:active{transform:translateY(5px)!important;box-shadow:0 1px 0 var(--ink)}
.btn-x{background:var(--ink);color:#fff}
.btn-main{background:var(--gc)}
.btn-sub{font-size:15px;padding:11px}
.hud-side{display:flex;gap:6px;width:94px;flex:none}
.hud-side.r{justify-content:flex-end}
.icon-x{font-family:system-ui,sans-serif;font-weight:900;font-size:18px}
.credit{display:inline-flex;align-items:center;gap:7px;margin-top:14px;padding:4px 12px 4px 4px;border:2.5px solid var(--ink);border-radius:999px;
  background:#fff;color:var(--ink);text-decoration:none;font-family:var(--jp);font-weight:800;font-size:12px;cursor:pointer}
.credit img{width:22px;height:22px;border-radius:50%;border:2px solid var(--ink);display:block}
.credit b{font-family:var(--font);font-weight:400}
/* 音量ポップアップ */
.vol-pop{position:fixed;z-index:40;display:flex;align-items:center;gap:10px;padding:10px 14px 10px 10px;background:#fff;border:3px solid var(--ink);
  border-radius:16px;box-shadow:0 5px 0 var(--ink);touch-action:none}
.vol-mute{width:38px;height:38px;border-radius:12px;border:2.5px solid var(--ink);background:var(--paper);font-size:17px;cursor:pointer}
.vol-pop input[type=range]{-webkit-appearance:none;appearance:none;width:150px;height:14px;border-radius:999px;border:2.5px solid var(--ink);
  background:linear-gradient(90deg,var(--gc,var(--yellow)) var(--p,80%),#eee var(--p,80%));cursor:pointer}
.vol-pop input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:26px;height:26px;border-radius:50%;background:#fff;border:3px solid var(--ink);box-shadow:0 3px 0 var(--ink)}
.vol-pop input[type=range]::-moz-range-thumb{width:22px;height:22px;border-radius:50%;background:#fff;border:3px solid var(--ink)}
.vol-val{min-width:30px;text-align:right;font-size:15px;font-variant-numeric:tabular-nums}
.lang .icon{width:34px;height:34px;border-radius:999px;font-size:15px;box-shadow:0 3px 0 var(--ink);border-width:2.5px}