/* ============================================================
   Castle Wars — UI styles
   ============================================================ */

:root{
  --ink:#12202e;
  --ink-soft:#2b3f55;
  --paper:#fdf6e8;
  --gold:#ffcc3d;
  --gold-dk:#c98a12;
  --red:#e5352b;
  --red-dk:#9c1a13;
  --shield:#4fc3f7;
  --shield-dk:#0d6f9e;
  --teal:#3d8f95;
  --shadow:0 6px 0 rgba(0,0,0,.28), 0 12px 28px rgba(0,0,0,.35);
}

*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}

html,body{
  height:100%;
  overflow:hidden;
  background:#0b1420;
  font-family:"Trebuchet MS","Segoe UI",system-ui,sans-serif;
  color:var(--paper);
  overscroll-behavior:none;
  touch-action:none;
  user-select:none;
  -webkit-user-select:none;
}

#app{
  position:fixed;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#0b1420;
}

/* Stage: exactly the canvas box. Everything positioned "over the game"
   anchors to this, so no HUD element can land in the letterbox strip. */
#stage{
  position:relative;
  display:block;
  font-size:0;        /* kills the inline gap under the canvas... */
}
#stage > *:not(canvas){
  font-size:initial;  /* ...without collapsing every HUD line box */
  line-height:normal;
}

#game{
  display:block;
  touch-action:none;
  /* size driven by JS to keep a portrait play-field */
}

.layer{
  position:absolute;
  inset:0;
  pointer-events:none;
  display:flex;
  flex-direction:column;
}
.layer.overlay{
  pointer-events:auto;
  align-items:center;
  justify-content:center;
  background:rgba(6,12,20,.78);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  padding:18px;
  z-index:20;
}
.hidden{display:none !important}

/* ---------------- HUD ---------------- */
#hud{z-index:10;justify-content:space-between;padding:10px 12px}
#hud button{pointer-events:auto}

.hud-top{
  display:flex;
  align-items:center;
  gap:8px;
}

.hud-chip{
  display:flex;
  align-items:center;
  gap:6px;
  padding:5px 11px;
  border-radius:999px;
  background:rgba(10,20,32,.62);
  border:2px solid rgba(255,255,255,.16);
  box-shadow:0 3px 0 rgba(0,0,0,.3);
  font-weight:700;
  letter-spacing:.5px;
}
.hud-chip.gold{border-color:rgba(255,204,61,.55);color:var(--gold)}
.chip-label{font-size:9px;opacity:.65;letter-spacing:1.4px}
.chip-value{font-size:15px;font-weight:800;text-shadow:0 2px 0 rgba(0,0,0,.4)}
.coin-ico{color:var(--gold);font-size:15px;line-height:1}

.icon-btn{
  margin-left:auto;
  width:36px;height:36px;
  flex:0 0 36px;
  border-radius:12px;
  border:2px solid rgba(255,255,255,.18);
  background:rgba(10,20,32,.62);
  color:var(--paper);
  font-size:14px;
  font-weight:800;
  cursor:pointer;
  box-shadow:0 3px 0 rgba(0,0,0,.3);
  transition:transform .08s;
}
.icon-btn:active{transform:translateY(2px);box-shadow:0 1px 0 rgba(0,0,0,.3)}
.icon-btn + .icon-btn{margin-left:0}
.icon-btn.off{opacity:.45}

