:root {
  font-family: Inter, ui-rounded, system-ui, sans-serif;
  color: #fff;
  background: #100c2b;
  color-scheme: dark;
}
* {
  box-sizing: border-box;
  user-select: none;
  -webkit-user-select: none;
}
html,
body,
#app {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
}
body {
  overscroll-behavior: none;
  background: radial-gradient(circle at 50% 25%, #493387, #15113b 52%, #08071e);
}
button,
input,
select {
  font: inherit;
}
button {
  cursor: pointer;
}
canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  touch-action: pinch-zoom;
}
.scanlines {
  pointer-events: none;
  position: fixed;
  inset: 0;
  opacity: 0.08;
  background: repeating-linear-gradient(0deg, transparent 0 3px, #fff 4px);
}
.screen {
  position: fixed;
  inset: 0;
  display: none;
  place-items: center;
  padding: max(18px, env(safe-area-inset-top))
    max(22px, env(safe-area-inset-right)) max(18px, env(safe-area-inset-bottom))
    max(22px, env(safe-area-inset-left));
  z-index: 5;
  background: radial-gradient(circle at 50% 30%, #382b7eeb, #100c2bf7 65%);
  overflow: auto;
}
.screen.active {
  display: grid;
}
.hero-card,
.panel {
  width: min(880px, 94vw);
  text-align: center;
}
.hero-card h1 {
  margin: 0;
  font-size: clamp(68px, 12vh, 128px);
  line-height: 0.72;
  letter-spacing: -0.085em;
  font-weight: 1000;
  font-style: italic;
  text-shadow:
    0 12px 0 #09071b,
    0 0 60px #ab65ff55;
}
.hero-card h1 i {
  color: #ffda3d;
}
.eyebrow {
  margin: 0 0 10px;
  color: #9d91c8;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.22em;
}
.tagline {
  margin: 22px 0;
  font-weight: 850;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #ddd8ff;
}
.mode-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.mode-grid button,
.panel button,
.panel input,
.panel select {
  border: 1px solid #ffffff2b;
  border-radius: 18px;
  color: #fff;
  background: #ffffff10;
  box-shadow:
    inset 0 1px #fff2,
    0 12px 30px #07051480;
}
.mode-grid button {
  padding: 20px 14px;
  transition:
    0.15s transform,
    0.15s background;
}
.mode-grid button:hover,
.mode-grid button:focus {
  transform: translateY(-3px);
  background: #ffffff1d;
}
.mode-grid b,
.mode-grid span {
  display: block;
}
.mode-grid b {
  font-size: 22px;
}
.mode-grid span {
  margin-top: 4px;
  color: #aaa1cc;
  font-size: 12px;
}
.tiny {
  font-size: 10px;
  letter-spacing: 0.16em;
  color: #8179a3;
  margin: 20px 0 0;
}
.panel {
  position: relative;
  padding: 30px;
  border: 1px solid #ffffff26;
  border-radius: 30px;
  background: #17113ee8;
  box-shadow:
    0 28px 90px #0008,
    inset 0 1px #fff2;
  backdrop-filter: blur(18px);
}
.panel.compact {
  width: min(590px, 92vw);
}
.panel h2 {
  margin: 0 0 22px;
  font-size: 36px;
  letter-spacing: -0.05em;
}
.panel label {
  display: block;
  text-align: left;
  color: #aaa1cc;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin: 13px 0;
}
.panel input,
.panel select,
.panel > button:not(.back) {
  display: block;
  width: 100%;
  padding: 14px 16px;
  margin-top: 7px;
}
.panel button {
  padding: 13px 18px;
}
.panel .primary,
.primary {
  border-color: #ffda3d !important;
  background: #ffda3d !important;
  color: #17112e !important;
  font-weight: 950 !important;
  box-shadow: 0 10px 28px #ffbd2842 !important;
}
.back {
  position: absolute;
  left: 22px;
  top: 20px;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  width: auto !important;
  font-size: 25px;
}
.divider {
  height: 1px;
  background: #ffffff1a;
  margin: 22px 0;
  position: relative;
}
.divider span {
  position: relative;
  top: -8px;
  background: #17113e;
  padding: 0 10px;
  color: #746b97;
  font-size: 10px;
}
.error {
  min-height: 18px;
  color: #ff6888;
  font-size: 12px;
}
.help {
  padding: 12px;
  margin-top: 14px;
  border-radius: 14px;
  background: #0d0a24;
  color: #afa7cd;
  font-size: 12px;
}
.help b {
  color: #ffda3d;
  margin-left: 8px;
}
.hidden {
  display: none !important;
}
.lobby-panel {
  width: min(650px, 94vw);
}
#lobby-code {
  font-size: 64px;
  letter-spacing: 0.18em;
  margin: 0;
  color: #ffda3d;
}
.slots {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin: 20px 0;
}
.slot {
  padding: 15px 8px;
  border: 1px solid #ffffff1d;
  border-radius: 18px;
  background: #0d0a29;
}
.slot .avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  margin: 0 auto 8px;
  display: grid;
  place-items: center;
  background: var(--color);
  box-shadow: 0 0 20px color-mix(in srgb, var(--color), transparent 45%);
}
.slot strong,
.slot small {
  display: block;
}
.slot small {
  color: #8980a8;
  font-size: 10px;
  margin-top: 3px;
}
.host-actions {
  display: flex;
  gap: 9px;
}
.host-actions > * {
  margin: 0 !important;
}
.host-actions select {
  width: 35%;
}
.host-actions button {
  flex: 1;
}
.status {
  font-size: 11px;
  color: #8c84aa;
}
.share-room { width: auto !important; margin: 10px auto 0 !important; border-color: #55dcff55 !important; color: #55dcff !important; background: #55dcff0f !important; }
.hud {
  position: fixed;
  z-index: 3;
  top: max(12px, env(safe-area-inset-top));
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 7px 10px 7px 18px;
  border: 1px solid #ffffff22;
  border-radius: 18px;
  background: #0a071fd9;
  backdrop-filter: blur(14px);
  box-shadow: 0 10px 30px #0008;
}
.hud > div {
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.1em;
}
.hud #timer {
  font-size: 22px;
  color: #ffda3d;
  font-variant-numeric: tabular-nums;
}
.hud #scoreboard {
  display: flex;
  gap: 5px;
}
.score-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--color);
  opacity: 0.35;
}
.score-dot.won {
  opacity: 1;
  box-shadow: 0 0 10px var(--color);
}
#exit-game {
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 11px;
  background: #ffffff10;
  color: white;
  font-size: 23px;
}
.announcement {
  position: fixed;
  z-index: 8;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  min-width: min(420px, 88vw);
  text-align: center;
  padding: 24px 34px;
  border: 1px solid #ffffff35;
  border-radius: 26px;
  background: #0d092bea;
  box-shadow: 0 24px 80px #000b;
  backdrop-filter: blur(16px);
}
.announcement h2 {
  font-size: 38px;
  margin: 3px 0;
}
.announcement p {
  color: #aaa1cc;
}
.announcement .primary {
  padding: 12px 22px;
  border-radius: 14px;
  border: 0;
}
.connection {
  position: fixed;
  z-index: 10;
  top: 18px;
  right: 18px;
  padding: 10px 14px;
  border-radius: 12px;
  background: #ff416c;
  font-size: 12px;
  font-weight: 850;
}
.powerup-toast { position:fixed; z-index:11; left:50%; top:84px; transform:translateX(-50%); display:grid; grid-template-columns:42px auto; grid-template-rows:auto auto; align-items:center; min-width:180px; padding:8px 14px 8px 9px; border:1px solid color-mix(in srgb,var(--powerup-color) 75%,white); border-radius:18px; background:#090720d9; box-shadow:0 10px 34px #0009,0 0 24px color-mix(in srgb,var(--powerup-color) 35%,transparent); backdrop-filter:blur(14px); animation:powerup-pop .2s ease-out; pointer-events:none; }
.powerup-toast b { grid-row:1 / span 2; display:grid; place-items:center; width:34px; height:34px; border-radius:11px; color:#171039; background:var(--powerup-color); font-size:19px; }
.powerup-toast span { font-size:14px; font-weight:950; letter-spacing:.04em; text-transform:uppercase; }
.powerup-toast small { color:#b9b2d4; font-size:9px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
@keyframes powerup-pop { from { opacity:0; transform:translate(-50%,-10px) scale(.9); } }
.touch-controls {
  position: fixed;
  z-index: 4;
  inset: auto max(25px, env(safe-area-inset-right))
    max(20px, env(safe-area-inset-bottom)) max(25px, env(safe-area-inset-left));
  display: flex;
  justify-content: space-between;
  pointer-events: none;
}
.touch-controls > div {
  pointer-events: auto;
}
.dpad {
  display: grid;
  grid-template: repeat(2, 54px) / repeat(3, 54px);
}
.dpad button,
.actions button {
  border: 1px solid #ffffff35;
  color: white;
  background: #0a071fbf;
  box-shadow:
    inset 0 1px #fff2,
    0 8px 22px #0008;
  touch-action: none;
  user-select: none;
}
.dpad button {
  font-size: 19px;
}
.dpad [data-touch="up"] {
  grid-column: 2;
}
.dpad [data-touch="left"] {
  grid-row: 2;
  grid-column: 1;
}
.dpad [data-touch="down"] {
  grid-row: 2;
  grid-column: 2;
}
.dpad [data-touch="right"] {
  grid-row: 2;
  grid-column: 3;
}
.dpad button:first-child {
  border-radius: 16px 16px 5px 5px;
}
.actions {
  display: flex;
  align-items: end;
  gap: 13px;
}
.actions button {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  font-size: 24px;
}
.actions button.bomb {
  width: 90px;
  height: 90px;
  background: #ffda3de8;
  color: #211732;
}
.actions button.action { width: 62px; height: 62px; color: #67efff; }
.actions span {
  display: block;
  font-size: 8px;
  font-weight: 900;
  text-transform: uppercase;
}
.touch-controls button.active {
  transform: scale(0.94);
  filter: brightness(1.5);
}
@media (max-height: 650px) {
  .hero-card h1 {
    font-size: 70px;
  }
  .tagline {
    margin: 14px;
  }
  .mode-grid button {
    padding: 14px;
  }
  .panel {
    padding: 21px;
  }
  .panel h2 {
    margin-bottom: 12px;
  }
  .touch-controls {
    bottom: 12px;
  }
  .dpad { grid-template: repeat(2, 46px) / repeat(3, 46px); }
  .actions button {
    width: 62px;
    height: 62px;
  }
  .actions button.bomb {
    width: 76px;
    height: 76px;
  }
}
@media (pointer: fine) {
  .touch-controls.auto {
    display: none !important;
  }
}
.help-button { position: fixed; z-index: 12; top: max(18px, env(safe-area-inset-top)); right: max(20px, env(safe-area-inset-right)); width: 44px; height: 44px; border: 1px solid #ffffff30; border-radius: 50%; color: #ffda3d; background: #0a071fda; box-shadow: 0 10px 28px #0008; font-size: 20px; font-weight: 950; }
.control-modal { position: fixed; z-index: 30; inset: 0; display: grid; place-items: center; padding: 20px; background: #070519c9; backdrop-filter: blur(12px); }
.control-card { position: relative; width: min(760px, 94vw); max-height: 92vh; overflow: auto; padding: 28px; border: 1px solid #ffffff2d; border-radius: 28px; background: #17113ef5; box-shadow: 0 30px 100px #000c; text-align: center; }
.control-card h2 { margin: 0 0 20px; font-size: 34px; }
.modal-close { position: absolute; right: 16px; top: 14px; width: 38px; height: 38px; border: 0; border-radius: 12px; color: #fff; background: #ffffff12; font-size: 24px; }
.bindings-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.binding-player { padding: 15px; border: 1px solid #ffffff18; border-radius: 20px; background: #0e0a2c; }
.binding-player h3 { margin: 0 0 12px; color: var(--color); }
.binding-row { display: grid; grid-template-columns: 1fr 92px; align-items: center; gap: 10px; margin: 7px 0; text-align: left; color: #aaa1cc; font-size: 12px; font-weight: 800; text-transform: uppercase; }
.keybind { padding: 9px; border: 1px solid #ffffff29; border-radius: 10px; color: #fff; background: #ffffff10; font-weight: 900; }
.keybind.capturing { border-color: #ffda3d; color: #17112e; background: #ffda3d; }
.capture-help { min-height: 18px; margin: 12px 0; color: #9e95bc; font-size: 11px; }
.ability-guide { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 14px 0; }
.ability-guide > div { display: flex; align-items: center; gap: 10px; padding: 10px; text-align: left; border-radius: 14px; background: #0e0a2c; }
.ability-guide b { width: 32px; color: #ffda3d; font-size: 22px; text-align: center; }
.ability-guide span, .ability-guide strong { display: block; }
.ability-guide span { color: #9188ad; font-size: 10px; }
.ability-guide strong { color: #fff; font-size: 12px; }
.control-card #reset-controls { padding: 10px 16px; border: 1px solid #ffffff25; border-radius: 12px; color: #fff; background: #ffffff0d; }
@media (max-height: 650px) { .control-card { padding: 18px; } .control-card h2 { font-size: 26px; margin-bottom: 10px; } .binding-row { margin: 3px 0; } .ability-guide { margin: 8px 0; } .ability-guide > div { padding: 7px; } }

.character-section { margin: 15px 0 18px; text-align: left; }
.field-label { display: block; margin-bottom: 8px; color: #aaa1cc; font-size: 11px; font-weight: 850; letter-spacing: .09em; text-transform: uppercase; }
.character-select { display: grid; grid-template-columns: repeat(4,1fr); gap: 8px; }
.character-card { position: relative; min-width: 0; padding: 10px 5px 8px; border: 1px solid #ffffff1c; border-radius: 15px; color: #bdb6da; background: #0c0928; transition: transform .14s,border-color .14s,background .14s; }
.character-card:hover { transform: translateY(-2px); }
.character-card.selected { border-color: var(--accent); color: #fff; background: color-mix(in srgb,var(--accent) 13%,#0c0928); box-shadow: 0 0 22px color-mix(in srgb,var(--accent) 22%,transparent); }
.character-card.unavailable { opacity:.28; filter:grayscale(.8); cursor:not-allowed; }
.character-card b { display: block; margin-top: 5px; font-size: 11px; letter-spacing: .04em; }
.mini-dude { position: relative; display: block; width: 34px; height: 34px; margin: 0 auto; border: 3px solid #19122f; border-radius: 50%; background: var(--suit); box-shadow: 0 -5px 0 -2px var(--accent),0 4px 0 -1px #19122f; }
.mini-dude::before { content:''; position:absolute; left:5px; right:5px; top:10px; height:9px; border-radius:6px; background:#19152f; }
.mini-dude::after { content:''; position:absolute; background:var(--accent); }
.mini-dude.detail-fuse::after { left:14px; top:-10px; width:5px; height:11px; border-radius:4px; box-shadow:9px 17px 0 -1px var(--accent); }
.mini-dude.detail-nova::after { left:-7px; top:7px; width:43px; height:15px; clip-path:polygon(0 50%,18% 0,28% 50%,72% 50%,82% 0,100% 50%,82% 100%,72% 55%,28% 55%,18% 100%); }
.mini-dude.detail-moss::after { left:10px; top:-10px; width:15px; height:9px; border-radius:100% 0 100% 0; transform:rotate(-28deg); box-shadow:16px 22px 0 1px #243a2a; }
.mini-dude.detail-volt::after { left:1px; top:-10px; width:30px; height:13px; clip-path:polygon(0 100%,18% 0,38% 100%,62% 100%,82% 0,100% 100%); }
.mini-dude.detail-ember::after { left:7px; top:-13px; width:20px; height:17px; clip-path:polygon(48% 0,65% 35%,92% 18%,82% 72%,100% 100%,0 100%,18% 65%,8% 34%,36% 47%); }
.mini-dude.detail-orbit::after { left:-6px; top:-9px; width:42px; height:13px; border:3px solid var(--accent); border-radius:50%; background:transparent; transform:rotate(-9deg); }
.mini-dude.detail-patch::after { left:1px; top:-15px; width:31px; height:19px; border-radius:70% 70% 15% 15%; clip-path:polygon(0 0,35% 45%,65% 45%,100% 0,83% 100%,17% 100%); }
.mini-dude.detail-oni::after { left:-7px; top:-11px; width:47px; height:18px; clip-path:polygon(0 0,27% 48%,38% 100%,62% 100%,73% 48%,100% 0,88% 76%,70% 100%,30% 100%,12% 76%); }
.mini-dude i { position:absolute; z-index:1; left:10px; top:12px; width:4px; height:4px; border-radius:50%; background:#fff; box-shadow:9px 0 #fff; }

@media (max-height: 720px) {
  .character-card { padding: 6px 4px 5px; }
  .mini-dude { width: 27px; height: 27px; border-width: 2px; }
  .mini-dude::before { top:8px; height:7px; }
  .mini-dude::after { left:11px; top:-8px; }
  .mini-dude i { left:8px; top:9px; transform:scale(.8); }
  .character-section { margin: 9px 0 11px; }
}

@media (max-width: 700px) {
  .shared-mode { display:none; }
  .screen { align-items: start; padding: max(14px,env(safe-area-inset-top)) 14px max(16px,env(safe-area-inset-bottom)); overflow-x:hidden; overflow-y:auto; }
  .hero-card { width:100%; margin:auto 0; }
  .hero-card h1 { font-size: clamp(58px,20vw,92px); line-height:.76; }
  .tagline { margin:18px 0 14px; font-size:12px; }
  .mode-grid { grid-template-columns:1fr; gap:8px; }
  .mode-grid button { padding:14px 12px; }
  .mode-grid b { font-size:19px; }
  .panel { padding:22px 16px; border-radius:22px; margin:auto 0; }
  .panel h2 { font-size:29px; }
  .panel.compact,.lobby-panel { width:min(100%,520px); }
  #lobby-code { font-size:48px; }
  .slots { grid-template-columns:repeat(2,1fr); }
  .host-actions { flex-wrap:wrap; }
  .host-actions select { width:100%; }
  .hud { top:max(6px,env(safe-area-inset-top)); max-width:calc(100vw - 12px); gap:7px; padding:5px 6px 5px 10px; border-radius:14px; }
  .hud > div { font-size:9px; }
  .hud #timer { font-size:18px; }
  #exit-game { width:30px; height:30px; }
  .help-button { top:auto; right:max(10px,env(safe-area-inset-right)); bottom:max(10px,env(safe-area-inset-bottom)); width:38px; height:38px; }
  .touch-controls { left:max(10px,env(safe-area-inset-left)); right:max(54px,env(safe-area-inset-right)); bottom:max(10px,env(safe-area-inset-bottom)); align-items:end; }
  .dpad { grid-template:repeat(2,44px)/repeat(3,44px); }
  .actions { gap:7px; }
  .actions button,.actions button.action { width:52px; height:52px; font-size:18px; }
  .actions button.bomb { width:68px; height:68px; }
  .character-select { gap:5px; }
  .character-card { padding:7px 3px 6px; }
  .bindings-grid,.ability-guide { grid-template-columns:1fr; }
  .control-card { padding:20px 14px; border-radius:20px; }
}

@media (max-width:950px) and (max-height:520px) and (orientation:landscape) {
  .shared-mode { display:none; }
}

@media (max-width:950px) and (max-height:720px) and (orientation:landscape) {
  .powerup-toast { top:8px; }
  .hud { left:auto; right:max(8px,env(safe-area-inset-right)); top:max(7px,env(safe-area-inset-top)); transform:none; flex-direction:column; gap:3px; width:52px; padding:7px 5px; border-radius:17px; background:#09072070; border-color:#ffffff18; backdrop-filter:blur(12px) saturate(1.3); }
  .hud #round-label { font-size:7px; line-height:1.15; text-align:center; }
  .hud #timer { font-size:15px; line-height:1; }
  .hud #scoreboard { flex-wrap:wrap; justify-content:center; max-width:32px; }
  .score-dot { width:7px; height:7px; }
  #exit-game { width:30px; height:26px; padding:0; background:#ffffff0d; }
  .help-button { left:max(8px,env(safe-area-inset-left)); right:auto; top:max(8px,env(safe-area-inset-top)); bottom:auto; width:36px; height:36px; background:#0b09275c; border-color:#ffffff20; backdrop-filter:blur(12px); }
  .hero-card h1 { font-size:58px; }
  .mode-grid { grid-template-columns:repeat(2,1fr); }
  .mode-grid button { padding:10px 6px; }
  .tagline,.tiny { margin:8px 0; }
  .touch-controls { left:max(8px,env(safe-area-inset-left)); right:max(8px,env(safe-area-inset-right)); bottom:max(7px,env(safe-area-inset-bottom)); }
  .dpad { grid-template:repeat(2,42px)/repeat(3,42px); opacity:.48; transition:opacity .15s; }
  .actions { display:grid; grid-template:31px 31px / 44px 62px; gap:3px 7px; opacity:.48; transition:opacity .15s; }
  .actions [data-touch="action"] { grid-column:1; grid-row:1; }
  .actions [data-touch="detonate"] { grid-column:1; grid-row:2; }
  .actions [data-touch="bomb"] { grid-column:2; grid-row:1 / span 2; }
  .dpad:active,.actions:active { opacity:.92; }
  .dpad button,.actions button { color:#fff; background:#d7e8ff1f; border-color:#ffffff30; box-shadow:inset 0 1px #ffffff42,0 4px 18px #03020d35; backdrop-filter:blur(14px) saturate(1.35); -webkit-backdrop-filter:blur(14px) saturate(1.35); }
  .dpad button { font-size:16px; }
  .actions button,.actions button.action { width:44px;height:31px; color:#dffaff; }
  .actions button.bomb { width:62px;height:65px; color:#fff7c4; background:#ffdc3d38; border-color:#ffe98566; }
  .touch-controls button.active { opacity:1; background:#ffffff42; transform:scale(.93); }
}

@media (max-width:700px) and (orientation:portrait) {
  .dpad,.actions { opacity:.58; }
  .dpad button,.actions button { background:#d7e8ff22; border-color:#ffffff35; box-shadow:inset 0 1px #ffffff45,0 5px 18px #03020d45; backdrop-filter:blur(14px) saturate(1.3); -webkit-backdrop-filter:blur(14px) saturate(1.3); }
  .actions button.bomb { background:#ffdc3d45; }
}

.joystick { position:relative; width:118px; height:118px; border:1px solid #ffffff32; border-radius:50%; background:radial-gradient(circle,#d7e8ff16 0 33%,#d7e8ff24 34% 36%,#0a071f52 37% 100%); box-shadow:inset 0 1px #ffffff32,0 8px 26px #0006; backdrop-filter:blur(12px); touch-action:none; }
.joystick::before,.joystick::after { content:''; position:absolute; left:50%; top:50%; background:#ffffff18; transform:translate(-50%,-50%); pointer-events:none; }
.joystick::before { width:72%; height:1px; }
.joystick::after { width:1px; height:72%; }
.joystick-arrows { position:absolute; inset:0; display:grid; place-items:center; color:#ffffff38; font-size:54px; font-weight:200; pointer-events:none; }
.joystick i { position:absolute; left:50%; top:50%; width:52px; height:52px; margin:-26px; border:1px solid #ffffff55; border-radius:50%; background:radial-gradient(circle at 38% 30%,#ffffff42,#7a88bb5c 45%,#25204caa); box-shadow:inset 0 2px #ffffff45,0 7px 16px #0008; transition:transform .04s linear; pointer-events:none; }
.fullscreen-button { position:fixed; z-index:12; top:max(18px,env(safe-area-inset-top)); right:max(72px,calc(env(safe-area-inset-right) + 72px)); width:44px; height:44px; border:1px solid #ffffff30; border-radius:50%; color:#dffaff; background:#0a071fda; box-shadow:0 10px 28px #0008; font-size:21px; font-weight:900; }
.fullscreen-hint { position:fixed; z-index:40; left:50%; top:50%; transform:translate(-50%,-50%); width:min(340px,88vw); padding:22px; border:1px solid #ffffff35; border-radius:22px; color:#fff; background:#0d092bf5; box-shadow:0 24px 90px #000d; text-align:center; backdrop-filter:blur(18px); }
.fullscreen-hint b { font-size:20px; }
.fullscreen-hint p { color:#bbb4d7; font-size:13px; line-height:1.5; }
.fullscreen-hint button { padding:10px 20px; border:0; border-radius:12px; color:#171039; background:#ffda3d; font-weight:900; }
.share-fallback { position:fixed; z-index:42; left:50%; top:50%; transform:translate(-50%,-50%); width:min(430px,90vw); padding:24px; border:1px solid #ffffff35; border-radius:24px; color:#fff; background:#0d092bf7; box-shadow:0 24px 90px #000d; text-align:center; backdrop-filter:blur(18px); }
.share-fallback > b { display:block; font-size:24px; }
.share-fallback > b span { color:#ffda3d; letter-spacing:.14em; }
.share-fallback > p:not(.eyebrow) { overflow:hidden; margin:12px 0; padding:10px; border-radius:10px; color:#bbb4d7; background:#ffffff0a; font-size:10px; text-overflow:ellipsis; white-space:nowrap; }
.share-fallback > div { display:flex; justify-content:center; gap:9px; }
.share-fallback > div button { padding:11px 17px; border:1px solid #ffffff25; border-radius:12px; color:#fff; background:#ffffff0d; font-weight:900; }
.share-fallback > div .primary { border:0; color:#171039; background:#ffda3d; }
.share-fallback small { display:block; min-height:15px; margin-top:11px; color:#8fe5ff; }
.copy-toast { position:fixed; z-index:60; left:50%; bottom:max(24px,calc(env(safe-area-inset-bottom) + 16px)); transform:translateX(-50%); display:flex; align-items:center; gap:9px; min-width:max-content; padding:10px 15px 10px 10px; border:1px solid #8dffbf66; border-radius:16px; color:#fff; background:#0a1821e8; box-shadow:0 12px 36px #000a,0 0 22px #55e99a25; backdrop-filter:blur(16px); animation:copy-toast-in .2s ease-out; pointer-events:none; }
.copy-toast b { display:grid; place-items:center; width:26px; height:26px; border-radius:9px; color:#092018; background:#62e69b; font-size:16px; }
.copy-toast span { font-size:12px; font-weight:900; letter-spacing:.02em; }
.copy-toast.error { border-color:#ff779066; background:#28101be8; }
.copy-toast.error b { color:#fff; background:#ff5472; }
@keyframes copy-toast-in { from { opacity:0; transform:translate(-50%,12px) scale(.94); } }
.rotate-device { display:none; }
@media (pointer:coarse) and (max-width:700px) and (orientation:portrait) {
  .rotate-device { position:fixed; z-index:50; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; padding:30px; color:#fff; background:radial-gradient(circle at 50% 30%,#493387,#100c2b 68%); text-align:center; }
  .rotate-device::before { content:'↻'; display:grid; place-items:center; width:74px; height:74px; margin-bottom:8px; border:2px solid #ffda3d; border-radius:22px; color:#ffda3d; font-size:40px; transform:rotate(-22deg); }
  .rotate-device b { font-size:28px; font-weight:950; letter-spacing:.04em; text-transform:uppercase; }
  .rotate-device span { color:#bbb4d7; font-size:13px; }
}

@media (max-width:700px) {
  .fullscreen-button { top:auto; right:max(56px,calc(env(safe-area-inset-right) + 56px)); bottom:max(10px,env(safe-area-inset-bottom)); width:38px; height:38px; }
}
@media (max-width:950px) and (max-height:720px) and (orientation:landscape) {
  .joystick { width:108px; height:108px; opacity:.58; }
  .joystick i { width:48px; height:48px; margin:-24px; }
  .actions { display:flex; align-items:end; gap:8px; opacity:.58; }
  .actions [data-touch="detonate"],.actions [data-touch="bomb"] { display:block; width:58px; height:58px; }
  .actions [data-touch="bomb"] { width:72px; height:72px; }
  .fullscreen-button { left:max(52px,calc(env(safe-area-inset-left) + 52px)); right:auto; top:max(8px,env(safe-area-inset-top)); bottom:auto; width:36px; height:36px; background:#0b09275c; backdrop-filter:blur(12px); }
}