:root{
    --stage:#1F2447;
    --stage-deep:#151833;
    --washi:#F6F0E1;
    --washi-line:#E3D9C0;
    --ink:#26221C;
    --gold:#C9A227;
    --accent:#B3402A;
    --muted:#8A8272;
    --cell-sel:#F3E2B8;
    --cell-err:#F0C4BC;
  }
  *{box-sizing:border-box;margin:0;padding:0}
  body{
    font-family:"Hiragino Kaku Gothic ProN","Yu Gothic","Meiryo",sans-serif;
    background:radial-gradient(ellipse at 50% -20%, #2C3363 0%, var(--stage) 45%, var(--stage-deep) 100%);
    color:var(--ink);
    min-height:100vh;
    padding:20px 12px 60px;
    overflow-x:hidden;
  }
  .wrap{max-width:560px;margin:0 auto}
  header{text-align:center;margin-bottom:18px}
  h1{
    font-family:"Yu Mincho","Hiragino Mincho ProN",serif;
    color:var(--washi);font-size:clamp(24px,6vw,32px);
    letter-spacing:.3em;text-indent:.3em;font-weight:600;
  }
  header p{color:#AEB2CE;font-size:12.5px;margin-top:6px;letter-spacing:.1em}

  /* タブ */
  .tabs{display:flex;gap:8px;margin-bottom:16px}
  .tab{
    flex:1;background:rgba(246,240,225,.08);border:1.5px solid rgba(246,240,225,.2);
    color:#C9CCE4;border-radius:6px;padding:10px 4px;font-size:14px;font-weight:600;
    cursor:pointer;letter-spacing:.05em;font-family:inherit;transition:all .15s;
  }
  .tab.active{background:var(--washi);color:var(--ink);border-color:var(--washi)}
  .tab:focus-visible{outline:3px solid var(--gold);outline-offset:2px}

  .card{
    background:var(--washi);border-radius:6px;padding:18px;
    box-shadow:0 6px 24px rgba(0,0,0,.35);
  }
  .toolbar{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:14px}
  .info{margin-left:auto;font-size:13px;color:var(--muted);display:flex;gap:12px}
  .info b{color:var(--ink)}
  button{
    font-family:inherit;font-size:13.5px;font-weight:600;border:none;border-radius:6px;
    padding:9px 14px;cursor:pointer;letter-spacing:.05em;transition:transform .1s, opacity .15s;
  }
  button:active{transform:scale(.97)}
  button:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
  button:disabled{opacity:.45;cursor:not-allowed}
  .btn-main{background:var(--accent);color:var(--washi)}
  .btn-gold{background:var(--gold);color:var(--ink)}
  .btn-sub{background:#EFE7D2;color:var(--ink);border:1.5px solid var(--washi-line)}
  select{
    font-family:inherit;font-size:13.5px;padding:8px 10px;border-radius:6px;
    border:1.5px solid var(--washi-line);background:#fff;color:var(--ink);
  }
  .msg{
    text-align:center;font-family:"Yu Mincho","Hiragino Mincho ProN",serif;
    font-size:17px;color:var(--accent);min-height:1.6em;margin-top:12px;letter-spacing:.1em;
  }
  .msg.win{color:var(--gold);font-size:19px;animation:pop .4s ease}
  @keyframes pop{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
  .hidden{display:none !important}

  /* 遊び方パネル */
  details.help{
    background:#EFE7D2;border:1.5px solid var(--washi-line);border-radius:6px;
    margin-bottom:14px;overflow:hidden;
  }
  details.help summary{
    cursor:pointer;padding:10px 14px;font-weight:700;font-size:14px;
    color:var(--accent);letter-spacing:.1em;list-style:none;user-select:none;
  }
  details.help summary::before{content:"▸ ";}
  details.help[open] summary::before{content:"▾ ";}
  details.help summary:focus-visible{outline:3px solid var(--gold);outline-offset:-3px}
  .help-body{padding:0 14px 14px;font-size:13.5px;line-height:1.9}
  .help-body h3{font-size:13.5px;color:var(--accent);margin:10px 0 2px;letter-spacing:.1em}
  .help-body h3:first-child{margin-top:0}
  .help-body ol{padding-left:1.5em}
  .help-body .ex{
    display:inline-block;background:#fff;border:1px solid var(--washi-line);
    border-radius:4px;padding:1px 7px;font-family:"Yu Mincho",serif;font-weight:700;
  }
  .help-body .hint-ex{background:#E0D5B8;border:1px solid #C9BC98;border-radius:4px;
    padding:1px 7px;font-family:"Yu Mincho",serif;font-weight:700}
  .help-body .err-ex{background:var(--cell-err);color:var(--accent);border-radius:4px;
    padding:1px 7px;font-family:"Yu Mincho",serif;font-weight:700}

  /* 数独の完成例ミニ盤面 */
  .mini-grid{
    display:grid;grid-template-columns:repeat(9,1fr);
    width:min(100%,300px);margin:10px auto 6px;aspect-ratio:1;
    border:2px solid var(--ink);background:var(--ink);gap:1px;
  }
  .m-cell{
    background:#fff;display:flex;align-items:center;justify-content:center;
    font-size:clamp(10px,3vw,14px);font-family:"Yu Mincho",serif;font-weight:600;
  }
  .m-cell.bR{border-right:2px solid var(--ink)}
  .m-cell.bB{border-bottom:2px solid var(--ink)}
  .m-cell.hl-row{background:#DCEBD2}
  .m-cell.hl-col{background:#D3E3F0}
  .m-cell.hl-box{background:#F3E2B8}
  .legend{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;font-size:12px;margin-bottom:4px}
  .legend span{display:flex;align-items:center;gap:5px}
  .legend i{width:13px;height:13px;border-radius:3px;display:inline-block;border:1px solid rgba(0,0,0,.15)}


  /* ---- 数独 ---- */
  #sudokuGrid{
    display:grid;grid-template-columns:repeat(9,1fr);
    width:min(100%,420px);margin:0 auto;aspect-ratio:1;
    border:3px solid var(--ink);background:var(--ink);gap:1px;
    user-select:none;
  }
  .s-cell{
    background:#fff;display:flex;align-items:center;justify-content:center;
    font-size:clamp(15px,4.5vw,22px);cursor:pointer;position:relative;
    font-family:"Yu Mincho","Hiragino Mincho ProN",serif;
  }
  .s-cell.given{background:#EFE7D2;font-weight:700}
  .s-cell.sel{background:var(--cell-sel) !important}
  .s-cell.same{background:#E8EFDA}
  .s-cell.err{background:var(--cell-err) !important;color:var(--accent)}
  .s-cell.bR{border-right:2px solid var(--ink)}
  .s-cell.bB{border-bottom:2px solid var(--ink)}
  .numpad{
    display:grid;grid-template-columns:repeat(5,1fr);gap:8px;
    width:min(100%,420px);margin:14px auto 0;
  }
  .numpad button{
    padding:12px 0;font-size:18px;background:#EFE7D2;border:1.5px solid var(--washi-line);
    color:var(--ink);font-family:"Yu Mincho",serif;font-weight:700;
  }
  .numpad button.erase{font-size:14px;font-family:inherit}

  /* ---- ライツアウト ---- */
  #lightsGrid{
    display:grid;grid-template-columns:repeat(5,1fr);gap:8px;
    width:min(100%,360px);margin:0 auto;aspect-ratio:1;
  }
  .l-cell{
    border-radius:8px;cursor:pointer;border:none;
    background:#3A3F6B;box-shadow:inset 0 2px 5px rgba(0,0,0,.35);
    transition:background .15s, box-shadow .15s;
  }
  .l-cell.on{
    background:radial-gradient(circle at 35% 30%, #F5DE8C 0%, var(--gold) 60%, #A5851E 100%);
    box-shadow:0 0 14px rgba(201,162,39,.6), inset 0 1px 0 rgba(255,255,255,.4);
  }
  .l-note{font-size:12.5px;color:var(--muted);text-align:center;margin-top:12px;line-height:1.7}

  /* ---- 15パズル ---- */
  #fifteenGrid{
    display:grid;grid-template-columns:repeat(4,1fr);gap:8px;
    width:min(100%,380px);margin:0 auto;aspect-ratio:1;
  }
  .f-tile{
    border:none;border-radius:8px;cursor:pointer;
    font-family:"Yu Mincho","Hiragino Mincho ProN",serif;
    font-size:clamp(20px,6vw,28px);font-weight:700;color:var(--washi);
    background:linear-gradient(180deg,#A34955 0%,#8E3B46 55%,#6E2B35 100%);
    box-shadow:0 3px 6px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.15);
    transition:transform .08s;
  }
  .f-tile:active{transform:scale(.96)}
  .f-tile.blank{background:transparent;box-shadow:none;cursor:default}
  .f-note{font-size:12.5px;color:var(--muted);text-align:center;margin-top:12px;line-height:1.7}

  /* 花吹雪 */
  #petals{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:50}
  .petal{
    position:absolute;top:-4vh;border-radius:60% 0 60% 0;
    animation-name:fall;animation-timing-function:linear;animation-fill-mode:forwards;
  }
  @keyframes fall{
    0%{transform:translateY(0) translateX(0) rotate(0);opacity:1}
    25%{transform:translateY(28vh) translateX(4vw) rotate(120deg)}
    50%{transform:translateY(55vh) translateX(-3vw) rotate(260deg)}
    75%{transform:translateY(80vh) translateX(3vw) rotate(380deg);opacity:1}
    100%{transform:translateY(110vh) translateX(-2vw) rotate(520deg);opacity:.6}
  }
  @media (prefers-reduced-motion:reduce){
    .petal{display:none}
    .msg.win{animation:none}
  }