:root{
    --bg:#fafafa;
    --panel:#ffffff;
    --ink:#222222;
    --muted:#777777;
    --border:#dddddd;
    --accent:#3a5ba0;
    --accent-soft:#e8edf7;
    --ok:#2e8b57;
    --ng:#c0392b;
    --die-black:#222222;
    --die-white:#ffffff;
    --die-white-border:#999999;
  }
  *{box-sizing:border-box;}
  body{
    margin:0;
    font-family:"Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;
    background:var(--bg);
    color:var(--ink);
    padding:16px;
    max-width:520px;
    margin:0 auto;
  }
  h1{font-size:1.15rem;margin:8px 0 4px;}
  .sub{color:var(--muted);font-size:0.85rem;margin-top:10px;margin-bottom:16px;}
  .panel{
    background:var(--panel);
    border:1px solid var(--border);
    border-radius:10px;
    padding:16px;
    margin-bottom:14px;
  }
  .rules{
    font-size:0.85rem;
    line-height:1.6;
    color:#444;
  }
  .rules summary{cursor:pointer;font-weight:bold;color:var(--accent);margin-bottom:6px;}

  .board{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    flex-wrap:wrap;
  }
  .dice-row{display:flex;gap:8px;}
  .die{
    width:46px;height:46px;
    display:flex;align-items:center;justify-content:center;
    border-radius:8px;
    font-size:1.3rem;
    font-weight:bold;
  }
  .die.black{background:var(--die-black);color:#fff;}
  .die.white{
    background:var(--die-white);
    color:var(--ink);
    border:2px solid var(--die-white-border);
  }
  .die.white.used{opacity:0.25;}
  .target{
    font-size:2.1rem;
    font-weight:bold;
    color:var(--accent);
    letter-spacing:0.05em;
  }
  .timer{font-size:0.8rem;color:var(--muted);margin-top:6px;}

  .white-buttons{
    display:flex;gap:8px;flex-wrap:wrap;margin:10px 0;
  }
  .op-buttons{
    display:flex;gap:6px;flex-wrap:wrap;margin:10px 0;
  }
  button.dieBtn{
    width:52px;height:52px;
    font-size:1.2rem;font-weight:bold;
    border-radius:8px;
    border:2px solid var(--die-white-border);
    background:#fff;
    color:var(--ink);
  }
  button.dieBtn:disabled{opacity:0.25;}
  button.opBtn{
    width:46px;height:46px;
    font-size:1.1rem;font-weight:bold;
    border-radius:8px;
    border:1px solid var(--border);
    background:var(--accent-soft);
    color:var(--accent);
  }
  button.opBtn.wide{width:auto;padding:0 14px;}

  .expr{
    font-size:1.3rem;
    min-height:44px;
    padding:8px 10px;
    border:1px solid var(--border);
    border-radius:8px;
    background:#fcfcfc;
    letter-spacing:0.03em;
    word-break:break-all;
    margin-bottom:10px;
  }

  .actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px;}
  button.mainBtn{
    flex:1;
    min-width:120px;
    padding:12px 10px;
    font-size:0.95rem;
    font-weight:bold;
    border-radius:8px;
    border:none;
    color:#fff;
    background:var(--accent);
  }
  button.mainBtn.secondary{
    background:#fff;
    color:var(--accent);
    border:1px solid var(--accent);
  }
  button.mainBtn.ghost{
    background:#fff;
    color:var(--muted);
    border:1px solid var(--border);
  }

  .msg{
    margin-top:10px;
    font-size:0.95rem;
    font-weight:bold;
    min-height:1.4em;
  }
  .msg.ok{color:var(--ok);}
  .msg.ng{color:var(--ng);}

  .answer{
    font-size:1rem;
    margin-top:8px;
    padding:8px 10px;
    background:#fff7e6;
    border:1px solid #f0d9a0;
    border-radius:8px;
    display:none;
  }

  .share{
    display:flex;gap:8px;align-items:center;flex-wrap:wrap;
    margin-top:10px;
  }
  input.shareUrl{
    flex:1;
    min-width:180px;
    padding:8px;
    font-size:0.8rem;
    border:1px solid var(--border);
    border-radius:6px;
    color:var(--muted);
  }

  .note{font-size:0.75rem;color:var(--muted);margin-top:18px;line-height:1.6;}

  .footer{
    margin-top:20px;
    padding-top:14px;
    border-top:1px solid var(--border);
    font-size:0.72rem;
    color:var(--muted);
    text-align:center;
  }
  .footer a{color:var(--muted);}

  /* ---- celebration ---- */
  .celebration{
    position:fixed;
    inset:0;
    pointer-events:none;
    overflow:hidden;
    z-index:1000;
    display:none;
  }
  .celebration.show{display:block;}
  .confetti-piece{
    position:absolute;
    top:-24px;
    width:10px;
    height:16px;
    opacity:0.95;
    animation-name:confettiFall;
    animation-timing-function:linear;
    animation-fill-mode:forwards;
    border-radius:2px;
  }
  @keyframes confettiFall{
    0%{transform:translateY(0) rotate(0deg);opacity:1;}
    100%{transform:translateY(112vh) rotate(720deg);opacity:0.85;}
  }
  .celebration-text{
    position:fixed;
    top:38%;
    left:50%;
    font-size:1.8rem;
    font-weight:bold;
    color:var(--ok);
    background:#fff;
    padding:14px 24px;
    border-radius:16px;
    border:3px solid var(--ok);
    box-shadow:0 8px 24px rgba(0,0,0,0.18);
    transform:translate(-50%,-50%) scale(0);
    animation:popIn 0.55s cubic-bezier(.34,1.56,.64,1) forwards;
    z-index:1001;
    white-space:nowrap;
  }
  @keyframes popIn{
    0%{transform:translate(-50%,-50%) scale(0);opacity:0;}
    60%{transform:translate(-50%,-50%) scale(1.18);opacity:1;}
    100%{transform:translate(-50%,-50%) scale(1);opacity:1;}
  }
  .target-celebrate{
    animation:targetPulse 0.5s ease-in-out 3;
  }
  @keyframes targetPulse{
    0%,100%{transform:scale(1);}
    50%{transform:scale(1.35);color:var(--ok);}
  }
  .target-shake{
    animation:targetShake 0.35s ease-in-out 1;
  }
  @keyframes targetShake{
    0%,100%{transform:translateX(0);}
    25%{transform:translateX(-6px);}
    75%{transform:translateX(6px);}
  }
  .celebration-text.subtle{
    font-size:1rem;
    font-weight:bold;
    padding:8px 16px;
    color:var(--ng);
    border-color:var(--ng);
    box-shadow:0 4px 12px rgba(0,0,0,0.1);
    animation:popInSubtle 0.35s ease-out forwards;
  }
  @keyframes popInSubtle{
    0%{transform:translate(-50%,-50%) scale(0.85);opacity:0;}
    100%{transform:translate(-50%,-50%) scale(1);opacity:1;}
  }
  .confetti-piece.muted{
    width:7px;
    height:11px;
    opacity:0.5;
  }

  .manualGroup{margin-bottom:14px;}
  .manualGroupLabel{font-size:0.85rem;color:var(--muted);margin-bottom:6px;}
  .manualPicker{display:flex;gap:6px;flex-wrap:wrap;}
  button.manualPickBtn{
    width:48px;height:48px;
    font-size:1.2rem;font-weight:bold;
    border-radius:8px;
    border:2px solid var(--border);
    background:#fff;
    color:var(--ink);
  }
  button.manualPickBtn.selected{
    background:var(--accent);
    color:#fff;
    border-color:var(--accent);
  }