:root{
    --yellow:#f7dd4a; --crimson:#ae1e24; --orange:#ee7800;
    --navy:#16294f; --green:#0f8a4c; --beige:#d1b077;
    --paper:#f4ecd6; --ink:#241d14; --soil:#6b4a2a; --soil-dark:#4a3119;
  }
  *{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
  html,body{height:100%}
  html{background:var(--paper) !important}
  body{
    font-family:'DotGothic16',sans-serif; background:var(--paper) !important; color:var(--ink);
    display:flex; flex-direction:column; align-items:center;
    touch-action:manipulation; user-select:none; -webkit-user-select:none;
    background-image:radial-gradient(rgba(107,74,42,.06) 1px, transparent 1px);
    background-size:14px 14px;
    overflow-x:hidden;
  }
  #bg-underlay{
    position:fixed; inset:0; z-index:-1; pointer-events:none;
    background:var(--paper);
    background-image:radial-gradient(rgba(107,74,42,.06) 1px, transparent 1px);
    background-size:14px 14px;
  }
  /* ---- 暖簾ヘッダー ---- */
  header{
    width:100%; background:var(--navy); color:#fff;
    padding:10px 12px 14px; text-align:center; position:relative;
    box-shadow:0 4px 0 rgba(22,41,79,.25);
  }
  header::after{
    content:""; position:absolute; left:0; right:0; bottom:-10px; height:10px;
    background:linear-gradient(-45deg, transparent 7px, var(--navy) 0) 0 0/20px 100% repeat-x;
  }
  .noren{display:flex; align-items:center; justify-content:center; gap:10px}
  .na-mark{
    width:34px; height:34px; border-radius:50%; background:#fff; color:var(--navy);
    display:flex; align-items:center; justify-content:center; font-size:20px; flex:none;
  }
  h1{font-size:clamp(20px,6vw,28px); letter-spacing:.06em; font-weight:400}
  .tagline{font-size:11px; opacity:.85; margin-top:4px; letter-spacing:.15em}

  main{width:min(440px,100%); padding:16px 12px 32px; flex:1}
  .screen{display:none}
  .screen.active{display:block}

  /* ---- 共通ボタン ---- */
  .btn{
    font-family:inherit; font-size:17px; padding:12px 20px; width:100%;
    background:var(--crimson); color:#fff; border:none; border-radius:8px;
    box-shadow:0 4px 0 #6d1216; cursor:pointer; letter-spacing:.08em;
  }
  .btn:active{transform:translateY(3px); box-shadow:0 1px 0 #6d1216}
  .btn:disabled{pointer-events:none; opacity:.45}
  .btn.sub{background:var(--navy); box-shadow:0 4px 0 #0a1530}
  .btn.sub:active{box-shadow:0 1px 0 #0a1530}
  .btn.ghost{background:transparent; color:var(--navy); box-shadow:none; border:2px solid var(--navy)}

  /* ---- タイトル ---- */
  .title-hero{text-align:center; margin:10px 0 16px}
  .title-hero img{height:170px; width:auto; filter:drop-shadow(0 4px 0 rgba(36,29,20,.12));
    animation:kSway 1.6s ease-in-out infinite; transform-origin:50% 96%}
  .rules{
    background:#fff; border:2px solid var(--ink); border-radius:10px;
    padding:12px 14px; font-size:13px; line-height:1.9; margin-bottom:14px;
  }
  .rules b{color:var(--crimson)}
  .rules .fever-word{color:var(--orange)}
  .stack{display:flex; flex-direction:column; gap:10px}

  /* ---- ゲーム ---- */
  .hud{
    display:flex; justify-content:space-between; align-items:flex-end;
    margin-bottom:10px; gap:8px;
  }
  .hud .box{background:#fff; border:2px solid var(--ink); border-radius:8px; padding:5px 10px; text-align:center; flex:1}
  .hud .label{font-size:10px; letter-spacing:.1em; color:#6a5c48}
  .hud .val{font-size:22px; line-height:1.1}
  #hud-time.hurry .val{color:var(--crimson)}
  #hud-combo .val{color:var(--orange)}

  #fever-bar{height:8px; border-radius:4px; background:#e2d6b8; margin-bottom:10px; overflow:hidden; visibility:hidden}
  #fever-bar.on{visibility:visible}
  #fever-fill{height:100%; width:100%; background:linear-gradient(90deg,var(--orange),var(--yellow)); transition:width .1s linear}

  #board{
    display:grid; grid-template-columns:repeat(3,1fr); gap:8px;
    background:linear-gradient(#7fae57,#5c8f3f 26%, var(--soil) 26%);
    border:3px solid var(--ink); border-radius:14px; padding:26px 10px 14px;
  }
  body.fever #board{box-shadow:0 0 0 4px var(--yellow), 0 0 24px rgba(238,120,0,.5)}
  .hole{position:relative; aspect-ratio:1/1.05; cursor:pointer}
  .cellimg{
    position:absolute; inset:0; width:100%; height:100%;
    object-fit:contain; object-position:center bottom;
    pointer-events:none; -webkit-user-select:none;
  }
  .cellimg.jump{animation:cellPop .15s ease-out}
  @keyframes cellPop{0%{transform:translateY(4%) scaleY(.94)}100%{transform:none}}
  @media (prefers-reduced-motion: reduce){ .cellimg{animation:none !important} }

  .pop{
    position:absolute; left:50%; top:12%; transform:translateX(-50%);
    font-size:16px; color:var(--crimson); pointer-events:none;
    animation:rise .7s ease-out forwards; white-space:nowrap; z-index:5;
    text-shadow:1px 1px 0 #fff;
  }
  .pop.good{color:var(--green)}
  .pop.fever-pop{color:var(--orange); font-size:15px}
  @keyframes rise{from{opacity:1; margin-top:0} to{opacity:0; margin-top:-30px}}

  .bubble{
    position:absolute; left:50%; bottom:96%; transform:translateX(-50%);
    background:#fff; border:2px solid var(--ink); border-radius:8px;
    padding:4px 8px; font-size:11px; white-space:nowrap; z-index:6;
    animation:fadeout 1.2s ease forwards; pointer-events:none;
  }
  .bubble::after{
    content:""; position:absolute; left:50%; bottom:-7px; transform:translateX(-50%);
    border:6px solid transparent; border-top-color:var(--ink); border-bottom:0;
  }
  @keyframes fadeout{0%,70%{opacity:1} 100%{opacity:0}}

  #countdown{
    position:fixed; inset:0; display:none; align-items:center; justify-content:center;
    font-size:80px; color:var(--navy); z-index:20; pointer-events:none;
    text-shadow:3px 3px 0 #fff;
  }

  /* ---- 結果・ランキング ---- */
  .result-card{
    background:#fff; border:3px solid var(--ink); border-radius:12px;
    padding:16px; text-align:center; margin-bottom:14px;
  }
  .result-card .big{font-size:44px; color:var(--crimson); line-height:1.2}
  .result-card .meta{font-size:12px; color:#6a5c48; margin-top:6px}
  .register-row{display:flex; gap:8px; margin-top:12px}
  .register-row input{
    flex:1; font-family:inherit; font-size:16px; padding:10px;
    border:2px solid var(--ink); border-radius:8px; min-width:0;
  }
  .register-row .btn{width:auto; padding:10px 16px; font-size:15px}
  .registered-note{font-size:12px; color:var(--green); margin-top:10px}

  .board-panel{background:#fff; border:2px solid var(--ink); border-radius:12px; overflow:hidden; margin-bottom:14px}
  .board-tabs{display:flex}
  .board-tabs button{
    flex:1; font-family:inherit; font-size:14px; padding:10px; border:none;
    background:#e8dfc6; color:#6a5c48; cursor:pointer; letter-spacing:.08em;
  }
  .board-tabs button.on{background:var(--navy); color:#fff}
  .board-list{list-style:none; padding:10px 14px; min-height:120px}
  .board-list li{
    display:flex; align-items:baseline; gap:10px; padding:6px 2px;
    border-bottom:1px dashed #d6c9a6; font-size:15px;
  }
  .board-list li:last-child{border-bottom:none}
  .board-list .rank{width:2.4em; color:#6a5c48; font-size:13px}
  .board-list li.top1 .rank{color:var(--orange)}
  .board-list .nm{flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
  .board-list .sc{font-size:17px}
  .board-list .empty{border:none; justify-content:center; color:#9a8a6c; font-size:13px; padding:24px 0}
  .board-caption{font-size:11px; color:#6a5c48; text-align:center; padding:0 0 10px}

  .footnote{font-size:10px; color:#9a8a6c; text-align:center; margin-top:8px; line-height:1.8}
  #mute-btn{
    position:fixed; right:10px; top:10px; z-index:30; width:38px; height:38px;
    border-radius:50%; border:2px solid #fff; background:rgba(255,255,255,.15);
    color:#fff; font-size:16px; cursor:pointer;
  }