:root {
    color-scheme:light;
    --ink:#1d2939;--muted:#7b8794;--edge:#e6e9ee;--bg:#f7f8fa;--white:#fff;
    --blue:#2785e8;--red:#ef4865;--yellow:#e7ac20;--active:#253f75;
  }
  * { box-sizing:border-box; }
  html { min-height:100%; }
  body { margin:0;min-height:100vh;background:var(--bg);font-family:-apple-system,BlinkMacSystemFont,"Hiragino Kaku Gothic ProN","Hiragino Sans","Yu Gothic",Meiryo,sans-serif;color:var(--ink);-webkit-tap-highlight-color:transparent; }
  button { font:inherit;cursor:pointer;touch-action:manipulation; }
  button:focus-visible { outline:3px solid #7baef6;outline-offset:3px; }
  button:disabled { cursor:default; }
  ruby { ruby-align:center; }
  ruby rt { font-size:.5em; font-weight:700; line-height:1; color:inherit; }

  [hidden] { display:none!important; }
  .app { width:min(100% - 40px,740px);margin:0 auto;padding:26px 0 32px; }
  .top { display:flex;align-items:center;justify-content:space-between;gap:14px;min-height:42px; }
  .logo { margin:0;font-size:21px;font-weight:850;letter-spacing:-.04em;white-space:nowrap; }
  .top-right { display:flex;align-items:center;gap:18px; }
  .goal { display:flex;align-items:center;gap:7px;min-width:102px;justify-content:flex-end;white-space:nowrap; }
  .goal small {color:var(--muted);font-size:11px;font-weight:700;}
  .goal strong {font-size:17px;letter-spacing:.025em;color:#a5adb7;transition:color .15s;}
  .goal[data-goal="win"] strong {color:var(--blue);}
  .goal[data-goal="tie"] strong {color:#b7870c;}
  .goal[data-goal="lose"] strong {color:var(--red);}
  .sound { width:35px;height:35px;display:grid;place-items:center;border:1px solid var(--edge);background:var(--white);border-radius:11px;font-size:18px;color:var(--ink); }
  .mode {display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:25px 0 19px;}
  .mode button { height:43px;border:1px solid var(--edge);border-radius:10px;background:#fff;color:#566273;font-size:13px;font-weight:750;transition:border-color .15s,background .15s,color .15s; }
  .mode button[aria-pressed="true"] {background:var(--active);border-color:var(--active);color:white;}
  .mode button:disabled { opacity:.8; }
  .hud { display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px;padding:0 4px 15px; }
  .stat {display:flex;align-items:baseline;gap:8px;min-width:0;}
  .stat .label {font-size:11px;letter-spacing:.05em;color:var(--muted);font-weight:800;}
  .stat .value {font-size:25px;font-variant-numeric:tabular-nums;font-weight:800;letter-spacing:-.04em;}
  .timer {display:flex;align-items:baseline;gap:5px;}
  .timer .value {font-size:29px;}
  .timer .unit {color:var(--muted);font-size:12px;}
  .misses {justify-content:flex-end;}
  .misses .value {font-size:23px;}
  .misses .value i {font-style:normal;color:var(--muted);font-size:15px;}
  .time-track {width:100%;height:4px;border-radius:8px;background:#e8edf2;overflow:hidden;margin-bottom:12px;}
  .time-fill {height:100%;background:#7295cc;width:100%;transition:width .1s linear;}
  .time-fill.urgent {background:var(--red);}
  .stage {min-height:350px;border:1px solid var(--edge);border-radius:17px;background:var(--white);display:flex;flex-direction:column;align-items:center;position:relative;overflow:hidden;padding:19px 18px 21px;}
  .stage-head {display:flex;justify-content:space-between;align-items:center;align-self:stretch;font-size:11px;font-weight:800;letter-spacing:.08em;color:#9aa4b2;}
  .stage-body {flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;padding-top:6px;}
  .cpu-image { width:155px;height:155px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:#f4f6f8;transition:background .15s; }
  .cpu-image[data-goal="win"] {background:#ecf5ff;}
  .cpu-image[data-goal="tie"] {background:#fff8e7;}
  .cpu-image[data-goal="lose"] {background:#fff0f3;}
  .cpu-emoji {display:block;font-size:100px;line-height:1.22;user-select:none;transform:translateY(-1px);transition:filter .14s;}
  .cpu-emoji.wait {font-family:inherit;color:#b4beca;font-weight:300;font-size:88px;filter:none!important;}
  /* Emoji画像の不透明部分を単色化し、CPUの手そのものを色分けする。 */
  .cpu-image[data-goal="win"] .cpu-emoji {filter:brightness(0) saturate(100%) invert(43%) sepia(90%) saturate(1363%) hue-rotate(185deg) brightness(97%) contrast(89%);}
  .cpu-image[data-goal="tie"] .cpu-emoji {filter:brightness(0) saturate(100%) invert(76%) sepia(62%) saturate(1477%) hue-rotate(349deg) brightness(96%) contrast(88%);}
  .cpu-image[data-goal="lose"] .cpu-emoji {filter:brightness(0) saturate(100%) invert(37%) sepia(84%) saturate(2793%) hue-rotate(324deg) brightness(98%) contrast(92%);}
  .cpu-name {margin-top:12px;font-size:13px;font-weight:700;color:var(--muted);min-height:18px;}
  .command {margin-top:7px;font-size:28px;font-weight:900;letter-spacing:.02em;line-height:1.4;}
  .command[data-goal="win"] {color:var(--blue);}
  .command[data-goal="tie"] {color:#b7870c;}
  .command[data-goal="lose"] {color:var(--red);}
  .status {min-height:21px;margin-top:13px;color:var(--muted);font-size:12px;font-weight:650;text-align:center;}
  .status.good {color:#15946d;}
  .status.bad {color:var(--red);}
  .results {flex:1;width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:9px;}
  .result-label {color:var(--muted);font-size:12px;font-weight:750;}
  .results h2 {font-size:24px;margin:0;font-weight:850;}
  .big-score {font-size:48px;font-weight:850;letter-spacing:-.04em;font-variant-numeric:tabular-nums;line-height:1.2;}
  .results .meta {font-size:12px;line-height:1.8;color:var(--muted);}
  .results .best {font-size:12px;color:var(--blue);font-weight:750;}
  .replay {background:var(--active);color:#fff;border:0;padding:12px 25px;border-radius:10px;font-size:14px;font-weight:800;margin-top:8px;}
  .choose-caption {margin:19px 1px 11px;font-size:12px;font-weight:800;color:var(--muted);}
  .choices {display:grid;grid-template-columns:repeat(3,1fr);gap:12px;}
  .hand {position:relative;min-height:108px;border:1px solid var(--edge);border-radius:13px;background:#fff;color:var(--ink);display:flex;align-items:center;justify-content:center;flex-direction:column;gap:3px;user-select:none;transition:background .1s,border-color .1s,transform .1s;}
  .hand:not(:disabled):hover {border-color:#9ba9b9;background:#fafbfc;}
  .hand:not(:disabled):active {background:#eef3fa;transform:scale(.98);}
  .hand:disabled {opacity:.63;}
  .hand .emoji {font-size:43px;line-height:1.25;}
  .hand .name {font-size:14px;font-weight:800;}
  .hand.wrong {border-color:var(--red);animation:shake .2s ease;}
  .start {width:100%;height:51px;margin-top:16px;background:var(--active);color:#fff;border:0;border-radius:12px;font-size:15px;font-weight:800;letter-spacing:.02em;}
  .reset {display:inline-block;background:transparent;border:0;padding:12px 3px;color:var(--muted);font-size:12px;font-weight:650;}
  .bottom {display:flex;justify-content:space-between;align-items:center;gap:15px;}
  .bottom-note {font-size:11px;color:#9aa4ae;text-align:right;}
  .legend {display:flex;justify-content:center;gap:15px;flex-wrap:wrap;font-size:11px;color:var(--muted);margin-top:6px;}
  .legend span {display:flex;align-items:center;gap:5px;}
  .dot {width:8px;height:8px;display:inline-block;border-radius:50%;}
  .legend .blue {background:var(--blue);}.legend .yellow {background:var(--yellow);}.legend .red {background:var(--red);}
  @keyframes shake {25%,75%{transform:translateX(-4px)}50%{transform:translateX(4px)}}
  @media(max-width:500px){
    .app {width:calc(100% - 28px);padding-top:14px;padding-bottom:16px;}
    .logo {font-size:18px;}.top-right {gap:9px;}.goal {min-width:83px;gap:5px;}.goal strong {font-size:15px;}.goal small {font-size:10px;}
    .mode {gap:6px;margin:21px 0 18px;}.mode button {font-size:12px;height:41px;}
    .hud {gap:4px;}.stat {gap:5px;flex-wrap:wrap;}.stat .label{font-size:10px;}.stat .value{font-size:23px;}.timer .value{font-size:28px;}
    .stage {min-height:321px;padding:14px 14px 18px;}.cpu-image {width:146px;height:146px;}.cpu-emoji {font-size:94px;}.cpu-emoji.wait {font-size:84px;}.command {font-size:26px;}
    .choose-caption {margin-top:16px;}.choices {gap:8px;}.hand {min-height:101px;border-radius:11px;}.hand .emoji{font-size:40px;}.hand .name{font-size:13px;}.bottom-note{font-size:10px;}
  }
  @media(max-width:350px){.logo{font-size:16px}.stat{gap:3px}.stat .value{font-size:21px}.cpu-image{height:130px;width:130px}.stage{min-height:304px}.hand .emoji{font-size:34px}.hand{min-height:92px}}
  @media(prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important}}