:root{
  --blue:#1f6feb; --blue-dark:#103a8a; --blue-deep:#0a1f4a;
  --red:#c01717; --red-dark:#7a0c0c; --gold:#f4c430;
  --ink:#0e1422; --panel:#1b2233; --panel2:#27314a;
  --cream:#f6ead5;
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{
  font-family:'Press Start 2P',monospace;
  background:
    radial-gradient(circle at 50% 0%, #1c3f96 0%, #0e2356 45%, #060f2a 100%);
  background-attachment:fixed;
  color:var(--cream);
  display:flex;justify-content:center;
  overflow-x:hidden;
  image-rendering:pixelated;
  user-select:none;
  -webkit-text-size-adjust:100%;
  overscroll-behavior-y:contain;
}
#app{
  width:100%;max-width:520px;display:flex;flex-direction:column;
  min-height:100%;min-height:100dvh;
  padding:14px;
  padding-left:max(14px,env(safe-area-inset-left));
  padding-right:max(14px,env(safe-area-inset-right));
  padding-top:max(14px,env(safe-area-inset-top));
  padding-bottom:max(14px,env(safe-area-inset-bottom));
}

.topbar{text-align:center;margin-bottom:10px}
.logo{
  font-size:clamp(20px,7vw,34px);letter-spacing:1px;line-height:1.2;
  color:var(--gold);text-shadow:3px 3px 0 var(--blue-dark), 5px 5px 0 #000;
}
.logo span{color:var(--cream);font-size:.55em}
.byline{font-size:8px;color:#9bc4ff;margin-top:8px;letter-spacing:1px;opacity:.85}

.stage-wrap{flex:1;display:flex;flex-direction:column;gap:14px}

.hud{display:flex;align-items:center;gap:12px}
.hud-block{flex:1}
.hud-label{font-size:8px;color:var(--gold);margin-bottom:6px}
.bar{height:18px;background:#1a0606;border:3px solid #000;box-shadow:inset 0 0 0 2px #4a2a2a;overflow:hidden}
.bar-fill{height:100%;width:100%;background:linear-gradient(#4be04b,#1aa01a);transition:width .25s ease, background .25s}
.hud-stats{display:flex;gap:10px}
.stat{background:var(--panel);border:3px solid #000;padding:6px 8px;text-align:center;min-width:54px}
.stat-num{display:block;font-size:16px;color:var(--gold)}
.stat-lbl{display:block;font-size:7px;margin-top:4px;color:#c9b}

/* ---------- play area (policies + stage) ---------- */
.play-area{display:flex;flex-direction:column;gap:12px}
.policies{background:var(--panel);border:4px solid #000;box-shadow:0 4px 0 #000;padding:10px;display:flex;flex-direction:column;gap:8px}
.policies-title{font-size:8px;color:var(--blue);text-align:center;letter-spacing:.5px}
.policy-list{display:flex;flex-direction:column;gap:7px}
.policy-row{display:flex;align-items:center;gap:8px;justify-content:space-between;
  background:var(--panel2);border:2px solid #000;padding:6px 7px}
.policy-name{font-size:7px;line-height:1.5;color:var(--cream);flex:1}
.policy-kick{font-family:inherit;font-size:6.5px;cursor:pointer;white-space:nowrap;color:#fff;
  background:linear-gradient(#2f86ff,#114fb8);border:2px solid #000;box-shadow:0 2px 0 #000;padding:6px 7px}
.policy-kick:active{transform:translateY(2px);box-shadow:0 0 0 #000}
@media(min-width:680px){
  #app{max-width:760px}
  .play-area{flex-direction:row;align-items:flex-start}
  .policies{flex:0 0 40%}
  .play-area .stage{flex:1 1 auto;width:auto}
}

.stage{
  position:relative;aspect-ratio:1;width:100%;
  background:
    repeating-linear-gradient(0deg,#6b3a1a 0 8px,#5e3216 8px 16px);
  border:5px solid #000;
  box-shadow:0 8px 0 #000, inset 0 0 0 4px #7a4a22;
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;
}
.stage::after{ /* floor */
  content:"";position:absolute;left:0;right:0;bottom:0;height:22%;
  background:repeating-linear-gradient(90deg,#3a230f 0 10px,#321e0d 10px 20px);
  border-top:4px solid #000;
}
#game{
  width:86%;height:86%;position:relative;z-index:2;
  image-rendering:pixelated;
  transform-origin:center bottom;
}
.shake{animation:shake .28s}
@keyframes shake{
  0%,100%{transform:translate(0,0)}
  20%{transform:translate(-7px,3px) rotate(-2deg)}
  40%{transform:translate(6px,-2px) rotate(2deg)}
  60%{transform:translate(-5px,2px) rotate(-1deg)}
  80%{transform:translate(4px,-1px)}
}
.floaters{position:absolute;inset:0;z-index:5;pointer-events:none;overflow:hidden}
.floater{
  position:absolute;font-size:14px;color:var(--gold);
  text-shadow:2px 2px 0 #000;white-space:nowrap;
  animation:floatup 1s ease-out forwards;
}
.floater.pow{font-size:22px;color:#fff}
.floater.heal{color:#7bff7b}
@keyframes floatup{
  0%{opacity:0;transform:translateY(0) scale(.6)}
  15%{opacity:1;transform:translateY(-6px) scale(1.1)}
  100%{opacity:0;transform:translateY(-70px) scale(1)}
}
.nametag{
  position:absolute;top:8px;left:50%;transform:translateX(-50%);z-index:6;
  font-size:9px;background:var(--red-dark);border:3px solid #000;
  padding:5px 9px;color:var(--cream);letter-spacing:1px;
}

.kick-btn{
  font-family:inherit;font-size:20px;padding:18px;cursor:pointer;
  background:linear-gradient(#2f86ff,#114fb8);color:#fff;
  border:4px solid #000;box-shadow:0 6px 0 #000;
  letter-spacing:2px;transition:transform .05s, box-shadow .05s;
}
.kick-btn:active{transform:translateY(5px);box-shadow:0 1px 0 #000}
.kick-btn:disabled{filter:grayscale(.7) brightness(.7);cursor:not-allowed}

.ben-btn{
  font-family:inherit;font-size:13px;padding:14px;cursor:pointer;margin-top:-4px;
  background:linear-gradient(#2a6ae0,#1440a8);color:#fff;
  border:4px solid #000;box-shadow:0 5px 0 #000;
  letter-spacing:1px;transition:transform .05s, box-shadow .05s;
  text-shadow:1px 1px 0 #0a2a6a;
}
.ben-btn:active{transform:translateY(4px);box-shadow:0 1px 0 #000}
.ben-btn:disabled{filter:grayscale(.7) brightness(.7);cursor:not-allowed}

.kick-hint{font-size:7.5px;text-align:center;color:#e8c;opacity:.85;margin-top:-2px}
.attack-row{display:flex;gap:8px;margin-top:-2px}
.spin-btn,.ben-btn{flex:1;font-family:inherit;font-size:11px;padding:13px 6px;cursor:pointer;
  border:4px solid #000;box-shadow:0 5px 0 #000;letter-spacing:1px;color:#fff;
  transition:transform .05s, box-shadow .05s}
.spin-btn{background:linear-gradient(#d06a1a,#a04810);text-shadow:1px 1px 0 #5a2a08;margin-top:0}
.ben-btn{background:linear-gradient(#2a6ae0,#1440a8);text-shadow:1px 1px 0 #0a2a6a;margin-top:0}
.spin-btn:active,.ben-btn:active{transform:translateY(4px);box-shadow:0 1px 0 #000}
.spin-btn:disabled,.ben-btn:disabled{filter:grayscale(.7) brightness(.7);cursor:not-allowed}

.roster-cta{display:flex;gap:8px;align-items:stretch}
.cta-upload{flex:1;font-family:inherit;font-size:8px;line-height:1.5;cursor:pointer;
  color:#101014;background:linear-gradient(var(--gold),#d9a818);border:3px solid #000;
  box-shadow:0 4px 0 #000;padding:10px;text-align:left;letter-spacing:.5px}
.cta-upload:active{transform:translateY(3px);box-shadow:0 1px 0 #000}
.style-toggle{font-family:inherit;font-size:7px;cursor:pointer;color:var(--gold);
  background:transparent;border:3px solid var(--gold);padding:8px;white-space:nowrap}
.style-toggle:hover{background:rgba(244,196,48,.12)}

.feed-tray{background:var(--panel);border:4px solid #000;padding:10px}
.tray-label{font-size:8px;color:var(--gold);margin-bottom:10px;text-align:center}
.feed-items{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.feed-item{
  font-family:inherit;background:var(--panel2);border:3px solid #000;
  padding:8px 4px;cursor:pointer;color:var(--cream);text-align:center;
  display:flex;flex-direction:column;align-items:center;gap:6px;
  transition:transform .05s, background .1s;
}
.feed-item:active{transform:scale(.93)}
.feed-item:hover{background:#4a352a}
.feed-emoji{font-size:22px;line-height:1}
.feed-name{font-size:6.5px;line-height:1.4;color:#e8d}
.feed-heal{font-size:7px;color:#7bff7b}

.actions{display:flex;gap:8px}
.ghost-btn{
  flex:1;font-family:inherit;font-size:9px;text-align:center;
  background:transparent;border:3px solid var(--gold);color:var(--gold);
  padding:12px 6px;cursor:pointer;transition:background .1s;
}
.ghost-btn:hover{background:rgba(244,196,48,.12)}

/* ---------- disclaimer ---------- */
.disclaimer-overlay{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;
  padding:20px;background:rgba(8,3,3,.92);backdrop-filter:blur(3px)}
.disclaimer-overlay.hidden{display:none}
.disclaimer-card{max-width:380px;width:100%;background:var(--panel);border:5px solid #000;
  box-shadow:0 8px 0 #000, inset 0 0 0 4px var(--red-dark);padding:24px 20px;text-align:center;
  display:flex;flex-direction:column;align-items:center;gap:16px}
.disclaimer-emoji{font-size:34px}
.disclaimer-title{font-size:16px;color:var(--gold);letter-spacing:2px;text-shadow:2px 2px 0 #000}
.disclaimer-text{font-size:9px;line-height:1.9;color:var(--cream)}
.disclaimer-accept{font-family:inherit;font-size:13px;letter-spacing:1px;cursor:pointer;color:#fff;
  background:linear-gradient(#3aa03a,#1a7a1a);border:4px solid #000;box-shadow:0 5px 0 #000;
  padding:14px 26px;transition:transform .05s, box-shadow .05s}
.disclaimer-accept:active{transform:translateY(4px);box-shadow:0 1px 0 #000}

/* ---------- screens ---------- */
.screen{display:flex;flex-direction:column;gap:14px;position:relative}
.screen[hidden]{display:none}
.screen-title{font-size:13px;color:var(--gold);text-align:center;letter-spacing:1px;
  text-shadow:2px 2px 0 #000;margin-top:6px}
.back-btn{align-self:flex-start;font-family:inherit;font-size:8px;color:var(--gold);
  background:transparent;border:2px solid var(--gold);padding:8px 10px;cursor:pointer}
.back-btn:hover{background:rgba(244,196,48,.12)}

/* ---------- map ---------- */
.map{position:relative;aspect-ratio:1.1;width:100%;border:5px solid #000;
  background:
    radial-gradient(circle at 30% 30%, #2a5a7a 0 6%, transparent 7%),
    repeating-linear-gradient(135deg,#1c3a2a 0 14px,#19342568 14px 28px),
    linear-gradient(#16302a,#0e2420);
  box-shadow:inset 0 0 0 4px #2a4a3a, 0 8px 0 #000;overflow:hidden}
.map-grid{position:absolute;inset:0;
  background-image:linear-gradient(#ffffff12 1px,transparent 1px),linear-gradient(90deg,#ffffff12 1px,transparent 1px);
  background-size:24px 24px}
.pin{position:absolute;transform:translate(-50%,-100%);cursor:pointer;
  display:flex;flex-direction:column;align-items:center;gap:2px;
  background:none;border:none;font-family:inherit;color:#fff;transition:transform .08s}
.pin:hover{transform:translate(-50%,-100%) scale(1.12)}
.pin .pin-dot{font-size:20px;filter:drop-shadow(1px 2px 0 #000)}
.pin .pin-name{font-size:6.5px;background:#000c;border:2px solid #000;padding:3px 4px;
  white-space:nowrap;line-height:1.3}
/* edge pins: keep the dot on the city but slide the label inward so it never clips */
.pin-l .pin-name{transform:translateX(calc(50% - 11px))}
.pin-r .pin-name{transform:translateX(calc(-50% + 11px))}
.pin.is-default .pin-name{background:var(--red-dark);border-color:var(--gold);color:var(--gold)}
.pin.is-default .pin-dot{animation:pinbob 1s ease-in-out infinite}
.pin.locked{opacity:.62;cursor:pointer}
.pin.locked .pin-name{color:#ccc}
.pin-soon{font-size:5px;color:var(--gold);background:#000a;border:2px solid #000;border-top:none;
  padding:2px 3px;letter-spacing:.5px;white-space:nowrap}
@keyframes pinbob{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
.map-hint{font-size:8px;text-align:center;color:#cda;opacity:.85}

/* ---------- roster ---------- */
.roster{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.char-tile{font-family:inherit;background:var(--panel);border:4px solid #000;
  padding:10px;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:8px;
  transition:transform .06s, background .1s;box-shadow:0 4px 0 #000}
.char-tile:active{transform:translateY(3px);box-shadow:0 1px 0 #000}
.char-tile:hover{background:var(--panel2)}
.char-tile canvas{width:88px;height:88px;image-rendering:pixelated;
  background:repeating-linear-gradient(0deg,#3a2a22 0 6px,#33241d 6px 12px);border:3px solid #000}
.char-tile .char-name{font-size:7px;color:var(--cream);text-align:center;line-height:1.4;min-height:22px;display:flex;align-items:center}

.footer{font-size:7px;text-align:center;color:#a87;margin-top:16px;line-height:1.6;opacity:.7}

/* ---------- mobile ---------- */
@media(max-width:430px){
  #app{padding:10px;
    padding-left:max(10px,env(safe-area-inset-left));
    padding-right:max(10px,env(safe-area-inset-right));
    padding-bottom:max(10px,env(safe-area-inset-bottom));
  }
  .topbar{margin-bottom:6px}
  .byline{font-size:7px}
  .stage-wrap,.screen{gap:11px}
  .hud-stats{gap:6px}
  .stat{min-width:46px;padding:5px 6px}
  .kick-btn{font-size:18px;padding:16px}
  .ben-btn{font-size:11px;padding:13px}
  .feed-items{gap:6px}
  .feed-item{padding:7px 3px}
  .feed-emoji{font-size:19px}
  .feed-name{font-size:6px}
  .actions{gap:6px}
  .ghost-btn{font-size:8px;padding:11px 4px}
  .map{aspect-ratio:1}
  .pin .pin-name{font-size:6px}
  .char-tile{padding:8px}
  .char-tile canvas{width:100%;height:auto;aspect-ratio:1}
}
@media(max-width:340px){
  .logo{font-size:19px}
  .kick-btn{font-size:15px}
  .roster{gap:8px}
}
/* taller, thumb-friendly touch on coarse pointers */
@media(pointer:coarse){
  .feed-item,.char-tile,.pin,.ghost-btn{touch-action:manipulation}
}