:root{
    --ms-red:#F25022;
    --ms-green:#7FBA00;
    --ms-blue:#00A4EF;
    --ms-yellow:#FFB900;
    --ms-purple:#B4A0FF;
    --neon-cyan:#00E5FF;
    --neon-pink:#FF3AA9;
    --neon-gold:#FFD700;
    --bg:#05070d;
    --panel:#0b1020;
    --panel-2:#141a2e;
    --stroke:rgba(255,255,255,.09);
  }
  *{box-sizing:border-box}
  html,body{margin:0;padding:0;background:#000;color:#fff;font-family:"Noto Sans JP",system-ui,sans-serif;overflow:hidden;height:100%}

  #stage{
    position:fixed;inset:0;display:grid;place-items:center;
    background:radial-gradient(ellipse at 50% 30%,#1a0a2e 0%,#000 70%);
  }
  #stage::before{
    content:"";position:absolute;inset:0;
    background:
      radial-gradient(2px 2px at 20% 30%, rgba(255,215,0,.35), transparent),
      radial-gradient(1px 1px at 70% 60%, rgba(0,229,255,.4), transparent),
      radial-gradient(1.5px 1.5px at 45% 80%, rgba(255,58,169,.35), transparent),
      radial-gradient(1px 1px at 85% 20%, rgba(127,186,0,.4), transparent);
    background-size:120px 120px, 90px 90px, 110px 110px, 100px 100px;
    animation:drift 40s linear infinite;opacity:.7;
  }
  @keyframes drift{to{background-position:120px 120px, -90px 90px, 110px -110px, -100px 100px}}

  #cabinet{
    position:relative;width:min(1200px, 96vw);height:min(94vh, 900px);
    display:grid;grid-template-columns:1fr;grid-template-rows:auto 1fr auto;
    gap:14px;
  }

  #marquee{
    position:relative;height:70px;border-radius:16px;
    background:linear-gradient(180deg,#1a0e2f 0%,#0a0518 100%);
    border:2px solid rgba(255,215,0,.35);
    box-shadow:0 0 30px rgba(255,215,0,.2), inset 0 0 20px rgba(255,215,0,.1);
    display:flex;align-items:center;justify-content:center;gap:20px;overflow:hidden;
  }
  #marquee::before,#marquee::after{
    content:"";position:absolute;top:0;bottom:0;width:14px;
    background:repeating-linear-gradient(0deg,#ffd700 0 8px,#ff3aa9 8px 16px);
    animation:blink 0.5s steps(2) infinite;
  }
  #marquee::before{left:0}#marquee::after{right:0}
  @keyframes blink{50%{filter:brightness(.4)}}
  #marquee h1{
    margin:0;font-family:"DotGothic16",monospace;font-size:34px;letter-spacing:.15em;
    background:linear-gradient(180deg,#fff 0%,#ffd700 50%,#ff3aa9 100%);
    -webkit-background-clip:text;background-clip:text;color:transparent;
    text-shadow:0 0 20px rgba(255,215,0,.5);
    display:flex;align-items:center;gap:16px;
  }
  #marquee .sub{
    font-family:"Noto Sans JP";font-weight:900;color:#fff;font-size:12px;
    letter-spacing:.3em;-webkit-text-fill-color:#fff;text-shadow:0 0 8px var(--neon-cyan);
  }

  #lcd{
    position:relative;border-radius:18px;overflow:hidden;
    background:#000;
    border:6px solid #1a1a2e;
    box-shadow:
      0 0 0 2px rgba(255,215,0,.3),
      0 0 40px rgba(0,229,255,.15),
      inset 0 0 60px rgba(0,0,0,.6);
    display:flex;flex-direction:column;
  }
  #lcd::after{
    content:"";position:absolute;inset:0;pointer-events:none;
    background:repeating-linear-gradient(0deg, rgba(255,255,255,.03) 0 2px, transparent 2px 4px);
    z-index:50;mix-blend-mode:overlay;
  }

  #reelBox{
    position:relative;flex:1;
    background:
      radial-gradient(ellipse at 50% 40%, #0d2b52 0%, #050a1a 60%, #000 100%);
    display:flex;align-items:center;justify-content:center;gap:14px;padding:24px;
    min-height:0;
  }
  #reelBox::before{
    content:"";position:absolute;inset:0;
    background:
      conic-gradient(from 0deg at 50% 50%,
        rgba(242,80,34,.08), rgba(127,186,0,.08), rgba(0,164,239,.08), rgba(255,185,0,.08), rgba(242,80,34,.08));
    filter:blur(30px);animation:rotate 20s linear infinite;
  }
  @keyframes rotate{to{transform:rotate(360deg)}}

  .reel{
    position:relative;width:120px;height:260px;border-radius:14px;
    background:linear-gradient(180deg,#0a0f1e 0%,#151b33 50%,#0a0f1e 100%);
    border:3px solid rgba(255,215,0,.5);
    box-shadow:
      0 0 20px rgba(255,215,0,.3),
      inset 0 8px 20px rgba(0,0,0,.8),
      inset 0 -8px 20px rgba(0,0,0,.8);
    overflow:hidden;
  }
  .reel::before,.reel::after{
    content:"";position:absolute;left:0;right:0;height:70px;z-index:5;pointer-events:none;
  }
  .reel::before{top:0;background:linear-gradient(180deg,#000 0%,transparent 100%)}
  .reel::after{bottom:0;background:linear-gradient(0deg,#000 0%,transparent 100%)}
  .reel-strip{
    position:absolute;left:0;right:0;top:0;
    display:flex;flex-direction:column;
    will-change:transform;
  }
  .symbol{
    height:130px;display:flex;align-items:center;justify-content:center;
    flex-shrink:0;
  }
  .symbol svg{width:80px;height:80px;filter:drop-shadow(0 4px 8px rgba(0,0,0,.6))}
  .symbol .sym-img{
    width:100px;height:100px;object-fit:contain;
    image-rendering:pixelated;image-rendering:crisp-edges;
    filter:drop-shadow(0 4px 8px rgba(0,0,0,.6));
    border-radius:8px;
  }
  .reel-center{
    position:absolute;left:-6px;right:-6px;top:50%;height:130px;
    transform:translateY(-50%);
    border-top:2px solid rgba(255,215,0,.6);
    border-bottom:2px solid rgba(255,215,0,.6);
    box-shadow:0 0 20px rgba(255,215,0,.4);
    pointer-events:none;z-index:6;
  }

  #overlay{
    position:absolute;inset:0;z-index:40;pointer-events:none;
    display:flex;align-items:center;justify-content:center;
    opacity:0;transition:opacity .3s;
  }
  #overlay.on{opacity:1}

  #stats{
    display:grid;grid-template-columns:auto 1fr auto auto auto;gap:16px;align-items:center;
    padding:10px 18px;background:linear-gradient(180deg,#0a0f1e,#050810);
    border-top:2px solid rgba(255,215,0,.3);font-family:"JetBrains Mono",monospace;
    font-size:13px;color:#9fb4d4;
  }
  #stats .k{color:#5b7099;font-size:10px;letter-spacing:.1em}
  #stats .v{color:#ffd700;font-weight:800;font-size:16px;text-shadow:0 0 8px rgba(255,215,0,.5)}
  #stats .mode{
    padding:4px 10px;border-radius:20px;font-weight:900;font-size:11px;letter-spacing:.15em;
    background:linear-gradient(90deg,#1a1a2e,#0a0f1e);border:1px solid var(--neon-cyan);color:var(--neon-cyan);
  }
  #stats .mode.rush{border-color:#ff3aa9;color:#ff3aa9;background:linear-gradient(90deg,#2a0a1e,#1a0510);
    animation:pulseNeon 1.5s ease-in-out infinite}
  @keyframes pulseNeon{50%{box-shadow:0 0 20px #ff3aa9}}

  #holds{display:flex;gap:8px;}
  .hold{
    width:26px;height:26px;border-radius:50%;
    background:radial-gradient(circle at 30% 30%, #444 0%, #1a1a1a 60%, #000 100%);
    border:2px solid rgba(255,255,255,.15);
    transition:all .3s;position:relative;
  }
  .hold.on{box-shadow:0 0 12px currentColor, inset 0 0 8px rgba(255,255,255,.4);border-color:currentColor;}
  .hold.c1{color:var(--ms-red)}.hold.c2{color:var(--ms-green)}.hold.c3{color:var(--ms-blue)}.hold.c4{color:var(--ms-yellow)}
  .hold.on.c1{background:radial-gradient(circle at 30% 30%,#ff8060,#F25022 60%,#8a1a05)}
  .hold.on.c2{background:radial-gradient(circle at 30% 30%,#c3f070,#7FBA00 60%,#3a5a00)}
  .hold.on.c3{background:radial-gradient(circle at 30% 30%,#7fdcff,#00A4EF 60%,#004a70)}
  .hold.on.c4{background:radial-gradient(circle at 30% 30%,#ffe37f,#FFB900 60%,#7a5500)}
  .hold.hot{animation:holdHot .6s ease-in-out infinite}
  @keyframes holdHot{50%{transform:scale(1.2);filter:brightness(1.5)}}

  #typing{
    position:relative;height:220px;border-radius:16px;overflow:hidden;
    background:linear-gradient(180deg,#0a0d1a 0%,#050710 100%);
    border:2px solid rgba(0,229,255,.3);
    box-shadow:0 0 30px rgba(0,229,255,.15), inset 0 0 40px rgba(0,0,0,.5);
    display:flex;flex-direction:column;
  }
  #typingHeader{
    display:flex;align-items:center;justify-content:space-between;
    padding:10px 16px;border-bottom:1px solid rgba(255,255,255,.08);
    font-family:"JetBrains Mono",monospace;font-size:11px;letter-spacing:.15em;color:#5b7099;
  }
  #typingHeader .status{color:var(--neon-cyan);font-weight:800}
  #typingHeader .miss{color:#ff5577}

  #lane{position:relative;flex:1;overflow:hidden;}
  #lane::before{
    content:"";position:absolute;left:0;top:0;bottom:0;width:180px;
    background:linear-gradient(90deg, rgba(0,229,255,.25) 0%, transparent 100%);
    z-index:2;pointer-events:none;
  }
  #lane::after{
    content:"CHARGE";position:absolute;left:12px;top:50%;transform:translateY(-50%);
    font-family:"JetBrains Mono",monospace;font-weight:800;font-size:10px;letter-spacing:.3em;
    color:rgba(0,229,255,.6);writing-mode:vertical-rl;z-index:3;pointer-events:none;
  }
  .word{
    position:absolute;top:50%;transform:translateY(-50%);
    display:flex;align-items:center;gap:2px;
    font-family:"JetBrains Mono",monospace;font-weight:800;font-size:26px;
    padding:8px 16px;border-radius:8px;
    background:rgba(20,26,46,.7);border:1px solid rgba(255,255,255,.1);
    box-shadow:0 4px 12px rgba(0,0,0,.4);
    white-space:nowrap;transition:box-shadow .2s;
  }
  .word .ch{color:#e6f1ff;transition:color .1s}
  .word .ch.done{color:var(--neon-cyan);text-shadow:0 0 8px var(--neon-cyan)}
  .word .ch.cursor{
    color:#ffd700;background:rgba(255,215,0,.15);border-radius:2px;
    animation:cursorBlink .8s steps(2) infinite;
  }
  @keyframes cursorBlink{50%{background:transparent}}
  .word.active{background:rgba(0,60,90,.7);border-color:var(--neon-cyan);box-shadow:0 0 20px rgba(0,229,255,.5);}
  .word .icon{width:22px;height:22px;margin-right:6px}
  .word.miss{animation:missShake .3s;background:rgba(90,10,30,.7);border-color:#ff5577}
  @keyframes missShake{0%,100%{transform:translateY(-50%)}25%{transform:translate(-4px,-50%)}75%{transform:translate(4px,-50%)}}

  #footer{
    display:flex;justify-content:space-between;align-items:center;
    padding:6px 16px;font-family:"JetBrains Mono",monospace;font-size:10px;color:#5b7099;
    border-top:1px solid rgba(255,255,255,.05);
  }

  .fx{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;z-index:60;pointer-events:none;}

  .save-dialog{
    width:520px;max-width:90%;background:#f0f0f0;color:#000;
    border:1px solid #666;box-shadow:0 20px 60px rgba(0,0,0,.8);
    font-family:"Noto Sans JP";animation:dialogIn .3s ease-out;
  }
  @keyframes dialogIn{from{transform:scale(.7);opacity:0}to{transform:scale(1);opacity:1}}
  .save-dialog .titlebar{
    background:linear-gradient(90deg,#0078d4,#005a9e);color:#fff;
    padding:6px 10px;display:flex;justify-content:space-between;align-items:center;
    font-size:13px;font-weight:700;
  }
  .save-dialog .titlebar .x{width:20px;height:20px;background:#e81123;display:flex;align-items:center;justify-content:center;font-size:12px}
  .save-dialog .body{padding:22px 20px;display:flex;gap:16px}
  .save-dialog .icon{width:48px;height:48px;flex-shrink:0}
  .save-dialog p{margin:0 0 6px;font-size:14px;line-height:1.5}
  .save-dialog .fname{font-weight:700;color:#0078d4}
  .save-dialog .buttons{display:flex;gap:8px;justify-content:flex-end;padding:0 20px 16px}
  .save-dialog button{padding:6px 20px;border:1px solid #999;background:#fafafa;font-size:13px;cursor:pointer;font-family:inherit;min-width:80px;}
  .save-dialog button.primary{border-color:#0078d4;background:#0078d4;color:#fff;font-weight:700}
  .save-dialog button.hot{animation:btnHot 0.4s ease-in-out infinite;box-shadow:0 0 12px #ffd700}
  @keyframes btnHot{50%{background:#ffd700;color:#000;transform:scale(1.05)}}

  .excel-loading{
    background:rgba(0,0,0,.92);width:100%;height:100%;
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;
  }
  .excel-loading .ring{width:120px;height:120px;border-radius:50%;border:8px solid rgba(127,186,0,.2);border-top-color:#7FBA00;animation:spin 0.8s linear infinite;}
  @keyframes spin{to{transform:rotate(360deg)}}
  .excel-loading .msg{font-family:"Noto Sans JP";font-weight:700;font-size:20px;color:#7FBA00;text-shadow:0 0 12px rgba(127,186,0,.6)}
  .excel-loading .sub{font-family:"JetBrains Mono";font-size:12px;color:#8fa}

  .bsod{background:#0078d4;width:100%;height:100%;color:#fff;display:flex;flex-direction:column;justify-content:center;padding:40px 60px;font-family:"Noto Sans JP";}
  .bsod .face{font-size:80px;font-weight:100;margin-bottom:20px}
  .bsod h2{font-size:24px;font-weight:400;margin:0 0 16px;line-height:1.4}
  .bsod p{font-size:13px;margin:4px 0;opacity:.95}
  .bsod .code{font-family:"JetBrains Mono";font-size:12px}

  .clippy-fx{background:rgba(0,20,40,.85);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;}
  .clippy-bubble{background:#fffbcc;color:#000;border:2px solid #000;border-radius:16px;padding:20px 28px;font-size:18px;font-weight:700;max-width:400px;text-align:center;box-shadow:0 8px 30px rgba(0,0,0,.6);position:relative;font-family:"Noto Sans JP";}
  .clippy-bubble::after{content:"";position:absolute;bottom:-20px;left:60px;border:12px solid transparent;border-top-color:#000;}
  .clippy-svg{animation:clippyBounce 0.4s ease-in-out infinite}
  @keyframes clippyBounce{50%{transform:translateY(-10px) rotate(-5deg)}}

  .copilot-fx{background:radial-gradient(circle at 50% 50%, rgba(180,160,255,.4) 0%, rgba(0,0,0,.95) 70%);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:24px;}
  .copilot-fx .halo{width:180px;height:180px;position:relative;animation:copilotFloat 2s ease-in-out infinite;}
  @keyframes copilotFloat{50%{transform:translateY(-15px) scale(1.05)}}
  .copilot-fx .halo::before{content:"";position:absolute;inset:-40px;border-radius:50%;background:conic-gradient(from 0deg, #B4A0FF, #00A4EF, #7FBA00, #FFB900, #F25022, #B4A0FF);filter:blur(30px);animation:rotate 3s linear infinite;}
  .copilot-fx h2{font-family:"DotGothic16";font-size:52px;letter-spacing:.1em;margin:0;background:linear-gradient(180deg,#fff,#B4A0FF,#00A4EF);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:0 0 30px rgba(180,160,255,.8);animation:premierText 1s ease-out;}
  @keyframes premierText{from{opacity:0;transform:scale(2);filter:blur(20px)}to{opacity:1;transform:scale(1);filter:blur(0)}}
  .copilot-fx .kakuhen{font-family:"Noto Sans JP";font-weight:900;font-size:20px;color:#ffd700;padding:8px 24px;border:2px solid #ffd700;border-radius:30px;text-shadow:0 0 12px #ffd700;box-shadow:0 0 20px rgba(255,215,0,.5);}

  .jackpot-fx{background:radial-gradient(circle at 50% 50%, rgba(255,215,0,.3), rgba(0,0,0,.95) 70%);overflow:hidden;}
  .jackpot-fx h1{font-family:"DotGothic16";font-size:80px;margin:0;letter-spacing:.05em;background:linear-gradient(180deg,#fff 0%,#ffd700 40%,#ff3aa9 100%);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:0 0 40px rgba(255,215,0,.8);animation:jackpotZoom 0.6s ease-out;text-align:center;}
  .jackpot-fx .sub{display:block;font-family:"Noto Sans JP";font-size:24px;color:#fff;-webkit-text-fill-color:#fff;margin-top:12px;letter-spacing:.2em;text-shadow:0 0 12px var(--neon-cyan);}
  @keyframes jackpotZoom{from{transform:scale(0.3) rotate(-10deg);opacity:0}to{transform:scale(1) rotate(0);opacity:1}}
  .confetti{position:absolute;width:12px;height:12px;top:-20px;animation:fall linear forwards}
  @keyframes fall{to{transform:translateY(120vh) rotate(720deg)}}

  .reach-banner{
    position:absolute;top:20px;left:50%;transform:translateX(-50%);
    padding:6px 18px;border-radius:20px;
    font-family:"DotGothic16";font-size:22px;letter-spacing:.15em;
    background:linear-gradient(90deg,#ff3aa9,#ffd700);
    color:#000;font-weight:900;
    box-shadow:0 0 30px rgba(255,215,0,.6);
    z-index:20;animation:reachIn .4s ease-out, reachPulse 1s ease-in-out infinite;
  }
  @keyframes reachIn{from{transform:translate(-50%,-40px);opacity:0}to{transform:translate(-50%,0);opacity:1}}
  @keyframes reachPulse{50%{transform:translateX(-50%) scale(1.08)}}

  #focusInput{position:absolute;opacity:0;pointer-events:none;top:-100px;left:-100px}

  #mascot{
    position:fixed;right:20px;bottom:20px;width:120px;height:120px;
    z-index:80;pointer-events:none;
    image-rendering:pixelated;image-rendering:crisp-edges;
    filter:drop-shadow(0 6px 12px rgba(0,0,0,.5));
    transition:transform .3s ease-out, right .5s, bottom .5s, left .5s, top .5s;
  }
  #mascot img{width:100%;height:100%;object-fit:contain;image-rendering:pixelated;image-rendering:crisp-edges;border-radius:12px;background:transparent;}
  #mascot.idle{animation:mascotBob 2s ease-in-out infinite}
  @keyframes mascotBob{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-12px) rotate(2deg)}}
  #mascot.excited{animation:mascotExcited .3s ease-in-out infinite}
  @keyframes mascotExcited{0%,100%{transform:translateY(0) rotate(-6deg) scale(1)}50%{transform:translateY(-20px) rotate(6deg) scale(1.1)}}
  #mascot .speech{
    position:absolute;bottom:100%;right:0;margin-bottom:6px;
    background:#fffbcc;color:#000;border:2px solid #000;border-radius:12px;
    padding:6px 12px;font:700 12px "Noto Sans JP";white-space:nowrap;
    box-shadow:0 4px 12px rgba(0,0,0,.4);
    opacity:0;transform:translateY(6px);transition:opacity .2s,transform .2s;
  }
  #mascot .speech::after{content:"";position:absolute;bottom:-10px;right:24px;border:6px solid transparent;border-top-color:#000;}
  #mascot.talking .speech{opacity:1;transform:translateY(0)}

  .mascot-celebrate{
    position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
    z-index:65;pointer-events:none;
    display:flex;flex-direction:column;align-items:center;gap:16px;
    animation:celebrateIn .8s cubic-bezier(.2,1.5,.4,1);
  }
  .mascot-celebrate img{
    width:280px;height:280px;object-fit:contain;
    image-rendering:pixelated;image-rendering:crisp-edges;
    border-radius:20px;
    filter:drop-shadow(0 10px 30px rgba(255,215,0,.6));
    animation:celebrateBounce .5s ease-in-out infinite;
  }
  .mascot-celebrate .msg{
    font-family:"DotGothic16";font-size:32px;letter-spacing:.1em;
    background:#fffbcc;color:#000;border:3px solid #000;border-radius:20px;
    padding:8px 24px;box-shadow:0 6px 20px rgba(0,0,0,.5);
    position:relative;
  }
  .mascot-celebrate .msg::after{content:"";position:absolute;top:-16px;left:50%;transform:translateX(-50%);border:10px solid transparent;border-bottom-color:#000;}
  @keyframes celebrateIn{0%{transform:translate(-50%,-50%) scale(0) rotate(-180deg);opacity:0}100%{transform:translate(-50%,-50%) scale(1) rotate(0);opacity:1}}
  @keyframes celebrateBounce{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-16px) rotate(3deg)}}

  .mascot-rays{position:absolute;inset:0;pointer-events:none;z-index:55;overflow:hidden;}
  .mascot-rays::before{
    content:"";position:absolute;left:50%;top:50%;
    width:200%;height:200%;
    background:conic-gradient(from 0deg,
      transparent 0deg, rgba(255,215,0,.3) 10deg, transparent 20deg,
      transparent 40deg, rgba(255,58,169,.3) 50deg, transparent 60deg,
      transparent 80deg, rgba(0,229,255,.3) 90deg, transparent 100deg,
      transparent 120deg, rgba(255,215,0,.3) 130deg, transparent 140deg,
      transparent 160deg, rgba(255,58,169,.3) 170deg, transparent 180deg,
      transparent 200deg, rgba(0,229,255,.3) 210deg, transparent 220deg,
      transparent 240deg, rgba(255,215,0,.3) 250deg, transparent 260deg,
      transparent 280deg, rgba(255,58,169,.3) 290deg, transparent 300deg,
      transparent 320deg, rgba(0,229,255,.3) 330deg, transparent 340deg,
      transparent 360deg);
    transform:translate(-50%,-50%);
    animation:raysSpin 3s linear infinite;
  }
  @keyframes raysSpin{to{transform:translate(-50%,-50%) rotate(360deg)}}

  #startScreen{
    position:absolute;inset:0;z-index:100;
    background:radial-gradient(ellipse at 50% 40%, #1a0a2e 0%, #000 70%);
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:30px;
    cursor:pointer;
  }
  #startScreen h1{
    font-family:"DotGothic16";font-size:72px;margin:0;letter-spacing:.1em;
    background:linear-gradient(180deg,#fff 0%,#ffd700 50%,#ff3aa9 100%);
    -webkit-background-clip:text;background-clip:text;color:transparent;
    text-shadow:0 0 40px rgba(255,215,0,.4);text-align:center;
  }
  #startScreen .tag{font-size:16px;letter-spacing:.3em;color:#00E5FF;font-weight:700}
  #startScreen .press{font-family:"DotGothic16";font-size:24px;color:#fff;letter-spacing:.15em;animation:blink2 1s steps(2) infinite;}
  @keyframes blink2{50%{opacity:.3}}
  #startScreen .rules{
    max-width:540px;font-family:"Noto Sans JP";font-size:13px;line-height:1.9;color:#9fb4d4;
    background:rgba(0,0,0,.4);padding:20px 30px;border-radius:12px;border:1px solid rgba(255,255,255,.1);
  }
  #startScreen .rules b{color:#ffd700}
  #startScreen .icons{display:flex;gap:14px;margin-top:8px}
  #startScreen .icons svg{width:44px;height:44px;animation:iconFloat 2s ease-in-out infinite}
  #startScreen .icons svg:nth-child(2){animation-delay:.2s}
  #startScreen .icons svg:nth-child(3){animation-delay:.4s}
  #startScreen .icons svg:nth-child(4){animation-delay:.6s}
  #startScreen .icons svg:nth-child(5){animation-delay:.8s}
  #startScreen .icons svg:nth-child(6){animation-delay:1.0s}
  @keyframes iconFloat{50%{transform:translateY(-8px)}}

  .flash{position:absolute;inset:0;background:#fff;z-index:200;pointer-events:none;opacity:0;}
  .flash.on{animation:flashAnim .3s ease-out}
  @keyframes flashAnim{0%{opacity:.9}100%{opacity:0}}

/* ===================================================================
   寿司打ロジック用 UI（コース選択 / ベルト / 会計 / 連打メーター / リザルト）
   =================================================================== */

/* --- コース選択画面 --- */
#courseScreen{
  position:absolute;inset:0;z-index:95;
  background:radial-gradient(ellipse at 50% 40%, #1a0a2e 0%, #000 70%);
  display:none;flex-direction:column;align-items:center;justify-content:center;gap:22px;
}
#courseScreen.on{display:flex}
#courseScreen h2{
  font-family:"DotGothic16";font-size:40px;margin:0;letter-spacing:.1em;
  background:linear-gradient(180deg,#fff 0%,#ffd700 50%,#ff3aa9 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  text-shadow:0 0 30px rgba(255,215,0,.4);
}
#courseScreen .lead{font-family:"Noto Sans JP";font-size:13px;color:#9fb4d4;letter-spacing:.1em}
.course-list{display:flex;gap:18px;flex-wrap:wrap;justify-content:center;max-width:940px}
.course-card{
  width:270px;padding:20px 22px;border-radius:14px;cursor:pointer;
  background:linear-gradient(180deg,#101830 0%,#080c18 100%);
  border:2px solid rgba(255,255,255,.12);
  transition:transform .2s, border-color .2s, box-shadow .2s;
  font-family:"Noto Sans JP";
}
.course-card:hover,.course-card.sel{
  transform:translateY(-6px);border-color:var(--neon-gold);
  box-shadow:0 0 26px rgba(255,215,0,.35);
}
.course-card .cname{font-weight:900;font-size:19px;color:#fff;margin-bottom:2px}
.course-card .cprice{font-family:"Bebas Neue";font-size:38px;color:var(--neon-gold);line-height:1;text-shadow:0 0 14px rgba(255,215,0,.5)}
.course-card .cmeta{font-size:11px;color:#7d92b5;line-height:1.9;margin-top:8px}
.course-card .cmeta b{color:#cfe3ff}
.course-card.easy{border-left:6px solid var(--ms-green)}
.course-card.normal{border-left:6px solid var(--ms-blue)}
.course-card.hard{border-left:6px solid var(--ms-red)}

/* 難易度セレクタ */
.diff-row{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.diff-btn{
  padding:7px 16px;border-radius:20px;cursor:pointer;
  font-family:"JetBrains Mono";font-size:11px;font-weight:700;letter-spacing:.1em;
  background:#0d1navy;background:#0d1426;color:#8fa8cc;
  border:1px solid rgba(255,255,255,.14);transition:all .2s;
}
.diff-btn:hover{color:#fff;border-color:var(--neon-cyan)}
.diff-btn.sel{background:linear-gradient(90deg,#00344d,#001f2e);color:var(--neon-cyan);border-color:var(--neon-cyan);box-shadow:0 0 14px rgba(0,229,255,.35)}
#courseScreen .go{
  font-family:"DotGothic16";font-size:20px;color:#fff;letter-spacing:.15em;
  animation:blink2 1s steps(2) infinite;margin-top:4px;
}

/* --- 会計バー（支払い / 獲得 / 損得） --- */
#kaikei{
  display:grid;grid-template-columns:repeat(5,auto) 1fr auto;gap:16px;align-items:center;
  padding:8px 18px;background:linear-gradient(180deg,#0d1426,#060a14);
  border-bottom:2px solid rgba(255,215,0,.25);
  font-family:"JetBrains Mono",monospace;font-size:12px;color:#9fb4d4;
}
#kaikei .kb{display:flex;flex-direction:column;gap:1px}
#kaikei .kk{font-size:9px;color:#5b7099;letter-spacing:.14em}
#kaikei .kv{font-family:"Bebas Neue";font-size:24px;line-height:1;letter-spacing:.03em}
#kaikei .kv.pay{color:#ff7a8a}
#kaikei .kv.eat{color:var(--neon-cyan);text-shadow:0 0 10px rgba(0,229,255,.5)}
#kaikei .kv.diff{color:#8fa8cc}
#kaikei .kv.diff.plus{color:var(--neon-gold);text-shadow:0 0 12px rgba(255,215,0,.6)}
#kaikei .kv.diff.minus{color:#ff5577;text-shadow:0 0 12px rgba(255,85,119,.5)}

/* タイマー */
#timerWrap{display:flex;align-items:center;gap:10px;min-width:230px}
#timerBar{position:relative;flex:1;height:12px;border-radius:8px;overflow:hidden;background:#0a1020;border:1px solid rgba(255,255,255,.12)}
#timerFill{position:absolute;left:0;top:0;bottom:0;width:100%;border-radius:8px;
  background:linear-gradient(90deg,var(--ms-green),var(--neon-cyan));transition:width .12s linear}
#timerFill.warn{background:linear-gradient(90deg,#FFB900,#ff7a3a)}
#timerFill.danger{background:linear-gradient(90deg,#ff3355,#ff3aa9);animation:pulseNeon .5s ease-in-out infinite}
#timerNum{font-family:"Bebas Neue";font-size:26px;color:#fff;min-width:62px;text-align:right;letter-spacing:.02em}
#timerNum.danger{color:#ff5577;text-shadow:0 0 12px rgba(255,85,119,.6)}

/* 連打（コンボ）メーター — ノーミス継続で時間延長 */
#comboWrap{display:flex;align-items:center;gap:8px;font-family:"JetBrains Mono";font-size:10px;color:#5b7099}
#comboBar{position:relative;width:150px;height:10px;border-radius:6px;overflow:hidden;background:#0a1020;border:1px solid rgba(255,255,255,.12)}
#comboFill{position:absolute;left:0;top:0;bottom:0;width:0%;border-radius:6px;
  background:linear-gradient(90deg,#B4A0FF,var(--neon-pink),var(--neon-gold));transition:width .18s ease-out}
#comboLabel{color:#B4A0FF;font-weight:800;letter-spacing:.1em}
.time-bonus-pop{
  position:absolute;left:50%;top:38%;transform:translateX(-50%);
  font-family:"DotGothic16";font-size:34px;color:var(--neon-gold);
  text-shadow:0 0 22px rgba(255,215,0,.9);pointer-events:none;z-index:70;
  animation:bonusPop 1.1s ease-out forwards;
}
@keyframes bonusPop{
  0%{opacity:0;transform:translate(-50%,10px) scale(.6)}
  25%{opacity:1;transform:translate(-50%,-6px) scale(1.15)}
  100%{opacity:0;transform:translate(-50%,-52px) scale(1)}
}

/* --- 回転ベルト（皿レーン） --- */
#belt{
  position:relative;flex:1;overflow:hidden;min-height:0;
  background:linear-gradient(180deg,#0a0d1a 0%,#050710 100%);
}
/* ベルトのテクスチャ（流れるレーン） */
#belt::before{
  content:"";position:absolute;left:0;right:0;bottom:0;height:74px;
  background:
    repeating-linear-gradient(90deg, #1b2542 0 26px, #131b33 26px 52px);
  border-top:2px solid rgba(255,215,0,.28);
  box-shadow:inset 0 6px 18px rgba(0,0,0,.7);
  animation:beltMove 2.8s linear infinite;
}
@keyframes beltMove{to{background-position:-52px 0}}
/* 左端 = 取り逃しゾーン */
#belt::after{
  content:"";position:absolute;left:0;top:0;bottom:0;width:120px;z-index:3;pointer-events:none;
  background:linear-gradient(90deg, rgba(255,51,85,.32) 0%, transparent 100%);
}

/* 皿 + ネタ */
.plate{
  position:absolute;bottom:16px;
  display:flex;flex-direction:column;align-items:center;gap:6px;
  will-change:transform;
}
.plate .neta{
  display:flex;align-items:center;gap:8px;
  padding:9px 16px;border-radius:10px;
  background:rgba(16,22,42,.92);border:1px solid rgba(255,255,255,.12);
  box-shadow:0 6px 16px rgba(0,0,0,.55);
  font-family:"JetBrains Mono",monospace;font-weight:800;font-size:22px;
  white-space:nowrap;
}
.plate .neta .ch{color:#e6f1ff;transition:color .08s}
.plate .neta .ch.done{color:var(--neon-cyan);text-shadow:0 0 8px var(--neon-cyan)}
.plate .neta .ch.cursor{
  color:#ffd700;background:rgba(255,215,0,.18);border-radius:2px;
  animation:cursorBlink .8s steps(2) infinite;
}
.plate .neta .tag{
  font-family:"Noto Sans JP";font-size:9px;font-weight:900;letter-spacing:.08em;
  padding:2px 7px;border-radius:10px;flex-shrink:0;
}
.plate .neta .tag.m365{background:rgba(0,164,239,.22);color:#7fdcff;border:1px solid rgba(0,164,239,.5)}
.plate .neta .tag.power{background:rgba(255,185,0,.2);color:#ffd98a;border:1px solid rgba(255,185,0,.5)}
.plate .neta .tag.copilot{background:rgba(180,160,255,.22);color:#d5c8ff;border:1px solid rgba(180,160,255,.55)}
/* 皿（円盤）— ティアで色が変わる */
.plate .dish{
  width:118px;height:20px;border-radius:50%;
  background:radial-gradient(ellipse at 50% 30%, #fff 0%, #cfd6e4 40%, #7d8798 100%);
  box-shadow:0 5px 12px rgba(0,0,0,.6), inset 0 -3px 6px rgba(0,0,0,.3);
  position:relative;
}
.plate .dish::after{
  content:attr(data-price);position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  font-family:"Bebas Neue";font-size:13px;color:#1a2030;letter-spacing:.02em;
}
.plate.t0 .dish{background:radial-gradient(ellipse at 50% 30%,#fff,#dfe6f0 40%,#8b95a8 100%)}
.plate.t1 .dish{background:radial-gradient(ellipse at 50% 30%,#fff8dc,#ffe9a8 40%,#b89a3f 100%)}
.plate.t2 .dish{background:radial-gradient(ellipse at 50% 30%,#e6fff0,#a8f0c8 40%,#3f8b5f 100%)}
.plate.t3 .dish{background:radial-gradient(ellipse at 50% 30%,#e6f4ff,#a8d8f0 40%,#2f6f96 100%)}
.plate.t4 .dish{
  background:radial-gradient(ellipse at 50% 30%,#ffe6f6,#ffb0e0 40%,#a02f78 100%);
  box-shadow:0 5px 16px rgba(255,58,169,.5), inset 0 -3px 6px rgba(0,0,0,.3);
}
/* アクティブ（今打つべき皿） */
.plate.active .neta{
  background:rgba(0,58,88,.95);border-color:var(--neon-cyan);
  box-shadow:0 0 22px rgba(0,229,255,.55);
}
.plate.active .dish{box-shadow:0 5px 18px rgba(0,229,255,.6), inset 0 -3px 6px rgba(0,0,0,.3)}
/* ミス時 */
.plate.miss .neta{animation:missShake .3s;background:rgba(90,10,30,.9);border-color:#ff5577}
/* 完食（取れた） */
.plate.eaten{animation:eatenFly .42s cubic-bezier(.3,-0.4,.7,1) forwards}
@keyframes eatenFly{
  0%{opacity:1;transform:translateY(0) scale(1)}
  100%{opacity:0;transform:translateY(-120px) scale(.55)}
}
/* 取り逃し（流れた） */
.plate.lost{animation:lostFade .5s ease-out forwards}
@keyframes lostFade{
  0%{opacity:1}
  100%{opacity:0;transform:translateX(-40px) rotate(-12deg)}
}
.price-pop{
  position:absolute;font-family:"Bebas Neue";font-size:30px;pointer-events:none;z-index:70;
  animation:pricePop 1s ease-out forwards;
}
.price-pop.gain{color:var(--neon-gold);text-shadow:0 0 16px rgba(255,215,0,.9)}
.price-pop.loss{color:#ff5577;text-shadow:0 0 16px rgba(255,85,119,.8)}
@keyframes pricePop{
  0%{opacity:0;transform:translateY(6px) scale(.7)}
  22%{opacity:1;transform:translateY(-8px) scale(1.12)}
  100%{opacity:0;transform:translateY(-58px) scale(1)}
}

/* --- リザルト画面 --- */
#resultScreen{
  position:absolute;inset:0;z-index:110;display:none;
  background:radial-gradient(ellipse at 50% 40%, rgba(26,10,46,.97) 0%, rgba(0,0,0,.98) 70%);
  flex-direction:column;align-items:center;justify-content:center;gap:16px;
}
#resultScreen.on{display:flex}
#resultScreen .verdict{
  font-family:"DotGothic16";font-size:64px;margin:0;letter-spacing:.08em;text-align:center;
  animation:jackpotZoom .6s ease-out;
}
#resultScreen .verdict.win{
  background:linear-gradient(180deg,#fff 0%,#ffd700 45%,#ff3aa9 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  text-shadow:0 0 40px rgba(255,215,0,.8);
}
#resultScreen .verdict.lose{
  background:linear-gradient(180deg,#fff 0%,#8fa8cc 50%,#3a4a66 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
#resultScreen .amount{font-family:"Bebas Neue";font-size:84px;line-height:.95;letter-spacing:.02em}
#resultScreen .amount.plus{color:var(--neon-gold);text-shadow:0 0 30px rgba(255,215,0,.7)}
#resultScreen .amount.minus{color:#ff5577;text-shadow:0 0 30px rgba(255,85,119,.6)}
#resultScreen .rgrid{
  display:grid;grid-template-columns:repeat(2,auto);gap:10px 34px;
  font-family:"JetBrains Mono";font-size:13px;color:#9fb4d4;
  background:rgba(0,0,0,.45);padding:20px 34px;border-radius:14px;
  border:1px solid rgba(255,255,255,.12);
}
#resultScreen .rgrid .rk{color:#5b7099;font-size:11px;letter-spacing:.1em}
#resultScreen .rgrid .rv{color:#ffd700;font-weight:800;text-align:right}
#resultScreen .rank{
  font-family:"DotGothic16";font-size:22px;letter-spacing:.12em;
  padding:6px 22px;border-radius:24px;border:2px solid var(--neon-gold);color:var(--neon-gold);
  text-shadow:0 0 12px rgba(255,215,0,.6);box-shadow:0 0 20px rgba(255,215,0,.3);
}
#resultScreen .again{
  font-family:"DotGothic16";font-size:18px;color:#fff;letter-spacing:.14em;
  animation:blink2 1s steps(2) infinite;margin-top:6px;
}
#resultScreen .cats{display:flex;gap:12px;font-family:"JetBrains Mono";font-size:11px}
#resultScreen .cats span{padding:4px 12px;border-radius:12px;border:1px solid rgba(255,255,255,.16)}
#resultScreen .cats .m365{color:#7fdcff;border-color:rgba(0,164,239,.5)}
#resultScreen .cats .power{color:#ffd98a;border-color:rgba(255,185,0,.5)}
#resultScreen .cats .copilot{color:#d5c8ff;border-color:rgba(180,160,255,.55)}

/* GAME OVER（速度重視/一発勝負での即終了） */
.ko-banner{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  font-family:"DotGothic16";font-size:52px;color:#ff5577;z-index:75;
  text-shadow:0 0 30px rgba(255,85,119,.9);pointer-events:none;
  animation:jackpotZoom .5s ease-out;
}

/* ===================================================================
   寿司打レイアウト調整（#typing → 寿司レーンパネルへ転用）
   =================================================================== */
#typing{ height:auto; min-height:0; }
#cabinet{ grid-template-rows:auto minmax(0,1fr) minmax(0,auto); }
#sushiPanel{
  position:relative;border-radius:16px;overflow:hidden;
  background:linear-gradient(180deg,#0a0d1a 0%,#050710 100%);
  border:2px solid rgba(255,215,0,.28);
  box-shadow:0 0 30px rgba(255,215,0,.12), inset 0 0 40px rgba(0,0,0,.5);
  display:flex;flex-direction:column;min-height:250px;
}
#courseLabel{
  font-family:"Noto Sans JP";font-weight:900;font-size:11px;letter-spacing:.1em;
  color:#ffd700;white-space:nowrap;
}
#sushiFooter{
  display:flex;justify-content:space-between;align-items:center;
  padding:6px 16px;font-family:"JetBrains Mono",monospace;font-size:10px;color:#5b7099;
  border-top:1px solid rgba(255,255,255,.05);
}
#sushiFooter b{color:#8fa8cc}
/* --- 寿司打では「レーン」を主役に、リール盤は上部の演出パネルへ圧縮 --- */
#cabinet{ grid-template-rows:auto minmax(140px, 0.62fr) minmax(300px, 1fr); }
#lcd{ min-height:0; }
#reelBox{ padding:12px }
.reel{ width:78px; height:150px; border-width:2px }
.symbol{ height:75px }
.symbol svg{ width:46px; height:46px }
.symbol .sym-img{ width:58px; height:58px }
/* 停止枠もシンボル高さに合わせる */
.reel-center{ height:75px }

/* レーンを広く取り、皿が見やすいように */
#sushiPanel{ min-height:300px }
#belt{ min-height:210px }
.plate{ bottom:22px }

/* 長い皿（高ティア）は文字を少し縮めてレーンに収める */
.plate.t3 .neta{font-size:19px;padding:8px 14px}
.plate.t4 .neta{font-size:17px;padding:7px 13px}
.plate.t3 .dish{width:150px}
.plate.t4 .dish{width:180px}

/* ===================================================================
   UI 刷新 v2
   1) スロットを大型化して LCD の余白を埋める
   2) 皿は「皿らしい」造形 + 上に Microsoft アイコンを載せる
   3) 打ち込む文字は皿に載せず、レーン上の大型パネルに表示
   =================================================================== */

/* ---------- 1) スロットリールを大きく ---------- */
#cabinet{ grid-template-rows:auto minmax(300px, 1.02fr) minmax(330px, 1fr); gap:12px; }
#lcd{ min-height:0 }
#reelBox{ padding:16px; gap:26px }
.reel{
  width:170px; height:290px; border-width:4px; border-radius:18px;
  box-shadow:0 0 34px rgba(255,215,0,.34),
             inset 0 12px 26px rgba(0,0,0,.85),
             inset 0 -12px 26px rgba(0,0,0,.85);
}
.reel::before,.reel::after{ height:84px }
.symbol{ height:145px }
.symbol svg{ width:104px; height:104px }
.symbol .sym-img{ width:118px; height:118px }
.reel-center{
  height:145px; left:-10px; right:-10px;
  border-top:3px solid rgba(255,215,0,.75);
  border-bottom:3px solid rgba(255,215,0,.75);
  box-shadow:0 0 26px rgba(255,215,0,.5);
}
#stats{ padding:8px 18px }

/* ---------- 3) 打ち込む文字パネル（レーン上の余白） ---------- */
#typeStage{
  position:relative;flex-shrink:0;
  display:flex;align-items:center;gap:14px;
  padding:12px 18px 10px;
  background:linear-gradient(180deg, rgba(6,12,28,.96) 0%, rgba(4,8,18,.9) 100%);
  border-bottom:1px solid rgba(255,215,0,.16);
}
#typeCard{
  position:relative;flex:1;min-width:0;
  display:flex;flex-direction:column;gap:7px;
  padding:11px 20px 13px;border-radius:14px;
  background:linear-gradient(180deg, rgba(10,26,48,.95), rgba(5,12,26,.95));
  border:2px solid rgba(0,229,255,.38);
  box-shadow:0 0 26px rgba(0,229,255,.18), inset 0 0 30px rgba(0,0,0,.5);
  transition:border-color .18s, box-shadow .18s;
}
#typeCard.empty{ border-color:rgba(255,255,255,.12); box-shadow:none }
#typeCard.miss{ animation:missShake .3s; border-color:#ff5577; box-shadow:0 0 26px rgba(255,85,119,.5) }
#typeCard.cat-copilot{ border-color:rgba(180,160,255,.6); box-shadow:0 0 30px rgba(180,160,255,.24), inset 0 0 30px rgba(0,0,0,.5) }
#typeCard.cat-power{ border-color:rgba(255,185,0,.55); box-shadow:0 0 30px rgba(255,185,0,.2), inset 0 0 30px rgba(0,0,0,.5) }

#typeMeta{ display:flex;align-items:center;gap:12px;flex-shrink:0 }
#typeMeta .tag{
  font-family:"Noto Sans JP";font-size:10px;font-weight:900;letter-spacing:.12em;
  padding:3px 11px;border-radius:12px;
  background:rgba(255,255,255,.07);color:#9fb4d4;border:1px solid rgba(255,255,255,.16);
}
#typeMeta .tag.m365{background:rgba(0,164,239,.22);color:#7fdcff;border-color:rgba(0,164,239,.55)}
#typeMeta .tag.power{background:rgba(255,185,0,.2);color:#ffd98a;border-color:rgba(255,185,0,.55)}
#typeMeta .tag.copilot{background:rgba(180,160,255,.22);color:#d5c8ff;border-color:rgba(180,160,255,.6)}
#typePrice{
  font-family:"Bebas Neue";font-size:22px;letter-spacing:.04em;
  color:var(--neon-gold);text-shadow:0 0 12px rgba(255,215,0,.55);
}

#typeWord{
  font-family:"JetBrains Mono",monospace;font-weight:800;
  line-height:1.18;white-space:normal;word-break:break-word;
  letter-spacing:.01em;
}
#typeWord.lg{ font-size:40px }
#typeWord.md{ font-size:33px }
#typeWord.sm{ font-size:27px }
#typeWord.xs{ font-size:22px }
#typeWord .wait{
  font-family:"Noto Sans JP";font-size:17px;font-weight:700;color:#43597e;letter-spacing:.06em;
}
#typeWord .ch{ color:#e6f1ff;transition:color .08s }
#typeWord .ch.done{ color:var(--neon-cyan);text-shadow:0 0 12px var(--neon-cyan) }
#typeWord .ch.cursor{
  color:#0a0f1e;background:var(--neon-gold);border-radius:3px;
  box-shadow:0 0 14px rgba(255,215,0,.85);
  animation:cursorBlink .8s steps(2) infinite;
}
#typeProgress{
  height:5px;border-radius:3px;overflow:hidden;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.08);
}
#typeProgressFill{
  height:100%;width:0%;border-radius:3px;transition:width .08s linear;
  background:linear-gradient(90deg,#00e5ff,#7FBA00,#ffd700);
  box-shadow:0 0 10px rgba(0,229,255,.7);
}

#typeNext{
  flex-shrink:0;max-width:220px;
  display:flex;flex-direction:column;gap:4px;
  padding:9px 14px;border-radius:12px;
  background:rgba(255,255,255,.035);border:1px dashed rgba(255,255,255,.14);
}
#typeNext .nk{
  font-family:"Bebas Neue";font-size:13px;letter-spacing:.22em;color:#5b7099;
}
#typeNext .nv{
  font-family:"JetBrains Mono",monospace;font-size:13px;font-weight:700;color:#7f93b5;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}

/* ---------- 2) 皿を「皿らしく」 + アイコンを乗せる ---------- */
#belt{ min-height:190px }
#belt::before{ height:86px }

.plate{ bottom:14px;gap:0 }
/* ネタ枠は不要（アイコンだけ乗せる） */
.plate .neta{
  background:none !important;border:none !important;box-shadow:none !important;
  padding:0 !important;margin:0 0 -6px;
  display:flex;align-items:flex-end;justify-content:center;
  animation:netaBob 2.4s ease-in-out infinite;
}
@keyframes netaBob{50%{transform:translateY(-3px)}}
.plate .neta-ico{
  width:58px;height:58px;
  filter:drop-shadow(0 6px 10px rgba(0,0,0,.7)) drop-shadow(0 0 12px rgba(255,255,255,.18));
}
.plate.t3 .neta-ico{ width:64px;height:64px }
.plate.t4 .neta-ico{ width:72px;height:72px }

/* 皿本体：受け皿(下) + 縁(リム) の二層で立体感を出す */
.plate .dish{
  position:relative;
  width:112px;height:34px;border-radius:50%;
  background:
    radial-gradient(ellipse at 50% 22%, #ffffff 0%, #eef2f8 28%, #ccd5e2 58%, #97a3b6 82%, #6d7889 100%);
  box-shadow:
    0 10px 18px rgba(0,0,0,.65),
    0 2px 0 rgba(255,255,255,.55) inset,
    0 -6px 12px rgba(0,0,0,.28) inset;
  display:flex;align-items:center;justify-content:center;
}
/* 皿の内側のくぼみ */
.plate .dish::before{
  content:"";position:absolute;left:14%;right:14%;top:16%;height:46%;
  border-radius:50%;
  background:radial-gradient(ellipse at 50% 20%, rgba(255,255,255,.9), rgba(255,255,255,.05) 70%);
  pointer-events:none;
}
/* 皿の縁のハイライト */
.plate .dish::after{
  content:"";position:absolute;inset:0;border-radius:50%;
  border-top:2px solid rgba(255,255,255,.75);
  border-bottom:2px solid rgba(0,0,0,.28);
  pointer-events:none;
}
.plate .dish-price{
  position:relative;z-index:2;
  font-family:"Bebas Neue";font-size:15px;letter-spacing:.03em;
  color:#26303f;text-shadow:0 1px 0 rgba(255,255,255,.7);
}
/* ティア別の皿色（寿司打の皿色分け） */
.plate.t0 .dish{background:radial-gradient(ellipse at 50% 22%,#fff,#f2f5fa 28%,#d7dee9 58%,#9ea9ba 82%,#727d8e 100%)}
.plate.t1 .dish{background:radial-gradient(ellipse at 50% 22%,#fffdf2,#fff3cf 28%,#ffe49b 58%,#c9a63f 82%,#9a7d24 100%)}
.plate.t2 .dish{background:radial-gradient(ellipse at 50% 22%,#f2fff7,#d6ffe8 28%,#9fefc4 58%,#3f9c68 82%,#256b47 100%)}
.plate.t3 .dish{background:radial-gradient(ellipse at 50% 22%,#f2f9ff,#d3ecff 28%,#9ed4f5 58%,#2f7cae 82%,#1d5378 100%)}
.plate.t4 .dish{
  width:132px;height:38px;
  background:radial-gradient(ellipse at 50% 22%,#fff2fb,#ffd6f0 28%,#ffa8e0 58%,#c23d95 82%,#8b1f68 100%);
  box-shadow:0 10px 22px rgba(255,58,169,.5), 0 2px 0 rgba(255,255,255,.5) inset, 0 -6px 12px rgba(0,0,0,.28) inset;
}
.plate.t4 .dish-price{ color:#4a0f36 }
.plate.t3 .dish{ width:122px }

/* アクティブ（今打っている皿）は光る */
.plate.active .dish{
  box-shadow:0 10px 24px rgba(0,229,255,.6), 0 0 22px rgba(0,229,255,.45),
             0 2px 0 rgba(255,255,255,.6) inset, 0 -6px 12px rgba(0,0,0,.28) inset;
}
.plate.active .neta-ico{
  filter:drop-shadow(0 6px 10px rgba(0,0,0,.7)) drop-shadow(0 0 16px rgba(0,229,255,.9));
}
.plate.miss .neta{ animation:missShake .3s }

/* ===================================================================
   UI 刷新 v2.1 — 余白つぶし / 皿の見切れ修正 / 文字サイズ最適化
   =================================================================== */

/* リールを横幅いっぱいに広げて LCD の左右余白を無くす（参考: 実機スロット） */
#reelBox{ padding:14px 18px; gap:18px; align-items:stretch }
.reel{
  flex:1 1 0; width:auto; min-width:0; max-width:none;
  height:auto; align-self:stretch;
}
/* シンボル高さはリール高の約半分にして、上下に次の絵柄が覗くようにする */
.symbol{ height:150px }
.symbol svg{ width:112px; height:112px }
.symbol .sym-img{ width:124px; height:124px }
.reel-center{ height:150px }
.reel::before,.reel::after{ height:74px }

/* レーン：皿が下端で見切れないように高さと足元を調整 */
#belt{ min-height:150px }
#belt::before{ height:70px }
.plate{ bottom:8px }
.plate .dish{ width:104px;height:30px }
.plate.t3 .dish{ width:114px }
.plate.t4 .dish{ width:124px;height:33px }
.plate .neta-ico{ width:50px;height:50px }
.plate.t3 .neta-ico{ width:55px;height:55px }
.plate.t4 .neta-ico{ width:60px;height:60px }
.plate .dish-price{ font-size:14px }

/* 文字パネル：長い語でも1〜2行で必ず収まるサイズへ */
#typeStage{ padding:10px 18px 8px }
#typeCard{ padding:9px 18px 11px }
#typeWord{ line-height:1.14 }
#typeWord.lg{ font-size:36px }
#typeWord.md{ font-size:29px }
#typeWord.sm{ font-size:24px }
#typeWord.xs{ font-size:20px }

/* 盤面全体の行配分（リール:レーン ≒ 1:0.72） */
#cabinet{ grid-template-rows:auto minmax(320px, 1fr) minmax(300px, 0.78fr); }

/* v2.2 — 文字表示エリアの高さを確保して、どの長さでも縦にはみ出さない */
#typeWord{
  min-height:88px;
  display:flex;align-items:center;flex-wrap:wrap;
  overflow:hidden;
}
#typeWord.lg{ font-size:38px }

/* v2.3 — 行配分の再調整（スロットは横幅で稼ぎ、縦はレーンに回す） */
#cabinet{ grid-template-rows:auto minmax(230px, 0.82fr) minmax(300px, 1fr); }
/* リールは横長になったので、シンボル高を抑えて上下に絵柄が覗く比率を維持 */
.symbol{ height:112px }
.symbol svg{ width:84px; height:84px }
.symbol .sym-img{ width:92px; height:92px }
.reel-center{ height:112px }
.reel::before,.reel::after{ height:56px }
#reelBox{ padding:10px 16px; gap:16px }

/* レーンの高さを確実に確保して皿を見切れさせない */
#belt{ min-height:178px }
#belt::before{ height:78px }
.plate{ bottom:12px }

/* 文字パネルはコンパクトに（レーンに縦を譲る） */
#typeWord{ min-height:64px }
#typeWord.lg{ font-size:34px }
#typeWord.md{ font-size:28px }
#typeWord.sm{ font-size:23px }
#typeWord.xs{ font-size:19px }
#typeStage{ padding:8px 18px 7px }
#typeCard{ padding:8px 18px 10px; gap:5px }

/* ===================================================================
   v2.4 — 皿の造形を作り直し（本物の寿司皿らしい立体感）
   構造: .dish = 皿の上面(楕円) / ::before = 皿の内側のくぼみ /
        ::after = 皿の側面(高台) を下に描いて厚みを出す
   =================================================================== */
.plate{ align-items:center }
.plate .dish{
  position:relative;
  width:120px;height:30px;border-radius:50%;
  /* 上面：中央が明るく、縁に向かって落ちるグラデ */
  background:
    radial-gradient(ellipse 60% 70% at 50% 34%, #ffffff 0%, #f7fafd 34%, #e2e9f2 62%, #c3ccda 84%, #aab4c4 100%);
  box-shadow:
    /* 皿の厚み（側面）を下方向の影の積み重ねで表現 */
    0 2px 0 #b9c2d0,
    0 4px 0 #a7b1c1,
    0 6px 0 #8e99ab,
    0 8px 1px #78838f,
    /* 接地影 */
    0 14px 16px rgba(0,0,0,.6),
    /* 縁の内側ハイライト */
    inset 0 2px 3px rgba(255,255,255,.95),
    inset 0 -3px 6px rgba(0,0,0,.16);
  display:flex;align-items:center;justify-content:center;
  overflow:visible;
}
/* 皿の内側のくぼみ（浅い受け面） */
.plate .dish::before{
  content:"";position:absolute;left:12%;right:12%;top:20%;bottom:22%;
  border-radius:50%;
  background:
    radial-gradient(ellipse at 50% 26%, rgba(255,255,255,.85) 0%, rgba(255,255,255,.25) 46%, rgba(150,162,180,.28) 100%);
  box-shadow:inset 0 2px 4px rgba(0,0,0,.14);
  pointer-events:none;
}
/* 前の版で「浮いた輪」に見えていた枠線を無効化 */
.plate .dish::after{
  content:"";position:absolute;inset:auto 22% -7px 22%;height:8px;
  border:none;border-radius:50%;
  background:radial-gradient(ellipse at 50% 0%, rgba(0,0,0,.42), rgba(0,0,0,0) 72%);
  pointer-events:none;
}
.plate .dish-price{
  position:relative;z-index:3;
  font-family:"Bebas Neue";font-size:14px;letter-spacing:.04em;
  color:#2a3444;text-shadow:0 1px 0 rgba(255,255,255,.85);
}

/* ティア別の皿色（上面グラデ + 側面の厚み色をセットで変える） */
.plate.t0 .dish{
  background:radial-gradient(ellipse 60% 70% at 50% 34%,#fff,#f8fafc 34%,#e6ebf2 62%,#c8d0dc 84%,#adb6c4 100%);
  box-shadow:0 2px 0 #bcc4d1,0 4px 0 #aab3c2,0 6px 0 #919bad,0 8px 1px #7b8592,
             0 14px 16px rgba(0,0,0,.6),inset 0 2px 3px rgba(255,255,255,.95),inset 0 -3px 6px rgba(0,0,0,.16);
}
.plate.t1 .dish{
  background:radial-gradient(ellipse 60% 70% at 50% 34%,#fffef5,#fff8dd 34%,#ffefb8 62%,#e3c469 84%,#c9a941 100%);
  box-shadow:0 2px 0 #d8b74e,0 4px 0 #c6a63f,0 6px 0 #a98c2f,0 8px 1px #8d7325,
             0 14px 16px rgba(0,0,0,.6),inset 0 2px 3px rgba(255,255,255,.9),inset 0 -3px 6px rgba(0,0,0,.16);
}
.plate.t2 .dish{
  background:radial-gradient(ellipse 60% 70% at 50% 34%,#f6fffa,#e2fff0 34%,#bdf7d8 62%,#6bc793 84%,#43a26d 100%);
  box-shadow:0 2px 0 #52ad78,0 4px 0 #479c6b,0 6px 0 #388058,0 8px 1px #2c6746,
             0 14px 16px rgba(0,0,0,.6),inset 0 2px 3px rgba(255,255,255,.9),inset 0 -3px 6px rgba(0,0,0,.16);
}
.plate.t3 .dish{
  width:130px;
  background:radial-gradient(ellipse 60% 70% at 50% 34%,#f6fbff,#e0f2ff 34%,#bde2f8 62%,#68a8d4 84%,#3f81b2 100%);
  box-shadow:0 2px 0 #4e8cbc,0 4px 0 #437ea9,0 6px 0 #35668a,0 8px 1px #2a5270,
             0 14px 16px rgba(0,0,0,.6),inset 0 2px 3px rgba(255,255,255,.9),inset 0 -3px 6px rgba(0,0,0,.16);
}
.plate.t4 .dish{
  width:142px;height:33px;
  background:radial-gradient(ellipse 60% 70% at 50% 34%,#fff6fc,#ffe3f5 34%,#ffc3e9 62%,#e072b6 84%,#bf4b95 100%);
  box-shadow:0 2px 0 #cf5aa2,0 4px 0 #bd4f93,0 6px 0 #9d3f7a,0 8px 1px #7f3162,
             0 14px 18px rgba(255,58,169,.45),inset 0 2px 3px rgba(255,255,255,.9),inset 0 -3px 6px rgba(0,0,0,.16);
}
.plate.t4 .dish-price{ color:#5c1543 }

/* アクティブ皿は縁が青く光る（厚みは保つ） */
.plate.active .dish{
  box-shadow:0 2px 0 #b9c2d0,0 4px 0 #a7b1c1,0 6px 0 #8e99ab,0 8px 1px #78838f,
             0 14px 22px rgba(0,229,255,.5),0 0 26px rgba(0,229,255,.4),
             inset 0 2px 3px rgba(255,255,255,.95),inset 0 -3px 6px rgba(0,0,0,.16);
}

/* ネタ（アイコン）は皿の受け面に「乗っている」ように少し沈める */
.plate .neta{ margin:0 0 -9px }
.plate .neta-ico{ width:52px;height:52px }
.plate.t3 .neta-ico{ width:57px;height:57px }
.plate.t4 .neta-ico{ width:62px;height:62px }

/* v2.5 — アイコンが皿の受け面にきちんと「乗って」見えるよう位置調整 */
.plate .neta{ margin:0 0 -4px; z-index:2 }
.plate .neta-ico{
  width:54px;height:54px;
  filter:drop-shadow(0 5px 6px rgba(0,0,0,.55)) drop-shadow(0 1px 2px rgba(0,0,0,.4));
}
.plate.t3 .neta-ico{ width:58px;height:58px }
.plate.t4 .neta-ico{ width:64px;height:64px }
/* 価格は皿の手前側に寄せて、ネタと重ならないように */
.plate .dish{ align-items:flex-end;padding-bottom:2px }
.plate .dish-price{ font-size:13px }

/* ===================================================================
   v3 — フィードバック対応
   1) リールのアイコンを約4倍に拡大
   2) リール枠の横線（reel-center の上下ボーダー）を削除
   =================================================================== */

/* ---------- 1) アイコンを大きく（84px → 300px 相当） ---------- */
/* リールの縦を稼いでシンボル1枠を大きく取る */
#cabinet{ grid-template-rows:auto minmax(330px, 1.12fr) minmax(250px, 0.82fr); }
#reelBox{ padding:8px 14px; gap:14px }

/* シンボル枠 = リールほぼ全高。上下に次の絵柄をわずかに覗かせる */
.symbol{ height:300px }
.symbol svg{ width:290px; height:290px }
.symbol .sym-img{ width:290px; height:290px }
.reel-center{ height:300px }
/* 上下の黒フェードは絵柄を隠しすぎないよう控えめに */
.reel::before,.reel::after{ height:34px }

/* ---------- 2) 横線を2本とも消す ---------- */
.reel-center{
  border-top:none !important;
  border-bottom:none !important;
  box-shadow:none !important;
  left:0; right:0;
}

/* レーンは行配分の変更に合わせて再調整 */
#belt{ min-height:150px }
#belt::before{ height:66px }
.plate{ bottom:10px }

/* 文字パネルはコンパクトに（リールに縦を譲る） */
#typeStage{ padding:7px 18px 6px }
#typeCard{ padding:7px 18px 9px }
#typeWord{ min-height:56px }
#typeWord.lg{ font-size:32px }
#typeWord.md{ font-size:27px }
#typeWord.sm{ font-size:22px }
#typeWord.xs{ font-size:18px }

/* v3.1 — アイコンをきっちり4倍（84px → 336px）に */
#cabinet{ grid-template-rows:auto minmax(400px, 1.34fr) minmax(236px, 0.7fr); gap:10px; }
#reelBox{ padding:6px 14px }
.symbol{ height:346px }
.symbol svg{ width:336px; height:336px }
.symbol .sym-img{ width:336px; height:336px }
.reel-center{ height:346px }
.reel::before,.reel::after{ height:26px }
/* 文字パネル・レーンを詰めてリールに縦を回す */
#typeStage{ padding:6px 18px 5px; gap:12px }
#typeCard{ padding:6px 16px 8px; gap:3px }
#typeWord{ min-height:48px }
#typeWord.lg{ font-size:30px }
#typeWord.md{ font-size:26px }
#typeWord.sm{ font-size:21px }
#typeWord.xs{ font-size:18px }
#belt{ min-height:142px }
#belt::before{ height:62px }
.plate{ bottom:8px }

/* v3.2 — 画面高に追従させて筐体がはみ出さないようにする
   （アイコンは最大336px = 従来84pxの4倍。画面が低い場合のみ縮む） */
#cabinet{ grid-template-rows:auto minmax(0, 1.34fr) minmax(0, 0.7fr); }
#lcd{ min-height:0; overflow:hidden }
#sushiPanel{ min-height:0 }
#reelBox{ min-height:0 }

/* シンボル枠とアイコンを vh 連動に（上限は4倍の336px） */
.symbol{ height:min(346px, 40vh) }
.symbol svg,
.symbol .sym-img{ width:min(336px, 39vh); height:min(336px, 39vh) }
.reel-center{ height:min(346px, 40vh) }

/* レーンと文字パネルは縮む余地を持たせる */
#belt{ min-height:0; height:auto; flex:1 1 auto }
#typeStage{ flex:0 0 auto }

/* v3.3 — レーンは可変のまま、皿を小さくして見切れを防ぐ */
#belt{ min-height:0 }
.plate{ bottom:6px }
.plate .dish{ width:96px; height:26px }
.plate.t3 .dish{ width:104px }
.plate.t4 .dish{ width:112px; height:28px }
.plate .neta-ico{ width:42px; height:42px }
.plate.t3 .neta-ico{ width:45px; height:45px }
.plate.t4 .neta-ico{ width:49px; height:49px }
.plate .dish-price{ font-size:11px }
.plate .neta{ margin:0 0 -3px }
#belt::before{ height:52px }

/* v3.4 — レーンに皿1枚分の高さを確実に確保する行配分
   （リールは横幅で迫力を稼ぐ。アイコン上限は336px = 従来の4倍のまま） */
#cabinet{ grid-template-rows:auto minmax(0, 1.1fr) minmax(0, 0.9fr); }
#belt{ min-height:min(104px, 12.5vh) }
.plate{ bottom:5px }

/* v3.5 — 単語内の半角スペースを必ず見えるようにする
   （flex アイテム化したスペースが幅0に潰れ、キャメルケースに見えて
     入力が止まる不具合の修正） */
#typeWord .ch.sp{
  position:relative;
  min-width:.62em;              /* 必ず幅を持たせる */
  white-space:pre;
}
/* スペースであることが分かる区切り線 */
#typeWord .ch.sp::after{
  content:"";position:absolute;
  left:12%;right:12%;bottom:.16em;height:3px;border-radius:2px;
  background:rgba(255,255,255,.3);
}
/* 入力済みのスペースはシアン、次に打つスペースはゴールドで強調 */
#typeWord .ch.sp.done::after{ background:var(--neon-cyan);box-shadow:0 0 8px var(--neon-cyan) }
#typeWord .ch.sp.cursor{ background:var(--neon-gold);border-radius:3px }
#typeWord .ch.sp.cursor::after{ background:#0a0f1e;box-shadow:none }

/* v3.6 — 先頭/末尾の文字が切れる不具合の修正
   #typeWord は overflow:hidden かつ先頭文字が左端0pxに密着していたため、
   太字グリフのはみ出しやカーソルのゴールド枠が左右で切り落とされていた
   （ユーザー報告の「Scheduled Flow の S が切れて cheduledFlow に見える」） */
#typeWord{
  padding:2px 10px;              /* 左右に逃げを作る */
  box-sizing:border-box;
  align-content:center;
}
#typeWord .ch{
  padding:0 .03em;               /* カーソル枠が glyph に食い込まないように */
  box-sizing:content-box;
}
#typeWord .ch.cursor{
  padding:0 .06em;               /* ハイライトを少し広げて視認性UP */
  margin:0 -.03em;
}