/* enemy bars — floating under the top row */
.hud-enemy{
  position:absolute;
  top:56px;left:0;right:0;
  padding:0 16px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:5px;
  transition:opacity .3s;
}
.enemy-name{
  font-size:10px;
  letter-spacing:2.4px;
  font-weight:800;
  opacity:.72;
  text-shadow:0 2px 3px rgba(0,0,0,.6);
}
.bar{
  position:relative;
  width:min(78%,330px);
  height:19px;
  border-radius:999px;
  background:rgba(6,12,20,.72);
  border:3px solid #0e1a26;
  box-shadow:0 3px 0 rgba(0,0,0,.35), inset 0 2px 4px rgba(0,0,0,.5);
  overflow:hidden;
}
.bar-fill{
  position:absolute;inset:0;
  transform-origin:left center;
  transition:transform .22s cubic-bezier(.3,.9,.4,1);
  border-radius:999px;
}
.bar-fill.hp{background:linear-gradient(180deg,#ff6b5e,var(--red) 55%,var(--red-dk))}
.bar-fill.shield{background:linear-gradient(180deg,#bdefff,var(--shield) 55%,var(--shield-dk))}
.bar-text{
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  font-size:10px;font-weight:800;letter-spacing:1.6px;
  text-shadow:0 1px 2px rgba(0,0,0,.75);
}
.shield-wrap.broken{opacity:.25;filter:grayscale(1)}

/* bottom */
.hud-bottom{margin-top:auto;display:flex;flex-direction:column;gap:8px;align-items:center;padding-bottom:calc(18px + env(safe-area-inset-bottom,0px))}
.ammo-row{display:flex;align-items:center;gap:10px;width:min(94%,420px);flex:0 0 auto}
.ammo-box{
  flex:0 0 auto;          /* never let the row squash these flat */
  min-width:56px;
  padding:5px 8px;
  text-align:center;
  border-radius:12px;
  background:rgba(10,20,32,.62);
  border:2px solid rgba(255,255,255,.14);
  box-shadow:0 3px 0 rgba(0,0,0,.3);
}
.ammo-label{font-size:8px;letter-spacing:1.5px;opacity:.6;font-weight:700}
.ammo-val{font-size:17px;font-weight:800;color:var(--gold);text-shadow:0 2px 0 rgba(0,0,0,.4)}

.reload-wrap{flex:1;display:flex;flex-direction:column;gap:3px;align-items:center}
.reload-bar{
  width:100%;height:9px;border-radius:999px;
  background:rgba(6,12,20,.72);
  border:2px solid #0e1a26;
  overflow:hidden;
}
.reload-fill{
  height:100%;width:100%;
  transform-origin:left center;
  background:linear-gradient(90deg,var(--gold-dk),var(--gold));
  border-radius:999px;
}
.reload-label{font-size:9px;letter-spacing:1.6px;font-weight:800;opacity:.75}
.reload-label.ready{color:var(--gold)}

.hint{
  order:-1;
  font-size:10.5px;
  opacity:.55;
  letter-spacing:.4px;
  text-shadow:0 1px 2px rgba(0,0,0,.7);
  transition:opacity .4s;
}
.hint.fade{opacity:0}

/* ---------------- Panels ---------------- */
.panel{
  width:min(100%,400px);
  max-height:100%;
  overflow-y:auto;
  padding:22px 20px 20px;
  border-radius:22px;
  background:linear-gradient(180deg,#233b52,#16283a);
  border:3px solid rgba(255,255,255,.12);
  box-shadow:var(--shadow);
  display:flex;
  flex-direction:column;
  gap:14px;
  text-align:center;
}
.panel.small{width:min(100%,320px)}
.panel-title{
  font-size:20px;letter-spacing:2px;font-weight:800;
  text-shadow:0 3px 0 rgba(0,0,0,.4);
}
.panel-title.danger{color:#ff7a6e}

.logo{display:flex;flex-direction:column;align-items:center;gap:4px}
.logo-rocket{font-size:42px;filter:drop-shadow(0 4px 6px rgba(0,0,0,.5));transform:rotate(-20deg)}
.logo h1{
  font-size:30px;line-height:1;letter-spacing:2px;font-weight:800;
  color:var(--gold);
  text-shadow:0 4px 0 var(--gold-dk),0 7px 12px rgba(0,0,0,.5);
}
.logo h1 span{display:block;color:var(--paper);text-shadow:0 4px 0 #6b4a12,0 7px 12px rgba(0,0,0,.5)}
.tagline{font-size:11.5px;opacity:.7;letter-spacing:.8px;margin-top:3px}

.btn{
  pointer-events:auto;
  border:none;
  border-radius:16px;
  padding:13px 18px;
  font-family:inherit;
  font-size:15px;
  font-weight:800;
  letter-spacing:1.4px;
  cursor:pointer;
  transition:transform .08s,filter .15s;
}
.btn.big{font-size:17px;padding:15px 18px}
.btn.primary{
  background:linear-gradient(180deg,#ffd95c,var(--gold) 55%,var(--gold-dk));
  color:#4a2f00;
  box-shadow:0 5px 0 #8a5f0a,0 10px 18px rgba(0,0,0,.4);
}
.btn.ghost{
  background:rgba(255,255,255,.07);
  color:var(--paper);
  border:2px solid rgba(255,255,255,.18);
  box-shadow:0 4px 0 rgba(0,0,0,.3);
}
.btn:active{transform:translateY(4px);filter:brightness(.96)}
.btn.primary:active{box-shadow:0 1px 0 #8a5f0a}
.btn:disabled{opacity:.4;pointer-events:none}

.start-meta,.over-stats{
  display:flex;gap:10px;
}
.start-meta>div,.over-stats>div{
  flex:1;
  display:flex;flex-direction:column;gap:2px;
  padding:9px 6px;
  border-radius:13px;
  background:rgba(0,0,0,.24);
  border:2px solid rgba(255,255,255,.08);
}
.meta-k{font-size:9px;letter-spacing:1.3px;opacity:.6;font-weight:700}
.meta-v{font-size:19px;font-weight:800;color:var(--gold)}

.howto{
  text-align:left;
  padding:12px 14px;
  border-radius:14px;
  background:rgba(0,0,0,.22);
  border:2px solid rgba(255,255,255,.07);
}
.howto-title{font-size:10px;letter-spacing:1.8px;font-weight:800;opacity:.6;margin-bottom:7px}
.howto ul{list-style:none;display:flex;flex-direction:column;gap:6px}
.howto li{font-size:11.5px;line-height:1.5;opacity:.85;padding-left:15px;position:relative}
.howto li::before{content:"▸";position:absolute;left:0;color:var(--gold)}
.c-shield{color:var(--shield)}
.c-hp{color:#ff7a6e}

/* ---------------- Shop ---------------- */
.reward{
  font-size:17px;font-weight:800;color:var(--gold);
  text-shadow:0 2px 0 rgba(0,0,0,.4);
}
.shop-list{display:flex;flex-direction:column;gap:9px}
.shop-item{
  display:flex;align-items:center;gap:11px;
  padding:10px 12px;
  border-radius:14px;
  background:rgba(0,0,0,.24);
  border:2px solid rgba(255,255,255,.08);
  text-align:left;
}
.shop-ico{
  width:38px;height:38px;flex:0 0 38px;
  display:flex;align-items:center;justify-content:center;
  font-size:20px;
  border-radius:11px;
  background:rgba(255,204,61,.14);
  border:2px solid rgba(255,204,61,.28);
}
.shop-info{flex:1;min-width:0}
.shop-name{font-size:12.5px;font-weight:800;letter-spacing:.5px}
.shop-desc{font-size:10px;opacity:.6;margin-top:1px}
.shop-lvl{font-size:9px;opacity:.5;margin-top:2px;letter-spacing:1px}
.shop-buy{
  flex:0 0 auto;
  padding:9px 12px;
  border-radius:12px;
  border:none;
  font-family:inherit;
  font-size:12px;font-weight:800;
  background:linear-gradient(180deg,#ffd95c,var(--gold) 60%,var(--gold-dk));
  color:#4a2f00;
  box-shadow:0 4px 0 #8a5f0a;
  cursor:pointer;
  white-space:nowrap;
  transition:transform .08s;
}
.shop-buy:active{transform:translateY(3px);box-shadow:0 1px 0 #8a5f0a}
.shop-buy:disabled{
  background:rgba(255,255,255,.09);
  color:rgba(255,255,255,.4);
  box-shadow:0 4px 0 rgba(0,0,0,.25);
  pointer-events:none;
}
.shop-buy.maxed{background:rgba(79,195,247,.2);color:var(--shield);box-shadow:0 4px 0 rgba(0,0,0,.25)}

/* ---------------- Toast ---------------- */
.toast{
  position:absolute;
  /* Sits above the action, not across the middle of the screen, so it can
     never cover a panel the player is reading. */
  top:20%;left:50%;
  transform:translate(-50%,-50%) scale(1);
  z-index:15;
  padding:13px 26px;
  border-radius:16px;
  background:rgba(8,16,26,.9);
  border:3px solid var(--gold);
  color:var(--gold);
  font-size:19px;font-weight:800;letter-spacing:2.5px;
  text-shadow:0 3px 0 rgba(0,0,0,.5);
  pointer-events:none;
  animation:toastPop .5s cubic-bezier(.2,1.4,.5,1);
}
@keyframes toastPop{
  0%{transform:translate(-50%,-50%) scale(.5);opacity:0}
  60%{transform:translate(-50%,-50%) scale(1.08);opacity:1}
  100%{transform:translate(-50%,-50%) scale(1);opacity:1}
}
/* any full-screen panel outranks the toast */
.layer.overlay{z-index:40}
.toast.out{opacity:0;transition:opacity .35s}

/* small screens */
@media (max-height:640px){
  .logo-rocket{font-size:32px}
  .logo h1{font-size:24px}
  .howto{display:none}
  .panel{padding:16px 16px 14px;gap:11px}
}

/* player hp readout in the bottom HUD */
.player-hp{
  display:flex;align-items:center;gap:7px;
  width:min(94%,420px);
}
.php-label{font-size:8px;letter-spacing:1.5px;font-weight:800;opacity:.6;white-space:nowrap}
.php-bar{
  flex:1;height:8px;border-radius:999px;
  background:rgba(6,12,20,.72);
  border:2px solid #0e1a26;
  overflow:hidden;
}
.php-fill{
  height:100%;width:100%;
  transform-origin:left center;
  background:linear-gradient(90deg,#3f9c3f,#9fe870);
  transition:transform .22s cubic-bezier(.3,.9,.4,1);
}
.php-fill.low{background:linear-gradient(90deg,#c93b2b,#ff9a6e)}
.php-val{font-size:11px;font-weight:800;color:#9fe870;min-width:30px;text-align:right}
.php-val.low{color:#ff9a6e}


/* ---------------- Weapon selector ---------------- */
/* Sits in the HUD's top-left column so it never covers the battlefield
   or the chasm the player is shooting across. */
.weapon-bar{
  position:absolute;
  left:12px;
  top:96px;
  display:flex;
  flex-direction:column;
  gap:5px;
  padding:5px;
  border-radius:15px;
  background:rgba(8,16,26,.5);
  backdrop-filter:blur(3px);
  -webkit-backdrop-filter:blur(3px);
  pointer-events:auto;
}
.wpn{
  position:relative;
  width:38px;height:38px;
  flex:0 0 38px;
  border-radius:13px;
  border:2px solid rgba(255,255,255,.16);
  background:rgba(10,20,32,.68);
  color:var(--paper);
  font-size:17px;
  line-height:1;
  cursor:pointer;
  box-shadow:0 3px 0 rgba(0,0,0,.3);
  transition:transform .08s,border-color .15s,background .15s;
  display:flex;align-items:center;justify-content:center;
}
.wpn:active{transform:translateY(2px);box-shadow:0 1px 0 rgba(0,0,0,.3)}
.wpn.active{
  border-color:var(--gold);
  background:rgba(255,204,61,.18);
  box-shadow:0 3px 0 #8a5f0a,0 0 14px rgba(255,204,61,.35);
}
.wpn.locked{opacity:.32;filter:grayscale(1);cursor:not-allowed}
.wpn.empty{opacity:.45}
.wpn-ammo{
  position:absolute;
  right:-3px;bottom:-4px;
  min-width:17px;height:17px;
  padding:0 3px;
  border-radius:9px;
  background:#14202e;
  border:2px solid rgba(255,255,255,.2);
  font-size:9px;font-weight:800;
  line-height:13px;
  color:var(--gold);
}
.wpn-ammo.out{color:#ff7a6e}

/* ---------------- Shop tabs ---------------- */
.shop-tabs{display:flex;gap:8px}
.shop-tab{
  flex:1;
  padding:9px 6px;
  border-radius:12px;
  border:2px solid rgba(255,255,255,.12);
  background:rgba(0,0,0,.24);
  color:var(--paper);
  font-family:inherit;
  font-size:11px;font-weight:800;letter-spacing:1.4px;
  cursor:pointer;
  opacity:.55;
  transition:opacity .15s,border-color .15s;
}
.shop-tab.active{
  opacity:1;
  border-color:rgba(255,204,61,.55);
  background:rgba(255,204,61,.12);
  color:var(--gold);
}
.shop-item.owned .shop-buy{background:rgba(79,195,247,.2);color:var(--shield);box-shadow:0 4px 0 rgba(0,0,0,.25)}
.shop-lock{font-size:9px;opacity:.5;letter-spacing:1px;margin-top:2px}


/* ============================================================
   Landscape / desktop layout
   The HUD spreads to the edges instead of stacking in the middle,
   so the wide battlefield stays unobstructed.
   ============================================================ */
body.landscape .weapon-bar{
  left:14px;
  top:50%;
  transform:translateY(-50%);
}

body.landscape .hud-enemy{
  top:52px;
}
body.landscape .bar{width:min(46%,420px)}

/* Keep the portrait flex-column structure; landscape only widens it and
   pushes the stat boxes out to the edges. Re-declaring the container as a
   grid fought the existing rules and flattened the boxes. */
body.landscape .hud-bottom{
  gap:7px;
  width:100%;
  padding:0 clamp(80px,7vw,160px) calc(14px + env(safe-area-inset-bottom,0px));
}
body.landscape .ammo-row{
  width:100%;
  gap:18px;
}
body.landscape .player-hp{
  width:100%;
}
body.landscape .php-val{min-width:44px}

/* the panels can afford to be a touch larger on a big screen */
body.landscape .panel{width:min(100%,460px)}
body.landscape .howto li{font-size:12px}

/* on very wide screens keep the shop readable rather than stretched */
@media (min-aspect-ratio: 16/9){
  body.landscape .hud-bottom{padding-left:clamp(90px,10vw,220px);padding-right:clamp(90px,10vw,220px)}
}


/* ============================================================
   Sandbox panel
   ============================================================ */
.panel.sandbox{
  width:min(100%,470px);
  max-height:92%;
  gap:11px;
  text-align:left;
}
.sandbox-sub{
  font-size:11px;opacity:.6;text-align:center;letter-spacing:.4px;margin-top:-6px;
}

.sb-group{
  padding:11px 12px;
  border-radius:14px;
  background:rgba(0,0,0,.24);
  border:2px solid rgba(255,255,255,.07);
  display:flex;flex-direction:column;gap:8px;
}
.sb-group-title{
  font-size:9px;letter-spacing:1.9px;font-weight:800;opacity:.55;
  color:var(--gold);
}

.sb-row{
  display:grid;
  grid-template-columns:104px 1fr 54px;
  align-items:center;
  gap:9px;
}
.sb-label{font-size:11px;opacity:.82;font-weight:700}
.sb-val{
  font-size:11.5px;font-weight:800;color:var(--gold);
  text-align:right;
  font-variant-numeric:tabular-nums;
}

/* range styling that works in both engines */
.sb-row input[type=range]{
  -webkit-appearance:none;appearance:none;
  width:100%;height:6px;
  border-radius:999px;
  background:rgba(255,255,255,.14);
  outline:none;
  cursor:pointer;
}
.sb-row input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;
  width:17px;height:17px;border-radius:50%;
  background:linear-gradient(180deg,#ffd95c,var(--gold) 60%,var(--gold-dk));
  border:2px solid #7a5408;
  box-shadow:0 2px 4px rgba(0,0,0,.45);
  cursor:pointer;
}
.sb-row input[type=range]::-moz-range-thumb{
  width:15px;height:15px;border-radius:50%;
  background:var(--gold);
  border:2px solid #7a5408;
  cursor:pointer;
}

.sb-check{
  display:flex;align-items:center;gap:9px;
  font-size:11.5px;font-weight:700;opacity:.88;
  cursor:pointer;
}
.sb-check em{opacity:.55;font-style:normal;font-size:10px;font-weight:600}
.sb-check input{
  width:17px;height:17px;
  accent-color:var(--gold);
  cursor:pointer;
  flex:0 0 auto;
}

.sb-actions{display:flex;gap:8px;flex-wrap:wrap}
.sb-actions .btn{flex:1;min-width:110px}
.sb-actions .btn.big{flex:1 1 100%}

/* floating re-open button while a sandbox run is live */
.sb-edit{
  position:absolute;
  right:12px;
  top:96px;
  z-index:12;
  pointer-events:auto;
  margin-left:0;
  border-color:rgba(255,204,61,.5);
}
body.landscape .sb-edit{top:auto;bottom:96px}

/* sandbox badge on the HUD */
.sb-badge{
  padding:4px 10px;
  border-radius:999px;
  background:rgba(255,204,61,.16);
  border:2px solid rgba(255,204,61,.45);
  color:var(--gold);
  font-size:9px;font-weight:800;letter-spacing:1.6px;
}


/* lives readout */
.hud-chip.lives{
  border-color:rgba(229,53,43,.55);
  color:#ff8a7e;
  letter-spacing:1px;
}
.hud-chip.lives .chip-value{font-size:13px}
.hud-chip.lives.low{
  animation:lifePulse 1s ease-in-out infinite;
}
@keyframes lifePulse{
  0%,100%{opacity:1}
  50%{opacity:.45}
}

.over-note{
  font-size:11.5px;
  line-height:1.5;
  opacity:.78;
  margin-top:-4px;
}
.over-note.danger{color:#ff9a8e}

/* ============================================================
   Arena editor + castle designer
   ============================================================ */

/* The toolbar floats over the live canvas, so it sits inside #stage and
   uses its own stacking level above the HUD but below modal overlays. */
.editor-bar{
  position:absolute;
  left:50%;
  /* Sits at the TOP: the build line is near the bottom of the field, and a
     bottom bar covered exactly the ground the player is clicking on. */
  top:52px;
  transform:translateX(-50%);
  width:min(660px, calc(100% - 24px));
  background:rgba(14,20,30,.93);
  border:1px solid rgba(120,190,255,.3);
  border-radius:16px;
  padding:10px 12px;
  box-shadow:0 10px 34px rgba(0,0,0,.55);
  z-index:30;
  backdrop-filter:blur(6px);
}
.editor-bar.hidden{display:none}

.eb-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:8px;
}
.eb-title{font-weight:800;font-size:13px;letter-spacing:.06em;color:#9fd8ff}
.eb-hint{font-size:11px;color:#8fa3bb;text-align:right}

.eb-tools{
  display:flex;
  gap:6px;
  overflow-x:auto;
  padding-bottom:4px;
  scrollbar-width:thin;
}
.eb-tool{
  flex:0 0 auto;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:2px;
  min-width:56px;
  padding:7px 6px;
  font-size:18px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
  border-radius:11px;
  color:#e8f1fb;
  cursor:pointer;
  transition:background .15s, border-color .15s, transform .1s;
}
.eb-tool span{font-size:10px;letter-spacing:.03em;opacity:.85}
.eb-tool:hover{background:rgba(255,255,255,.12)}
.eb-tool:active{transform:scale(.95)}
.eb-tool.active{
  background:linear-gradient(180deg,#2f7fd0,#1d5da0);
  border-color:#7cc6ff;
  box-shadow:0 0 0 1px rgba(124,198,255,.35) inset;
}

.eb-foot{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-top:9px;
  flex-wrap:wrap;
}
.eb-brush{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:11px;
  color:#a9bdd4;
  flex:1 1 200px;
  min-width:0;
}
.eb-brush input[type=range]{flex:1;min-width:80px}
.eb-actions{display:flex;gap:7px;flex:0 0 auto}
.btn.sm{padding:7px 13px;font-size:11px;border-radius:9px}

/* sandbox additions */
.sb-note{
  font-size:11px;
  color:#8fa3bb;
  margin:0 0 8px;
  line-height:1.45;
}
.sb-editor-btns{
  display:flex;
  gap:8px;
  margin-bottom:10px;
  flex-wrap:wrap;
}
.sb-editor-btns .btn{flex:1 1 140px;font-size:11px;padding:9px 10px}
.sb-layout-info{
  margin-top:8px;
  font-size:11px;
  color:#7fd4a0;
  background:rgba(50,180,120,.1);
  border:1px solid rgba(80,200,140,.22);
  border-radius:8px;
  padding:6px 9px;
}

/* castle designer — paint grid */
.panel.castle-designer{
  max-width:520px;
  /* The grid is tall; without a scroll cap the SIMPAN button lands below the
     fold on short screens and the panel looks broken. */
  max-height:94vh;
  overflow-y:auto;
}

.cd-tools{
  display:flex;
  flex:0 0 auto;
  flex-wrap:wrap;          /* two short rows beats a row running off-screen */
  justify-content:center;
  gap:6px;
  margin-bottom:8px;
  padding-bottom:3px;
  max-width:100%;
}
.cd-tool{
  /* `flex:1 1 0` collapses these to a few px inside the panel's flex column,
     but `0 0 auto` with six tools overflows a 360px phone. A fixed basis that
     is allowed to SHRINK keeps them on one row at any width. */
  flex:1 1 auto;
  min-width:0;
  max-width:80px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:2px;
  padding:7px 4px;
  font-size:17px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
  border-radius:10px;
  color:#e8f1fb;
  cursor:pointer;
  transition:background .15s, border-color .15s;
}
.cd-tool span{font-size:10px;opacity:.85}
.cd-tool:hover{background:rgba(255,255,255,.12)}
.cd-tool.active{
  background:linear-gradient(180deg,#2f7fd0,#1d5da0);
  border-color:#7cc6ff;
}

.cd-matinfo{
  font-size:11px;
  color:#9fb4cc;
  margin-bottom:9px;
  min-height:15px;
}

#cdGrid{
  display:block;
  width:100%;
  height:auto;
  max-width:340px;
  margin:0 auto 10px;
  background:#101823;
  border:1px solid rgba(255,255,255,.14);
  border-radius:10px;
  cursor:crosshair;
  touch-action:none;
}

.cd-stats{margin-bottom:10px}
.cd-statrow{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:center;
  font-size:11px;
  color:#9fb4cc;
}
.cd-statrow span{
  background:rgba(255,255,255,.05);
  border-radius:6px;
  padding:3px 8px;
}
.cd-hp{background:rgba(90,160,240,.16)!important;color:#9fd0ff;font-weight:700}
.cd-rate{font-weight:800;letter-spacing:.05em}
.cd-rate.good{background:rgba(70,200,130,.16);color:#7fe0a8}
.cd-rate.mid{background:rgba(240,190,70,.16);color:#f2d089}
.cd-rate.bad{background:rgba(240,90,90,.16);color:#ff9b9b}
.cd-warn{
  margin-top:7px;
  font-size:11px;
  color:#ffc0c0;
  background:rgba(220,70,70,.12);
  border:1px solid rgba(240,110,110,.25);
  border-radius:8px;
  padding:6px 9px;
  line-height:1.45;
}

/* build stamp on the start screen — small, unobtrusive, but always visible
   so a deploy can be confirmed at a glance */
.build-tag{
  margin-top:10px;
  font-size:10px;
  letter-spacing:.06em;
  color:rgba(200,216,235,.38);
  text-align:center;
  font-variant-numeric:tabular-nums;
  user-select:text;
}

/* ============================================================
   Mobile / touch refinements

   Found by auditing 7 device sizes in both orientations. The layout itself
   held up — no horizontal scroll, no overflow, no clipped panels — but a
   number of controls were below a reliable tap size, and some labels were
   below a comfortable reading size on a phone.
   ============================================================ */

/* Keyed on WIDTH, not `pointer: coarse`. A coarse-pointer query cannot be
   verified in a headless browser (it reports a fine pointer), so the rules
   would ship untested. Width is testable, and a narrow screen is the case
   that actually matters. The `pointer` query is kept as an additional
   trigger for touch laptops and tablets. */
@media (max-width: 900px), (max-height: 560px), (pointer: coarse) {
  /* A 6px-tall slider is very hard to grab. Keep the visible bar slim but
     enlarge the hit area with padding, and grow the thumb. */
  .sb-row input[type=range],
  .eb-brush input[type=range]{
    height:8px;
    padding:14px 0;              /* invisible, but tappable */
    background-clip:content-box; /* keeps the painted bar slim */
  }
  .sb-row input[type=range]::-webkit-slider-thumb,
  .eb-brush input[type=range]::-webkit-slider-thumb{
    width:24px;height:24px;
  }
  .sb-row input[type=range]::-moz-range-thumb,
  .eb-brush input[type=range]::-moz-range-thumb{
    width:22px;height:22px;
  }

  /* Icon buttons and weapon slots up to a comfortable tap size.
     `.wpn` carries `flex:0 0 38px`, which wins over plain width — the
     flex-basis has to be set too or the element never actually grows.
     Sizes are capped so the HUD row still fits a 320px screen: forcing
     44px pushed the pause button off the edge there. */
  .icon-btn{width:42px;height:42px;flex:0 0 42px}
  .wpn{width:44px;height:44px;flex:0 0 44px}
  /* shop buy buttons sat at 33px — under a reliable thumb target */
  .shop-buy{min-height:42px;padding-left:14px;padding-right:14px}
  .cd-tool{min-width:44px}

  /* checkboxes are a common miss on phones */
  .sb-check input{width:22px;height:22px}
  .sb-check{padding:3px 0}

  /* editor tools */
  .eb-tool,.cd-tool{min-height:52px}

  /* the squadron button is a real tap target too — measured at 38px, which
     is under the threshold the rest of the HUD already meets */
  .wing-btn{min-height:44px;padding:10px 14px}

  /* small buttons still need a real target */
  .btn.sm{padding:11px 15px}
  .sb-editor-btns .btn{padding:12px 10px}
}

/* Readability: several labels sat at 8–9px, which is uncomfortably small on
   a phone even with good eyesight. Nudge the smallest ones up. */
@media (max-width: 900px), (max-height: 560px) {
  .chip-label,#reloadLabel,.meta-k,.sb-group-title{font-size:10px}
  .ammo-label,.php-label{font-size:10px}
}

/* Respect the notch / home indicator on modern phones. `viewport-fit=cover`
   is already set, so without this the HUD can sit under the system UI. */
@supports (padding: max(0px)) {
  .hud-top{
    padding-top:max(8px, env(safe-area-inset-top));
    padding-left:max(8px, env(safe-area-inset-left));
    padding-right:max(8px, env(safe-area-inset-right));
  }
  .hud-bottom{
    padding-bottom:max(8px, env(safe-area-inset-bottom));
  }
  .panel{
    margin-top:max(0px, env(safe-area-inset-top));
    margin-bottom:max(0px, env(safe-area-inset-bottom));
  }
}

/* Stop iOS from bouncing the page behind the canvas, and kill text selection
   during drag-aiming (a long press otherwise pops the selection handles). */
html,body{
  overscroll-behavior:none;
  touch-action:manipulation;
}
#game{
  touch-action:none;             /* aiming drags must not scroll the page */
  -webkit-user-select:none;
  user-select:none;
}

/* The very narrowest phones (320px) cannot fit a 42px HUD row alongside the
   level/coin chips, so they keep the compact icon size. Verified: forcing
   42px here pushed #btnPause outside the viewport. */
@media (max-width: 400px) {
  /* Narrow phones cannot fit THREE 42px icons beside the level/coin chips.
     The threshold was 340px when there were two buttons; adding the
     fullscreen button pushed #btnPause off-screen at 360px, so it had to
     move up. The flex-basis must be set too or the element keeps whatever
     width the wider rule gave it. */
  .icon-btn{width:34px;height:34px;flex:0 0 34px}
  .hud-top{gap:4px}
  .hud-chip{padding:5px 7px}
}

/* ============================================================
   Short screens: keep the castles clear of the bottom HUD.

   On a 568px-tall phone (and any landscape phone) the weapon bar + ammo row
   + hp bar together claimed enough of the viewport that the camera could not
   lift the castles above them. Measured: the player's castle sat behind the
   SALVO/DMG row. Trimming the HUD gives the camera room to work.
   ============================================================ */
@media (max-height: 620px) {
  .hud-bottom{gap:4px;padding-bottom:calc(6px + env(safe-area-inset-bottom,0px))}
  .ammo-row{gap:6px}
  .ammo-box{padding:3px 8px}
  .ammo-val{font-size:15px}
  .reload-bar{height:8px}
  .reload-label{font-size:9px}
  .player-hp{gap:6px}
  .php-bar{height:8px}
  .wpn{width:38px;height:38px;flex:0 0 38px}
  .weapon-bar{gap:5px}
}

/* Landscape phones are the tightest case of all: very little height, and the
   weapon bar runs down the side rather than across the bottom. */
@media (max-height: 460px) and (orientation: landscape) {
  /* Landscape phones have the least height of any target, and the camera
     cannot lift the castles any further once the HUD claims this much of the
     viewport. Measured at 844x390: the castle sat 37px inside the HUD until
     the ammo row and hp bar were put on ONE line. */
  body.landscape .hud-bottom,
  .hud-bottom{flex-direction:row;flex-wrap:wrap;justify-content:center;align-items:center}
  body.landscape .ammo-row,
  .ammo-row{width:auto;flex:1 1 auto;max-width:60%}
  body.landscape .player-hp,
  .player-hp{width:auto;flex:1 1 190px;max-width:38%}
  /* `body.landscape .hud-bottom` sets its own padding and wins on
     specificity, so the compact rule has to match that weight. */
  body.landscape .hud-bottom,
  .hud-bottom{
    gap:3px;
    padding-bottom:calc(4px + env(safe-area-inset-bottom,0px));
  }
  .ammo-box{padding:2px 7px}
  .ammo-val{font-size:13px}
  .ammo-label{font-size:8.5px}
  .reload-bar{height:6px}
  .player-hp{gap:5px}
  .php-bar{height:6px}
  .php-label,.php-val{font-size:9px}
}

/* running low on rockets — the readout turns urgent */
.ammo-box.low .ammo-val{color:#ff8a6f}
.ammo-box.low{
  border-color:rgba(255,120,90,.45);
  animation:ammoPulse 1.1s ease-in-out infinite;
}
@keyframes ammoPulse{
  0%,100%{box-shadow:0 0 0 0 rgba(255,120,90,0)}
  50%{box-shadow:0 0 0 3px rgba(255,120,90,.18)}
}

/* stealth-bomber squadron button — sits beside the weapon bar */
.wing-btn{
  display:flex;
  align-items:center;
  gap:5px;
  padding:8px 12px;
  border-radius:13px;
  border:2px solid rgba(140,200,255,.4);
  background:linear-gradient(180deg,rgba(40,90,150,.9),rgba(24,56,96,.9));
  color:#eaf3ff;
  font-weight:800;
  cursor:pointer;
  box-shadow:0 3px 0 rgba(0,0,0,.3);
  align-self:center;
}
.wing-btn.hidden{display:none}
.wing-btn:active{transform:translateY(2px);box-shadow:0 1px 0 rgba(0,0,0,.3)}
.wing-btn.cooling{opacity:.45}
.wing-ico{font-size:17px;line-height:1}
.wing-count{font-size:13px;font-variant-numeric:tabular-nums}

/* Weapon buttons were oversized on phones once a seventh weapon arrived —
   the column ran into the play area. Smaller on narrow/short screens while
   staying a legitimate tap target. */
@media (max-width: 900px), (max-height: 620px) {
  .wpn{width:38px;height:38px;flex:0 0 38px;border-radius:11px}
  .weapon-bar{gap:4px}
  /* The icon is text directly on .wpn (no inner span), so size it here. */
  .wpn{font-size:16px}
  .wpn .wpn-ammo{font-size:9px;padding:0 3px}
}
@media (max-height: 460px) and (orientation: landscape) {
  .wpn{width:34px;height:34px;flex:0 0 34px;border-radius:10px}
  .weapon-bar{gap:3px}
}