:root{
    --ink:#0b0a12;        /* 夜闇 */
    --shadow:#171022;     /* 影 */
    --violet:#3d2a55;     /* 影の縁 */
    --crimson:#a8243a;    /* 沈んだ紅 */
    --blood:#d4365a;
    --steel:#cfd3dd;      /* 鋼 */
    --gold:#ffd76a;       /* 一閃 */
    --mist:#9b94a8;
  }
  *{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
  html,body{height:100%;overflow:hidden;background:var(--ink);
    font-family:"Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;color:var(--steel);
    touch-action:none;user-select:none;-webkit-user-select:none}
  .serif{font-family:"Noto Serif JP","Hiragino Mincho ProN","Yu Mincho",serif}
  #g{position:fixed;inset:0;display:block;width:100%;height:100%;
    image-rendering:-moz-crisp-edges;
    image-rendering:-webkit-optimize-contrast;
    image-rendering:crisp-edges;
    image-rendering:pixelated}

  /* ---- overlays ---- */
  .ov{position:fixed;inset:0;display:flex;flex-direction:column;align-items:center;
    justify-content:center;text-align:center;padding:24px;
    background:
      linear-gradient(135deg,transparent 48%,rgba(168,36,58,.08) 49%,transparent 50%),
      radial-gradient(120% 90% at 50% 30%, rgba(23,16,34,.92), rgba(11,10,18,.97));
    z-index:10;transition:opacity .35s}
  .ov.hidden{opacity:0;pointer-events:none}
  #ovClear>.result-particles{position:absolute;inset:0;overflow:hidden;z-index:0;pointer-events:none}
  #ovClear>:not(.result-particles){position:relative;z-index:1}
  .result-particle{position:absolute;image-rendering:pixelated;animation:result-particle-float 5s ease-out forwards}
  @keyframes result-particle-float{
    0%{opacity:1;transform:translate(0,0)}
    70%{opacity:.8}
    100%{opacity:0;transform:translate(var(--float-x),var(--float-y))}
  }
  #ovResult{transition:opacity .8s}
  #ovResult.black-result{background:#000}
  .eyebrow{letter-spacing:.4em;font-size:12px;font-weight:900;color:var(--crimson);margin-bottom:10px}
  h1{font-family:"Noto Serif JP","Hiragino Mincho ProN","Yu Mincho",serif;font-weight:600;
    font-size:46px;letter-spacing:.18em;color:var(--steel);line-height:1.2;
    text-shadow:0 0 24px rgba(168,36,58,.45)}
  .title-logo{display:block;width:min(72vw,280px);height:auto;
    image-rendering:smooth;
    filter:drop-shadow(0 0 18px rgba(168,36,58,.45))}
  .sub{font-size:12px;color:#fff;letter-spacing:.25em;margin-top:8px}
  .howto{margin:26px 0 6px;font-size:13px;line-height:2;color:var(--mist)}
  .howto b{color:var(--steel)}
  .howto .just{color:var(--gold)}
  .btn{display:inline-block;width:230px;margin-top:14px;padding:13px 38px;font-size:15px;
    letter-spacing:.35em;text-indent:.35em;color:var(--steel);background:transparent;
    border:1px solid var(--crimson);cursor:pointer;text-align:center;
    font-family:"Noto Serif JP","Hiragino Mincho ProN","Yu Mincho",serif}
  .btn:active{background:rgba(168,36,58,.25)}
  .btn.primary{background:linear-gradient(180deg, rgba(168,36,58,.35), rgba(168,36,58,.12));
    box-shadow:0 0 18px rgba(168,36,58,.35)}
  #btnStart{font-size:20px;font-weight:700}
  #btnRecords{padding-left:24px;padding-right:24px;white-space:nowrap}
  .links{margin-top:26px;display:flex;flex-direction:column;gap:10px;font-size:12px}
  .links a{color:var(--mist);text-decoration:none;border-bottom:1px dotted var(--violet);padding-bottom:2px}
  .links a:active{color:var(--steel)}
  .queenline{font-family:"Noto Serif JP","Hiragino Mincho ProN","Yu Mincho",serif;font-size:15px;
    color:var(--blood);letter-spacing:.12em;line-height:2;margin:6px 0 18px;min-height:2em}
  #clearLine{color:var(--steel)}
  .congrats-band{display:none;width:min(86vw,390px);margin:0 0 10px;padding:7px 14px;
    background:#fff;color:#0b0a12;font-size:13px;font-weight:800;letter-spacing:.18em;
    line-height:1;text-align:center}
  .congrats-band.show{display:block}
  .score-wrap{position:relative;display:grid;place-items:center;min-width:min(86vw,390px);
    min-height:124px;margin-top:2px;isolation:isolate}
  .result-emblem-bg{position:absolute;left:50%;top:calc(50% + 50px);width:160px;height:160px;
    object-fit:contain;image-rendering:pixelated;image-rendering:crisp-edges;
    transform:translate(-50%,-50%);filter:brightness(100%);
    opacity:.4;z-index:0;pointer-events:none}
  .bignum{position:relative;font-family:"Noto Serif JP","Hiragino Mincho ProN","Yu Mincho",serif;font-size:54px;
    color:var(--steel);letter-spacing:.06em;text-shadow:0 0 14px rgba(232,238,255,.28),0 0 22px rgba(168,36,58,.22);z-index:1}
  .label{position:relative;font-size:10px;letter-spacing:.45em;color:#fff;margin-top:4px;
    text-shadow:0 0 10px rgba(232,238,255,.22),0 0 16px rgba(168,36,58,.18);z-index:1}
  .resgrid{position:relative;z-index:2;display:flex;gap:34px;margin:14px 0 4px}
  .resgrid .v{font-size:26px;font-family:"Noto Serif JP","Hiragino Mincho ProN",serif;color:var(--steel);
    text-shadow:0 0 12px rgba(232,238,255,.26),0 0 18px rgba(168,36,58,.2)}
  .resgrid .k{font-size:10px;letter-spacing:.3em;color:#fff;margin-top:2px;
    text-shadow:0 0 10px rgba(232,238,255,.2),0 0 14px rgba(168,36,58,.16)}
  .gold{color:var(--gold)!important}
  #soundControls{position:fixed;left:var(--game-control-x,12px);top:var(--game-control-y,90px);
    z-index:20;display:flex;flex-direction:column;gap:8px}
  #soundControls button{width:44px;height:44px;border:1px solid var(--violet);
    background:rgba(11,10,18,.68);color:var(--mist);font-size:11px;font-weight:800;
    letter-spacing:.04em;cursor:pointer;border-radius:22px}
  #soundControls button.off{position:relative;color:#5a5468;border-color:#2b203c;background:rgba(11,10,18,.46)}
  #soundControls button.off::after{content:"";position:absolute;left:7px;right:7px;top:50%;
    height:2px;background:var(--blood);transform:rotate(-28deg);transform-origin:center;
    box-shadow:0 0 6px rgba(212,54,90,.65);pointer-events:none}
  .vline{width:1px;height:46px;background:linear-gradient(180deg,transparent,var(--crimson),transparent);margin:18px 0 4px}
  .footer{position:absolute;bottom:max(14px,env(safe-area-inset-bottom));font-size:10px;
    color:var(--mist);letter-spacing:.15em}
  .savebox{width:min(92vw,390px);margin:12px 0 2px;padding:12px 14px;
    border:1px solid rgba(61,42,85,.9);background:rgba(11,10,18,.48)}
  .result-title{font-size:19px;color:var(--gold);letter-spacing:.14em;margin-bottom:8px;
    text-shadow:0 0 14px rgba(255,215,106,.22)}
  .title-emblem{width:30px;height:30px;object-fit:contain;flex:0 0 auto;
    filter:drop-shadow(0 0 8px rgba(255,215,106,.22))}
  .name-label{display:block;font-size:10px;letter-spacing:.32em;color:var(--mist);margin-bottom:7px}
  .save-row{display:grid;grid-template-columns:1fr auto;gap:8px;align-items:center}
  .name-input{width:100%;height:42px;border:1px solid var(--violet);background:rgba(0,0,0,.34);
    color:var(--steel);font-size:16px;text-align:center;font-family:"Noto Serif JP","Hiragino Mincho ProN","Yu Mincho",serif}
  .name-input::placeholder{color:#5a5468}
  .save-btn{width:auto;height:42px;margin-top:0;padding:0 18px;font-size:13px;letter-spacing:.18em;text-indent:.18em}
  .save-note{min-height:18px;margin-top:7px;font-size:11px;color:var(--mist);line-height:1.6}
  .save-note.ok{color:var(--gold)}
  .save-note.err{color:var(--blood)}
  .record-heading{display:flex;align-items:center;justify-content:center;gap:12px;
    width:230px;font-size:19px;color:var(--crimson)}
  .record-heading::before,.record-heading::after{content:"";height:1px;flex:1;background:currentColor}
  .record-tabs{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:2px 0 14px}
  .record-tab{height:36px;padding:0 14px;border:1px solid var(--violet);
    background:rgba(11,10,18,.45);color:var(--mist);font-family:"Noto Serif JP","Hiragino Mincho ProN","Yu Mincho",serif;
    letter-spacing:.08em;cursor:pointer}
  .record-tab.active{border-color:var(--crimson);color:var(--steel);
    background:rgba(168,36,58,.22)}
  .record-list{width:min(94vw,480px);max-height:min(62vh,520px);overflow:auto;
    touch-action:pan-y;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;
    border-top:1px solid rgba(61,42,85,.8);border-bottom:1px solid rgba(61,42,85,.8)}
  .record-row{display:grid;grid-template-columns:28px minmax(0,1fr) 96px 52px;
    gap:10px;align-items:center;min-height:58px;padding:7px 8px;
    border-bottom:1px solid rgba(61,42,85,.45);text-align:left}
  .record-row:last-child{border-bottom:0}
  .record-rank{font-family:"Noto Serif JP","Hiragino Mincho ProN","Yu Mincho",serif;color:var(--gold);font-size:20px;text-align:center}
  .record-main{min-width:0;display:grid;grid-template-columns:minmax(0,7.8em) auto;grid-template-rows:auto auto;
    column-gap:18px;align-items:center}
  .record-name{display:contents;font-size:16px;color:var(--steel);white-space:nowrap}
  .record-player,.record-title{min-width:0;overflow:hidden;text-overflow:ellipsis}
  .record-player{grid-column:1;grid-row:1}
  .record-title{text-align:left;font-size:.86em}
  .record-title-wrap{grid-column:2;grid-row:1 / span 2;align-self:center;min-width:0;display:flex;align-items:center;gap:6px;overflow:hidden}
  .record-title-emblem{display:block;width:36px;height:36px;object-fit:contain;image-rendering:pixelated;
    image-rendering:crisp-edges;flex:0 0 auto}
  .record-meta{grid-column:1;grid-row:2;font-size:12px;color:var(--mist);line-height:1.6;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .record-score{text-align:right}
  .record-score-value{font-family:"Noto Serif JP","Hiragino Mincho ProN","Yu Mincho",serif;color:var(--steel);font-size:23px}
  .record-score-meta{font-size:10px;color:var(--mist);line-height:1.5;white-space:nowrap}
  .record-stage{font-size:13px;color:var(--mist);text-align:right;line-height:1.5}
  .record-empty{padding:34px 12px;color:var(--mist);font-size:13px;letter-spacing:.12em}
  /* 縦持ち専用ゲームのため、スマホの横向き時は案内を表示する（デスクトップは対象外）。
     pointer-events:none で操作は遮断しない（進行中のゲームを詰ませないため案内のみ）。
     min-aspect-ratio はソフトキーボードでビューポートが縮んだ縦持ちを誤検出しないための条件 */
  .rotate-notice{display:none}
  @media (orientation:landscape) and (pointer:coarse) and (max-height:500px) and (min-aspect-ratio:3/2){
    .rotate-notice{position:fixed;inset:0;z-index:30;display:flex;align-items:center;justify-content:center;
      pointer-events:none;
      background:rgba(11,10,18,.8);color:var(--steel);font-size:17px;
      letter-spacing:.3em;text-indent:.3em;
      font-family:"Noto Serif JP","Hiragino Mincho ProN","Yu Mincho",serif}
  }
  @media (max-width:480px), (max-height:700px){
    .ov{padding:18px 16px}
    h1{font-size:clamp(34px,11vw,46px)}
    .title-logo{width:min(76vw,250px)}
    .howto{margin-top:18px;font-size:12px;line-height:1.8}
    .resgrid{gap:clamp(18px,7vw,34px)}
    .links{margin-top:18px}
    .bignum{font-size:44px}
    .savebox{padding:10px 12px;margin-top:9px}
    .record-list{width:min(94vw,620px)}
    .record-row{grid-template-columns:24px minmax(0,1fr) minmax(92px,auto) 42px;grid-template-areas:"rank main score stage";column-gap:6px;row-gap:5px;padding-left:4px;padding-right:4px}
    .record-rank{grid-area:rank;align-self:center}
    .record-main{grid-area:main;grid-template-columns:minmax(6.4em,1fr) auto;column-gap:7px}
    .record-score{grid-area:score;text-align:right;display:block;min-width:0}
    .record-stage{grid-area:stage;align-self:center}
    .record-rank{font-size:16px}
    .record-name{font-size:14px}
    .record-title-wrap{gap:4px}
    .record-title{font-size:12px}
    .record-title-emblem{width:36px;height:36px}
    .record-meta{font-size:11px}
    .record-score-value{flex:0 0 auto;font-size:18px}
    .record-score-meta{font-size:9px;line-height:1.45;min-width:0;white-space:normal}
    .record-stage{font-size:12px}
  }