* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { width: 100%; height: 100%; overflow: hidden; background: #1a1230;
  font-family: system-ui, "Segoe UI", sans-serif; color: #e8e2ff; }
#scene { position: fixed; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }

#hud { position: fixed; top: 8px; left: 8px; right: 8px; display: flex; gap: 6px; flex-wrap: wrap;
  pointer-events: none; z-index: 5; }
.chip { background: rgba(20, 14, 42, 0.78); border: 1px solid rgba(139, 122, 219, 0.45);
  border-radius: 9px; padding: 5px 10px; font-size: 13px; letter-spacing: 0.3px; }
.chip b { font-size: 14px; }
.gold b { color: #ffd76e; } .red b { color: #ff7a7a; } .teal b, .teal { color: #62ecd2; }
.score b { color: #b9a8ff; }

#selinfo { position: fixed; top: 44px; left: 8px; max-width: 46ch; z-index: 5; pointer-events: none;
  font-size: 12.5px; color: #bfeaff; background: rgba(18, 12, 40, 0.72); padding: 4px 8px;
  border-radius: 8px; border: 1px solid rgba(110, 200, 255, 0.3); }
#selinfo:empty { display: none; }
#hint { position: fixed; top: 74px; left: 8px; max-width: 42ch; font-size: 12px; color: #9f92d6;
  z-index: 5; pointer-events: none; text-shadow: 0 1px 2px #000; }

#toasts { position: fixed; top: 15%; left: 0; right: 0; display: flex; flex-direction: column;
  align-items: center; gap: 6px; pointer-events: none; z-index: 8; }
.toast { background: rgba(24, 16, 52, 0.9); border: 1px solid rgba(255, 180, 60, 0.55);
  color: #ffd9a0; padding: 7px 16px; border-radius: 12px; font-size: 14px;
  transition: opacity 0.25s; box-shadow: 0 4px 18px rgba(0, 0, 0, 0.5); }
.toast.gone { opacity: 0; }

#touch { position: fixed; inset: auto 0 0 0; z-index: 6; pointer-events: none; }
#touch .tbtn { pointer-events: auto; background: rgba(30, 22, 62, 0.85); color: #e8e2ff;
  border: 1px solid rgba(139, 122, 219, 0.5); border-radius: 10px; font-size: 14px;
  padding: 9px 12px; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
#touch .tbtn:active { background: #4a3a86; }
#touch .tbtn.active { background: #23776a; border-color: #62ecd2; color: #bafff0; }
.tpad { position: absolute; left: 12px; bottom: 14px; display: grid;
  grid-template-areas: ". u ." "l . r" ". d ."; gap: 4px; }
.tpad .up { grid-area: u } .tpad .down { grid-area: d } .tpad .left { grid-area: l } .tpad .right { grid-area: r }
.trig { position: absolute; left: 14px; top: -84px; display: flex; gap: 4px; }
.tactions { position: absolute; right: 10px; bottom: 12px; display: flex; flex-direction: column;
  gap: 5px; align-items: flex-end; max-width: 46vw; }
.tw.pike { border-color: #35e0c8; } .tw.mortar { border-color: #ffb43c; } .tw.frost { border-color: #9db8ff; }
.wave { border-color: #ff8f6b; color: #ffc49a; }

#banner, #endbox { position: fixed; inset: 0; z-index: 20; display: flex; align-items: center;
  justify-content: center; background: rgba(10, 6, 24, 0.72); backdrop-filter: blur(3px); }
.panel { max-width: min(560px, 90vw); background: linear-gradient(160deg, #241a4a, #180f33);
  border: 1px solid rgba(139, 122, 219, 0.5); border-radius: 18px; padding: 26px 28px;
  text-align: center; box-shadow: 0 18px 60px rgba(0, 0, 0, 0.6); }
.panel h1 { font-size: clamp(26px, 6vw, 40px); letter-spacing: 1px;
  background: linear-gradient(90deg, #ffd76e, #62ecd2); -webkit-background-clip: text; background-clip: text; color: transparent; }
.panel h2 { font-size: 26px; } h2.won { color: #7ef2b6; } h2.lost { color: #ff7a7a; }
.tag { color: #9f92d6; margin: 6px 0 14px; font-size: 14px; }
#banner-sub p { font-size: 13.5px; line-height: 1.55; color: #cdc3f5; margin-bottom: 10px; }
#banner-sub b { color: #ffd9a0; }
#banner button, #endbox button { margin-top: 10px; font-size: 17px; padding: 12px 30px;
  border-radius: 12px; border: none; cursor: pointer; font-weight: 700;
  background: linear-gradient(90deg, #ffb43c, #ff7a4a); color: #1a0f05; }
#banner button:hover, #endbox button:hover { filter: brightness(1.15); }
#endbox p { color: #cdc3f5; margin: 10px 0 4px; }
.hidden { display: none !important; }