:root {
  --gold: #ffcf4a;
  --gold-dim: #b07d12;
  --ink: #fff7e6;
  --panel: rgba(22, 14, 44, 0.86);
  --red: #ff3048;
  --blue: #3aa0ff;
  --cyan: #8fe6ff;
  --purple: #8a3dff;
  --hud-font: 'Baloo 2', 'Lato', system-ui, sans-serif; /* (Turkish letters look right in it) */
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
}
* { box-sizing: border-box; }
html, body {
  margin: 0; height: 100%; overflow: hidden; background: #1a1030; color: var(--ink);
  font-family: 'Lato', system-ui, sans-serif; overscroll-behavior: none;
  -webkit-tap-highlight-color: transparent; user-select: none; -webkit-user-select: none; touch-action: none;
}
canvas#gl { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }
.hidden { display: none !important; }
button { font: inherit; cursor: pointer; color: inherit; }
.s-red { color: var(--red); } .s-blue { color: var(--blue); } .s-cyan { color: var(--cyan); }

/* ---------------- overlays & menu ---------------- */
.overlay {
  position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; padding: 16px;
  background: radial-gradient(ellipse at 50% 30%, rgba(60, 30, 120, .55), rgba(10, 6, 24, .92)); z-index: 30;
  overflow-y: auto; touch-action: pan-y;
}
.card {
  width: min(470px, 100%); margin: auto; background: var(--panel); border: 2px solid rgba(255, 207, 74, .55);
  border-radius: 18px; padding: 24px 22px 20px; text-align: center;
  box-shadow: 0 16px 50px rgba(0, 0, 0, .55), inset 0 0 0 1px rgba(255, 255, 255, .06); backdrop-filter: blur(6px);
}
h1 {
  font-family: 'Cinzel Decorative', serif; font-weight: 900; margin: 0 0 6px; line-height: .95;
  font-size: clamp(2.1rem, 9vw, 3.2rem); color: var(--gold); letter-spacing: .02em;
  text-shadow: 0 3px 0 #6b3d00, 0 0 30px rgba(255, 207, 74, .45);
}
h1 span { font-family: var(--hud-font); font-weight: 800; color: #fff; font-size: 1.25em; letter-spacing: .06em; text-shadow: 0 4px 0 #8a1020, 0 0 24px rgba(255, 48, 72, .7); }
h2 { font-family: var(--hud-font); font-weight: 800; color: var(--gold); margin: 0 0 10px; font-size: 1.8rem; letter-spacing: .03em; }
.sub { margin: 0 0 16px; opacity: .85; }
.note { font-size: .86rem; opacity: .75; margin: 6px 0 10px; min-height: 1em; }
.note.trait { opacity: .92; margin: 4px 0 10px; }
.err { color: #ff8c8c; min-height: 1em; margin: 8px 0 0; font-size: .9rem; }
.field { display: block; text-align: left; margin: 0 0 14px; }
.field > span { display: block; font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; opacity: .75; margin-bottom: 6px; }
.field.inline > span { display: flex; justify-content: space-between; }
.field.check { display: flex; align-items: center; gap: 8px; }
.field.check > span { margin: 0; text-transform: none; letter-spacing: 0; font-size: .95rem; opacity: .9; }
input[type=text], input:not([type]) {
  width: 100%; padding: 11px 13px; border-radius: 10px; border: 2px solid rgba(255, 255, 255, .15);
  background: rgba(0, 0, 0, .35); color: var(--ink); font: inherit; font-size: 1.05rem; outline: none; user-select: text; -webkit-user-select: text;
}
input:focus { border-color: var(--gold); }
input[type=range] { width: 100%; accent-color: var(--gold); }
/* name and boy/girl share a row */
.nameRow { display: flex; gap: 10px; align-items: flex-start; margin-top: 24px; }
.nameRow > .field:first-child { flex: 1; min-width: 0; }
.nameRow > .gfield { flex: none; }
.nameRow #genderPick { width: 210px; }
.nameRow #genderPick .gbtn { height: 46px; padding: 0 4px; }
/* one-line labels and the same control height, so the name box and the boy/girl buttons line up */
.nameRow > .field > span { white-space: nowrap; }
.nameRow #nameInput { height: 46px; box-sizing: border-box; padding-top: 0; padding-bottom: 0; }
.nameRow > .field { margin-bottom: 0; }
@media (max-width: 420px) { .nameRow #genderPick { width: 168px; } .nameRow #genderPick .gbtn { font-size: .82rem; } }
#genderPick { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.gbtn { padding: 6px 4px; border-radius: 10px; border: 2px solid rgba(255, 255, 255, .25); background: rgba(0, 0, 0, .3); color: #fff; font: 700 .9rem 'Lato', sans-serif; cursor: pointer; opacity: .65; }
.gbtn.on { opacity: 1; border-color: var(--gold); box-shadow: 0 0 0 2px rgba(255, 207, 74, .45); }
.lhead { font: 900 .82rem 'Lato', sans-serif; color: var(--gold); margin-top: 4px; }
#houses { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.house.full { opacity: .25 !important; cursor: not-allowed; filter: grayscale(.7); }
.house.full b::after { content: ' · full'; font-size: .8em; }
.house { padding: 8px 2px 6px; border-radius: 10px; border: 2px solid transparent; font-weight: 700; font-size: .78rem; opacity: .6; transition: transform .12s, opacity .12s; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.house .crest { display: block; line-height: 0; filter: drop-shadow(0 2px 3px rgba(0,0,0,.45)); }
.house.g { background: linear-gradient(#c22a34, #7c1219); } .house.s { background: linear-gradient(#24955a, #0f4d2b); }
.house.r { background: linear-gradient(#2f5bc9, #142d6e); } .house.h { background: linear-gradient(#f0c22c, #a57a0c); color: #1a1405; }
.house.on { opacity: 1; border-color: #fff; transform: translateY(-2px); }
.btn {
  display: block; width: 100%; padding: 12px 16px; margin: 8px 0 0; border: none; border-radius: 12px;
  background: linear-gradient(#ffd75e, #e3a51b); color: #2a1600; font-family: var(--hud-font); font-weight: 800; font-size: 1.15rem; letter-spacing: .04em;
  box-shadow: 0 4px 0 #8a5a00, 0 8px 20px rgba(0, 0, 0, .3); transition: transform .08s, filter .1s;
}
.btn:hover { filter: brightness(1.07); }
.btn:active { transform: translateY(3px); box-shadow: 0 1px 0 #8a5a00; }
.btn.big { font-size: 1.4rem; padding: 14px; }
.btn.alt { background: linear-gradient(#8f6bff, #5b2fd6); color: #fff; box-shadow: 0 4px 0 #2e1380, 0 8px 20px rgba(0, 0, 0, .3); }
.btn.ghost { background: rgba(255, 255, 255, .08); color: var(--ink); box-shadow: none; font-size: 1rem; }
.btn.small { display: inline-block; width: auto; padding: 8px 14px; font-size: .95rem; margin: 0 4px; }
.btn:disabled { opacity: .45; cursor: default; filter: grayscale(.6); }
.more { text-align: left; margin-top: 12px; font-size: .92rem; }
.more summary { cursor: pointer; opacity: .8; padding: 4px 0; }
.howto p { margin: 6px 0; line-height: 1.35; }
.gtab { width: 100%; border-collapse: collapse; margin: 6px 0; font-size: .86rem; }
.gtab th { text-align: left; font-weight: 700; opacity: .7; padding: 2px 4px; }
.gtab td { padding: 3px 4px; border-top: 1px solid rgba(255, 255, 255, .1); vertical-align: top; }
.glist { margin: 4px 0; padding-left: 4px; list-style: none; }
.glist li { margin: 4px 0; line-height: 1.35; }
.end #endPlace { font-family: var(--hud-font); font-weight: 800; font-size: 4.4rem; color: var(--gold); line-height: 1; text-shadow: 0 4px 0 #6b3d00; }

/* ---------------- HUD ---------------- */
#hud { position: fixed; inset: 0; pointer-events: none; z-index: 10; font-family: var(--hud-font); font-weight: 800; }
.pill { background: rgba(10, 6, 30, .6); border: 1.5px solid rgba(255, 255, 255, .18); border-radius: 12px; padding: 6px 12px; color: #fff; text-shadow: 0 2px 0 rgba(0, 0, 0, .5); }
#minimap {
  position: absolute; top: calc(10px + var(--safe-t)); left: calc(10px + var(--safe-l)); width: 170px; height: 170px;
  border-radius: 14px; border: 2px solid rgba(255, 255, 255, .35); background: #213; box-shadow: 0 6px 18px rgba(0, 0, 0, .4);
}
#stormInfo { position: absolute; top: calc(186px + var(--safe-t)); left: calc(10px + var(--safe-l)); font-size: .95rem; min-width: 170px; text-align: center; }
#stormInfo.danger { background: rgba(120, 30, 200, .75); }
#topRight { position: absolute; top: calc(10px + var(--safe-t)); right: calc(10px + var(--safe-r)); display: flex; gap: 8px; align-items: center; }
.stat { font-size: 1.35rem; display: flex; align-items: center; gap: 6px; }
.stat .ico { font-size: 1.05rem; }
#pauseBtn { pointer-events: auto; font-size: 1.2rem; }
#killFeed { position: absolute; top: calc(58px + var(--safe-t)); right: calc(10px + var(--safe-r)); display: flex; flex-direction: column; align-items: flex-end; gap: 4px; font-family: 'Lato', sans-serif; font-weight: 700; font-size: .86rem; }
#killFeed div { background: rgba(10, 6, 30, .6); padding: 4px 10px; border-radius: 8px; animation: feedIn .25s ease-out; }
#killFeed .me { background: rgba(255, 180, 30, .55); }
#killFeed b { color: var(--gold); }
@keyframes feedIn { from { transform: translateX(30px); opacity: 0; } }

#crosshair { position: absolute; left: 50%; top: 50%; width: 0; height: 0; }
#crosshair i { position: absolute; background: #fff; box-shadow: 0 0 2px #000; border-radius: 2px; }
#crosshair i:nth-child(1) { width: 2px; height: 8px; left: -1px; top: -16px; }
#crosshair i:nth-child(2) { width: 2px; height: 8px; left: -1px; top: 8px; }
#crosshair i:nth-child(3) { width: 8px; height: 2px; left: -16px; top: -1px; }
#crosshair i:nth-child(4) { width: 8px; height: 2px; left: 8px; top: -1px; }
#crosshair b { position: absolute; width: 4px; height: 4px; left: -2px; top: -2px; background: #fff; border-radius: 50%; box-shadow: 0 0 3px #000; }
#crosshair.off { opacity: .35; }
#crosshair.free { opacity: 0; }
#crosshair.lock i, #crosshair.lock b { background: #ffd75e; }
#hitmarker { position: absolute; left: 50%; top: 50%; width: 30px; height: 30px; margin: -15px 0 0 -15px; opacity: 0;
  background:
    linear-gradient(45deg, transparent 45%, #fff 45%, #fff 55%, transparent 55%) ,
    linear-gradient(-45deg, transparent 45%, #fff 45%, #fff 55%, transparent 55%);
  -webkit-mask: radial-gradient(circle, transparent 5px, #000 6px); mask: radial-gradient(circle, transparent 5px, #000 6px); }
#hitmarker.show { animation: hitm .28s ease-out; }
#hitmarker.big { width: 40px; height: 40px; margin: -20px 0 0 -20px; }
/* where a hit came from: an arc round the crosshair, turned toward the caster */
#dmgDir { position: absolute; left: 50%; top: 50%; width: 260px; height: 260px; margin: -130px 0 0 -130px; pointer-events: none; opacity: 0; }
#dmgDir i { position: absolute; left: 50%; top: 0; width: 120px; height: 34px; margin-left: -60px; border-radius: 60px 60px 0 0 / 34px 34px 0 0;
  border-top: 7px solid rgba(255, 40, 60, .9); filter: drop-shadow(0 0 6px rgba(255, 40, 60, .8)); }
#dmgDir.show { animation: dmgDir 1.1s ease-out; }
@keyframes dmgDir { 0% { opacity: 1; } 60% { opacity: .8; } 100% { opacity: 0; } }
#hitmarker.kill { filter: drop-shadow(0 0 4px var(--red)) sepia(1) saturate(8) hue-rotate(-30deg); }
@keyframes hitm { 0% { opacity: 1; transform: scale(1.35); } 100% { opacity: 0; transform: scale(1); } }

#placeName { position: absolute; left: 0; right: 0; top: calc(86px + var(--safe-t)); text-align: center; font-family: 'Cinzel Decorative', serif; font-weight: 700; font-size: 1.15rem; color: #ffe7a8; text-shadow: 0 2px 4px rgba(0, 0, 0, .8); letter-spacing: .04em; opacity: 0; transition: opacity .6s; pointer-events: none; }
#placeName.show { opacity: 1; }
#placeName small { display: block; font-family: 'Lato', sans-serif; font-size: .78rem; color: #ffd0c0; letter-spacing: 0; }
body.touch #placeName { top: calc(70px + var(--safe-t)); font-size: .95rem; }
body.touch.portrait #placeName { top: calc(212px + var(--safe-t)); }
#banner { position: absolute; left: 0; right: 0; top: 24%; text-align: center; font-size: clamp(2rem, 7vw, 4rem); color: #fff; text-shadow: 0 4px 0 #3a1a80, 0 0 30px rgba(140, 80, 255, .7); opacity: 0; transition: opacity .25s; }
#banner.show { opacity: 1; animation: pop .35s ease-out; }
#subBanner { position: absolute; left: 0; right: 0; top: calc(24% + clamp(2.6rem, 9vw, 5rem)); text-align: center; font-size: clamp(1rem, 3.4vw, 1.5rem); color: var(--gold); text-shadow: 0 2px 0 #000; opacity: 0; transition: opacity .25s; }
#subBanner.show { opacity: 1; }
@keyframes pop { 0% { transform: scale(1.5); } 100% { transform: scale(1); } }
#dmgLayer { position: absolute; inset: 0; overflow: hidden; }
.dmg { position: absolute; font-size: 1.6rem; color: #fff; text-shadow: 0 2px 0 #000, 0 0 6px rgba(0, 0, 0, .6); transform: translate(-50%, -50%); will-change: transform, opacity; }
.dmg.crit { color: #ffd23a; font-size: 2rem; }
.dmg.blk { color: var(--cyan); font-size: 1.2rem; }
.dmg.head { color: #ffd23a; font-size: 2.5rem; font-weight: 900; letter-spacing: .02em; text-shadow: 0 3px 0 #6a3a00, 0 0 14px rgba(255, 200, 40, .9); }
#hitmarker.head { filter: drop-shadow(0 0 6px #ffd23a) sepia(1) saturate(9) hue-rotate(5deg); }
#hurtFlash { position: absolute; inset: 0; opacity: 0; background: radial-gradient(ellipse at center, transparent 45%, rgba(255, 0, 30, .55)); transition: opacity .35s; }
#stormVignette { position: absolute; inset: 0; opacity: 0; background: radial-gradient(ellipse at center, rgba(120, 40, 220, .15) 30%, rgba(110, 20, 200, .7)); transition: opacity .4s; }

#bottom { position: absolute; left: 0; right: 0; bottom: calc(12px + var(--safe-b)); display: flex; flex-direction: column; align-items: center; gap: 8px; }
#statusChips { display: flex; gap: 6px; min-height: 26px; }
.chip { padding: 3px 10px; border-radius: 10px; font-size: .95rem; background: rgba(10, 6, 30, .65); border: 1.5px solid currentColor; }
.chip.da { color: #ff9a3a; } .chip.sh { color: var(--cyan); } .chip.inv { color: #c9d6ff; } .chip.sp { color: #ffb15a; } .chip.storm { color: #c08cff; } .chip.roar { color: #ffd23a; text-shadow: 0 0 8px rgba(255,190,40,0.8); }
#hpWrap { display: flex; align-items: center; gap: 10px; }
#hpBar { position: relative; width: min(360px, 60vw); height: 22px; border-radius: 6px; background: rgba(0, 0, 0, .55); border: 2px solid rgba(255, 255, 255, .5); overflow: hidden; transform: skewX(-12deg); }
#hpFill { position: absolute; inset: 0; width: 100%; background: linear-gradient(#7dff9a, #22c05a); transition: width .15s; z-index: 2; }
#hpFill.mid { background: linear-gradient(#ffe36a, #e0a316); } #hpFill.low { background: linear-gradient(#ff7a7a, #d11a2a); }
#hpGhost { position: absolute; inset: 0; width: 100%; background: #fff; transition: width .6s .25s; z-index: 1; }
#hpText { font-size: 1.6rem; min-width: 52px; text-shadow: 0 2px 0 #000; }
#slots { display: flex; gap: 8px; }
.slot { position: relative; width: 74px; height: 74px; border-radius: 12px; background: rgba(10, 6, 30, .7); border: 2px solid rgba(255, 255, 255, .3); overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.slot .glyph { font-size: 1.9rem; line-height: 1; }
.slot .nm { font-size: .62rem; font-family: 'Lato', sans-serif; font-weight: 900; letter-spacing: .02em; opacity: .9; margin-top: 3px; white-space: nowrap; }
.slot.item .nm { white-space: normal; text-align: center; line-height: 1.05; padding: 0 4px; max-height: 2.2em; overflow: hidden; } /* "Invisibility Cloak" on two lines */
.slot .key { position: absolute; top: 3px; left: 5px; font-size: .62rem; opacity: .7; font-family: 'Lato', sans-serif; font-weight: 900; }
.slot .cd { position: absolute; inset: 0; background: conic-gradient(rgba(0, 0, 0, .72) var(--p, 0%), transparent 0); pointer-events: none; }
.slot .cdt { position: absolute; font-size: 1.5rem; text-shadow: 0 2px 0 #000; }
.slot.ready { border-color: rgba(255, 255, 255, .7); }
.slot.flash { animation: slotFlash .25s; }
.slot.locked { border-color: #ff9a3a; }
.slot.locked::after { content: '✕'; position: absolute; font-size: 2.6rem; color: #ff9a3a; opacity: .8; }
.slot.item.has { border-color: var(--gold); box-shadow: 0 0 12px rgba(255, 207, 74, .4); }
@keyframes slotFlash { 0% { transform: scale(.88); } 100% { transform: scale(1); } }

/* ---------------- touch controls ---------------- */
#touch { position: fixed; inset: 0; z-index: 9; pointer-events: none; }
#stickZone { position: absolute; left: 0; bottom: 0; width: 45%; height: 70%; pointer-events: auto; }
#lookZone { position: absolute; right: 0; top: 0; width: 55%; height: 100%; pointer-events: auto; }
#stickBase { position: absolute; width: 120px; height: 120px; margin: -60px 0 0 -60px; border-radius: 50%; background: rgba(255, 255, 255, .12); border: 2px solid rgba(255, 255, 255, .3); left: 90px; top: calc(100% - 110px); }
#stickKnob { position: absolute; left: 50%; top: 50%; width: 54px; height: 54px; margin: -27px 0 0 -27px; border-radius: 50%; background: rgba(255, 255, 255, .55); }
.tbtn { position: absolute; pointer-events: auto; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .5); background: rgba(10, 6, 30, .55); color: #fff; font-family: var(--hud-font); font-weight: 800; display: flex; align-items: center; justify-content: center; touch-action: none; }
.tbtn span { pointer-events: none; }
button, .btn, select, label, input { touch-action: manipulation; } /* (no double-tap zoom on controls) */
.tbtn, #stickBase { scale: var(--tscale, 1); }
.tbtn::after { content: ''; position: absolute; inset: -2px; border-radius: 50%; background: conic-gradient(rgba(0, 0, 0, .62) var(--p, 0%), transparent 0); pointer-events: none; }
.tbtn.locked { border-color: #ff9a3a !important; opacity: .6; }
.tbtn:active, .tbtn.down { background: rgba(255, 255, 255, .3); }
#tFire { width: 84px; height: 84px; right: calc(30px + var(--safe-r)); bottom: calc(150px + var(--safe-b)); font-size: 2.2rem; color: var(--red); border-color: var(--red); }
#tExpel { width: 62px; height: 62px; right: calc(128px + var(--safe-r)); bottom: calc(196px + var(--safe-b)); font-size: 1.7rem; color: var(--blue); border-color: var(--blue); }
#tShield { width: 62px; height: 62px; right: calc(124px + var(--safe-r)); bottom: calc(122px + var(--safe-b)); font-size: 1.7rem; color: var(--cyan); border-color: var(--cyan); }
#tJump { width: 62px; height: 62px; right: calc(40px + var(--safe-r)); bottom: calc(60px + var(--safe-b)); font-size: 1.7rem; }
#tItem { width: 54px; height: 54px; right: calc(116px + var(--safe-r)); bottom: calc(52px + var(--safe-b)); font-size: 1.5rem; border-color: var(--gold); }
#tSprint { width: 50px; height: 50px; left: calc(16px + var(--safe-l)); bottom: calc(196px + var(--safe-b)); font-size: 1.5rem; }
#tSprint.on { background: rgba(255, 207, 74, .5); }

body.touch #slots .key { display: none; }
body.touch #bottom { left: 0; right: auto; align-items: flex-start; padding-left: calc(10px + var(--safe-l)); bottom: calc(6px + var(--safe-b)); }
body.touch #slots { display: none; }
body.touch #hpBar { width: 34vw; height: 16px; }
body.touch #hpText { font-size: 1.15rem; }
body.touch #minimap { width: 110px; height: 110px; }
body.touch #stormInfo { top: calc(126px + var(--safe-t)); min-width: 110px; font-size: .78rem; padding: 4px 8px; }
body.touch .stat { font-size: 1.1rem; }
body.touch #killFeed { font-size: .72rem; }
body.touch #crosshair i:nth-child(1) { top: -13px; } body.touch #crosshair i:nth-child(2) { top: 5px; }
body.touch #crosshair i:nth-child(3) { left: -13px; } body.touch #crosshair i:nth-child(4) { left: 5px; }
@media (max-height: 460px) {
  body.touch #stickBase { top: calc(100% - 90px); }
  #tFire { bottom: calc(110px + var(--safe-b)); }
  #tExpel { bottom: calc(150px + var(--safe-b)); }
  #tShield { bottom: calc(84px + var(--safe-b)); }
  #tJump { bottom: calc(24px + var(--safe-b)); }
  #tItem { bottom: calc(18px + var(--safe-b)); }
  #tSprint { bottom: calc(140px + var(--safe-b)); }
  .card { padding: 14px 16px; }
  h1 { font-size: 1.9rem; }
}

/* ---------------- Castle Cup ---------------- */
#duelBar { position: absolute; top: calc(10px + var(--safe-t)); left: 50%; transform: translateX(-50%); display: flex; gap: 10px; align-items: center;
  padding: 6px 14px; border-radius: 14px; background: var(--panel); border: 2px solid rgba(255, 207, 74, .55); font-family: var(--hud-font); font-weight: 800; white-space: nowrap; }
#duelBar .d-name { font-size: 1.05rem; max-width: 9em; overflow: hidden; text-overflow: ellipsis; }
#duelBar .d-score { font-size: 1.5rem; color: var(--gold); }
#duelBar small { font: 700 .72rem 'Lato', sans-serif; opacity: .7; }
#duelBtn small { font-weight: 400; opacity: .75; margin-left: 4px; }
body.touch #duelBar { transform: translateX(-50%) scale(.82); transform-origin: top center; }
#cupBar { position: absolute; top: calc(10px + var(--safe-t)); left: 50%; transform: translateX(-50%); display: flex; gap: 6px; align-items: center; }
.hp-house { display: flex; align-items: center; gap: 6px; padding: 4px 10px 4px 4px; border-radius: 12px; border: 2px solid rgba(255, 255, 255, .25); font-size: 1.2rem; min-width: 74px; }
.hp-house span { width: 22px; height: 26px; display: block; line-height: 0; filter: drop-shadow(0 1px 2px rgba(0,0,0,.5)); }
.hp-house.g { background: linear-gradient(#c22a34, #7c1219); } .hp-house.s { background: linear-gradient(#24955a, #0f4d2b); }
.hp-house.r { background: linear-gradient(#2f5bc9, #142d6e); } .hp-house.h { background: linear-gradient(#f0c22c, #a57a0c); color: #1a1405; }
.hp-house.mine { border-color: #fff; box-shadow: 0 0 12px rgba(255, 255, 255, .5); }
.hp-house.lead b::after { content: ' 🏆'; font-size: .8em; }
#roundTime { font-size: 1rem; }
#zoneStrip { position: absolute; top: calc(52px + var(--safe-t)); left: 50%; transform: translateX(-50%); display: flex; gap: 5px; }
.zchip { position: relative; padding: 3px 9px; border-radius: 9px; font-family: 'Lato', sans-serif; font-weight: 900; font-size: .72rem; color: #fff; background: rgba(10, 6, 30, .7); border: 2px solid rgba(255, 255, 255, .3); overflow: hidden; white-space: nowrap; }
.zchip i { position: absolute; left: 0; bottom: 0; height: 3px; background: #fff; }
.zchip.contested { animation: zpulse .5s infinite alternate; }
@keyframes zpulse { to { border-color: #fff; } }
#watchBar { position: absolute; left: 50%; top: 14%; transform: translateX(-50%); padding: 6px 14px; border-radius: 10px; background: rgba(10,6,30,.72); color: #fff; font-size: 15px; white-space: nowrap; max-width: 92vw; overflow: hidden; text-overflow: ellipsis; }
#capBar { position: absolute; left: 50%; top: 62%; transform: translateX(-50%); text-align: center; width: min(320px, 70vw); }
#capLabel { font-size: 1.05rem; text-shadow: 0 2px 0 #000; margin-bottom: 4px; }
#capTrack { height: 12px; border-radius: 6px; background: rgba(0, 0, 0, .55); border: 2px solid rgba(255, 255, 255, .5); overflow: hidden; }
#capFill { height: 100%; width: 0; background: #fff; transition: width .15s; }
#chatLog { position: absolute; left: calc(10px + var(--safe-l)); bottom: calc(200px + var(--safe-b)); width: min(380px, 45vw); display: flex; flex-direction: column; gap: 2px; font-family: 'Lato', sans-serif; font-size: .9rem; }
#chatLog div { background: rgba(10, 6, 30, .55); padding: 3px 8px; border-radius: 7px; transition: opacity 1s; word-wrap: break-word; }
#chatLog div.old { opacity: 0; }
#chatLog.open div { opacity: 1 !important; }
#chatLog b { font-weight: 900; }
#chatBtn { position: absolute; left: calc(10px + var(--safe-l)); bottom: calc(86px + var(--safe-b)); pointer-events: auto; padding: 6px 12px; border-radius: 10px; border: 2px solid rgba(255, 255, 255, .3); background: rgba(10, 6, 30, .6); color: #fff; font: 700 .9rem 'Lato', sans-serif; cursor: pointer; white-space: nowrap; }
#chatBtn kbd { margin-left: 4px; padding: 1px 6px; border-radius: 5px; background: rgba(255, 255, 255, .18); font: inherit; font-size: .75rem; }
#chatBtn:hover { background: rgba(60, 40, 120, .8); }
body.chatting #chatBtn, body.touch #chatBtn { display: none; }
#quickChat { position: absolute; left: calc(10px + var(--safe-l)); bottom: calc(128px + var(--safe-b)); display: flex; flex-wrap: wrap; gap: 5px; max-width: min(420px, 60vw); pointer-events: auto; }
#quickChat button { padding: 5px 9px; border-radius: 8px; border: 1px solid rgba(255, 255, 255, .3); background: rgba(10, 6, 30, .75); color: #fff; font: 700 .82rem 'Lato', sans-serif; cursor: pointer; }
#quickChat kbd { opacity: .6; margin-right: 4px; }
body.touch #quickChat { bottom: auto; top: calc(172px + var(--safe-t)); left: calc(162px + var(--safe-l)); }
body.touch.portrait #quickChat { top: calc(248px + var(--safe-t)); }
#chatInput { position: absolute; left: calc(10px + var(--safe-l)); bottom: calc(86px + var(--safe-b)); width: min(380px, 30vw); min-width: 220px; pointer-events: auto; font-size: 1rem; padding: 8px 10px; }
#scoreboard { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(720px, 94vw); max-height: 80vh; overflow: auto; background: rgba(14, 9, 32, .9); border: 2px solid rgba(255, 207, 74, .5); border-radius: 16px; padding: 14px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; font-family: 'Lato', sans-serif; pointer-events: auto; }
#scoreboard h3 { margin: 0 0 6px; font-family: var(--hud-font); font-weight: 800; font-size: 1.2rem; }
#scoreboard table { width: 100%; border-collapse: collapse; font-size: .85rem; }
#scoreboard td { padding: 2px 4px; }
#scoreboard td:not(:first-child) { text-align: right; width: 34px; opacity: .85; }
#scoreboard tr.me td { color: var(--gold); font-weight: 900; }
#tChat { width: 42px; height: 42px; left: calc(12px + var(--safe-l)); top: calc(128px + var(--safe-t)); font-size: 1.1rem; }
#tScore { width: 42px; height: 42px; left: calc(62px + var(--safe-l)); top: calc(128px + var(--safe-t)); font-size: 1.1rem; }
body.touch #chatLog { bottom: auto; top: calc(178px + var(--safe-t)); width: 40vw; font-size: .75rem; }
body.touch #chatInput { bottom: auto; top: calc(128px + var(--safe-t)); left: calc(162px + var(--safe-l)); width: 50vw; } /* right of the 💬 🏆 🎙 buttons */
body.touch #cupBar { transform: translateX(-50%) scale(.82); transform-origin: top center; }
body.touch #zoneStrip { top: calc(44px + var(--safe-t)); transform: translateX(-50%) scale(.85); transform-origin: top center; }
body.touch #roundTime { display: none; }
body.cup #stormInfo { display: none; }
@media (max-width: 760px) { .zchip { font-size: .6rem; padding: 2px 6px; } .hp-house { min-width: 0; font-size: 1rem; } }
@media (max-height: 460px) {
  body.touch #chatLog { top: calc(176px + var(--safe-t)); max-height: 30vh; overflow: hidden; }
}

/* ---------------- leaderboards ---------------- */
#menuBoard { margin: 14px 0 4px; text-align: left; background: rgba(0, 0, 0, .28); border-radius: 12px; padding: 10px 12px; }
#menuBoard .mb-title { font-family: var(--hud-font); font-weight: 800; color: var(--gold); font-size: 1.05rem; margin-bottom: 6px; display: flex; justify-content: space-between; }
#menuBoard .mb-title span { font-family: 'Lato', sans-serif; font-size: .78rem; opacity: .75; align-self: center; }
.mb-houses { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; margin-bottom: 8px; }
.mb-houses div { border-radius: 8px; padding: 3px 0; text-align: center; font-family: var(--hud-font); font-weight: 800; font-size: 1rem; display: flex; align-items: center; justify-content: center; gap: 4px; }
.mb-houses img { width: 16px; height: 19px; }
.mb-top { margin: 0; padding: 0; list-style: none; font-size: .9rem; }
.mb-top li { padding: 1px 0; display: flex; justify-content: space-between; gap: 8px; }
.mb-top .dot, #leader .dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 6px; vertical-align: 1px; }
#leader { position: absolute; top: calc(190px + var(--safe-t)); left: calc(10px + var(--safe-l)); width: 170px; background: rgba(10, 6, 30, .6); border: 1.5px solid rgba(255, 255, 255, .18); border-radius: 12px; padding: 6px 9px; font-family: 'Lato', sans-serif; font-size: .8rem; }
#leader h4 { margin: 0 0 3px; font-family: var(--hud-font); font-weight: 800; font-size: .9rem; color: var(--gold); letter-spacing: .03em; }
#leader div { display: flex; justify-content: space-between; gap: 6px; white-space: nowrap; overflow: hidden; padding: 1px 0; transition: background .3s; }
#leader div span:first-child { overflow: hidden; text-overflow: ellipsis; }
#leader div.me { color: var(--gold); font-weight: 900; }
#leader div.sep { border-top: 1px dashed rgba(255, 255, 255, .25); margin-top: 2px; padding-top: 2px; }
body.touch #leader { top: calc(52px + var(--safe-t)); left: auto; right: calc(10px + var(--safe-r)); width: 140px; font-size: .68rem; padding: 4px 7px; }
body.touch #leader h4 { font-size: .75rem; }
body.touch #killFeed { top: calc(150px + var(--safe-t)); }
body.touch #killFeed div:nth-child(n+3) { display: none; }

/* ---------------- music picker, clock ---------------- */
.songSel { width: 100%; padding: 8px 10px; border-radius: 10px; border: 2px solid rgba(255, 255, 255, .15); background: rgba(0, 0, 0, .35); color: var(--ink); font: inherit; font-size: .95rem; }
.music-pick, .bot-pick, .map-pick, .rule-pick { margin: 12px 0 0; }
.bot-pick > span, .map-pick > span, .rule-pick > span { margin-bottom: 4px; }
.music-pick > span { margin-bottom: 4px; }
#clock { font-size: .95rem; padding: 6px 10px; white-space: nowrap; }
body.touch #clock { font-size: .75rem; padding: 4px 7px; }
.sb-crest { width: 18px; height: 22px; vertical-align: -5px; }

/* ---------------- phones held upright ---------------- */
body.touch.portrait #cupBar { top: calc(6px + var(--safe-t)); transform: translateX(-50%) scale(.8); }
body.touch.portrait #zoneStrip { top: calc(46px + var(--safe-t)); width: 100vw; flex-wrap: wrap; justify-content: center; row-gap: 3px; transform: translateX(-50%) scale(.95); }
body.touch.portrait #minimap { top: calc(98px + var(--safe-t)); width: 96px; height: 96px; }
body.touch.portrait #stormInfo { top: calc(200px + var(--safe-t)); min-width: 96px; }
body.touch.portrait #topRight { top: calc(98px + var(--safe-t)); transform: scale(.85); transform-origin: top right; }
body.touch.portrait #leader { top: calc(140px + var(--safe-t)); width: 132px; }
body.touch.portrait #tChat, body.touch.portrait #tScore { top: calc(204px + var(--safe-t)); }
body.touch.portrait #chatInput { top: calc(204px + var(--safe-t)); width: calc(100vw - 172px); }
body.touch.portrait #chatLog { top: calc(254px + var(--safe-t)); width: 62vw; max-height: 24vh; overflow: hidden; }
body.touch.portrait #killFeed { top: calc(232px + var(--safe-t)); }
body.touch.portrait #hpBar { width: 40vw; }
body.touch.portrait #capBar { top: 54%; }
body.touch.portrait #banner { top: 30%; }
body.touch.portrait #subBanner { top: calc(30% + clamp(2.6rem, 9vw, 5rem)); }

/* ---------------- the castle map (M, or tap the minimap) ---------------- */
#minimap { pointer-events: auto; cursor: pointer; }
#bigMap { position: fixed; inset: 0; z-index: 12; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; background: rgba(10, 6, 30, .55); pointer-events: auto; }
#bigMap canvas { width: min(92vw, 76vh); height: min(92vw, 76vh); border-radius: 16px; border: 2px solid rgba(255, 255, 255, .35); box-shadow: 0 10px 40px rgba(0, 0, 0, .6); }
#bigMapClose { width: auto; padding: 8px 28px; margin: 0; }
#bigMap .bm-hint { font-family: 'Lato', sans-serif; font-size: .85rem; color: #e8e0f8; opacity: .8; }

/* ---------------- house voice chat ---------------- */
#talkBtn { position: absolute; left: calc(10px + var(--safe-l)); bottom: calc(124px + var(--safe-b)); pointer-events: auto; padding: 6px 12px; border-radius: 10px; border: 2px solid rgba(255, 255, 255, .3); background: rgba(10, 6, 30, .6); color: #fff; font: 700 .9rem 'Lato', sans-serif; cursor: pointer; touch-action: none; }
#talkBtn kbd { margin-left: 4px; padding: 1px 6px; border-radius: 5px; background: rgba(255, 255, 255, .18); font: inherit; font-size: .75rem; }
#pingBtn { position: absolute; left: calc(10px + var(--safe-l)); bottom: calc(162px + var(--safe-b)); pointer-events: auto; padding: 6px 12px; border-radius: 10px; border: 2px solid rgba(255, 255, 255, .3); background: rgba(10, 6, 30, .6); color: #fff; font: 700 .9rem 'Lato', sans-serif; cursor: pointer; }
#pingBtn kbd { margin-left: 4px; padding: 1px 6px; border-radius: 5px; background: rgba(255, 255, 255, .18); font: inherit; font-size: .75rem; }
body.chatting #pingBtn, body.touch #pingBtn { display: none; }
#tPing { width: 42px; height: 42px; left: calc(162px + var(--safe-l)); top: calc(128px + var(--safe-t)); font-size: 1.1rem; }
body.touch.portrait #tPing { top: calc(204px + var(--safe-t)); }
#talkBtn.on, #tTalk.on { background: rgba(80, 200, 120, .75); border-color: #7dff9a; }
body.chatting #talkBtn, body.touch #talkBtn { display: none; }
#tTalk { width: 42px; height: 42px; left: calc(112px + var(--safe-l)); top: calc(128px + var(--safe-t)); font-size: 1.1rem; }
body.touch.portrait #tTalk { top: calc(204px + var(--safe-t)); }
/* who is talking: on the right, clear of the chat log on the left */
#voiceBar { position: absolute; right: calc(10px + var(--safe-r)); bottom: calc(124px + var(--safe-b)); display: flex; flex-direction: column; align-items: flex-end; gap: 3px; font: 700 .85rem 'Lato', sans-serif; pointer-events: none; }
#voiceBar div { background: rgba(20, 60, 30, .7); border: 1.5px solid rgba(125, 255, 154, .6); border-radius: 8px; padding: 2px 8px; color: #e8ffe8; animation: feedIn .2s ease-out; }
body.touch #voiceBar { bottom: auto; top: calc(132px + var(--safe-t)); font-size: .72rem; } /* under the leaderboard, above the spell buttons */
body.touch.portrait #voiceBar { top: calc(292px + var(--safe-t)); } /* under the kill feed */

#houseList { margin: 6px 0 10px; font-family: 'Lato', sans-serif; font-size: .9rem; }
#houseList h5 { margin: 0 0 4px; font-size: .8rem; letter-spacing: .06em; text-transform: uppercase; opacity: .7; }
#houseList div { display: flex; justify-content: space-between; align-items: center; padding: 3px 0; border-bottom: 1px solid rgba(255, 255, 255, .08); }
#houseList button { padding: 3px 10px; border-radius: 8px; border: 1.5px solid rgba(255, 255, 255, .3); background: rgba(0, 0, 0, .3); color: #fff; font: 700 .8rem 'Lato', sans-serif; cursor: pointer; }
#houseList button.muted { background: rgba(200, 60, 60, .6); border-color: #ff8a8a; }

/* ---------------- phones held sideways ---------------- */
#fsBtn { pointer-events: auto; line-height: 0; display: flex; align-items: center; justify-content: center; }
#fsBtn svg { display: block; }
body:not(.touch) #fsBtn { display: none; } /* the mouse is locked while playing: desktops use the pause menu or F11 */
body.touch #fsBtn { padding: 6px 8px; }
/* the menu: a smaller logo and crests so Play shows without scrolling */
@media (max-height: 500px) and (min-aspect-ratio: 1/1) {
  #menu .card { width: min(560px, 100%); }
  #menu h1.logo { font-size: clamp(1.6rem, 7vw, 2.2rem); }
  #menu .sub { margin-bottom: 8px; font-size: .9rem; }
  #menu .field { margin-bottom: 8px; }
  #menu input { padding: 8px 12px; }
  .house { flex-direction: row; justify-content: center; padding: 5px 4px; gap: 6px; }
  .house .crest canvas { width: 32px !important; height: 39px !important; }
  .btn.big { padding: 10px; font-size: 1.25rem; }
}
/* the HUD: everything keeps clear of the thumbs' buttons */
body.touch.cup:not(.portrait) #topRight .stat:first-child { display: none; } /* wizard count: the Cup always fills the castle */
/* the stun count would sit on top of the places strip on a phone: it's on the scoreboard too */
@media (max-width: 940px) { body.touch.cup:not(.portrait) #topRight .stat:nth-child(2) { display: none; } }
body.touch:not(.portrait) #killFeed { top: calc(98px + var(--safe-t)); right: auto; left: 50%; transform: translateX(-50%); align-items: center; }
body.touch:not(.portrait) #placeName { top: calc(64px + var(--safe-t)); }
@media (max-width: 760px) {
  body.touch:not(.portrait) #topRight { gap: 5px; }
  body.touch:not(.portrait) #cupBar { transform: translateX(-50%) scale(.72); left: calc(50% - 30px); }
  body.touch:not(.portrait) #zoneStrip { transform: translateX(-50%) scale(.78); left: calc(50% - 30px); top: calc(38px + var(--safe-t)); }
}
@media (max-height: 360px) {
  body.touch:not(.portrait) #leader { display: none; } /* 🏆 shows the full scoreboard */
  body.touch:not(.portrait) #voiceBar { top: calc(52px + var(--safe-t)); }
}
@media (max-width: 620px) {
  body.touch:not(.portrait) .stat .ico { display: none; }
}
@media (max-height: 400px) {
  body.touch:not(.portrait) #minimap { width: 92px; height: 92px; }
  body.touch:not(.portrait) #tChat, body.touch:not(.portrait) #tScore, body.touch:not(.portrait) #tTalk { width: 38px; height: 38px; top: calc(108px + var(--safe-t)); font-size: 1rem; }
  body.touch:not(.portrait) #tScore { left: calc(56px + var(--safe-l)); }
  body.touch:not(.portrait) #tTalk { left: calc(100px + var(--safe-l)); }
  body.touch:not(.portrait) #tPing { width: 38px; height: 38px; top: calc(108px + var(--safe-t)); font-size: 1rem; left: calc(144px + var(--safe-l)); }
  body.touch:not(.portrait) #chatInput { top: calc(108px + var(--safe-t)); left: calc(146px + var(--safe-l)); }
  body.touch:not(.portrait) #chatLog { top: calc(152px + var(--safe-t)); }
  body.touch:not(.portrait) #tSprint { left: calc(160px + var(--safe-l)); bottom: calc(96px + var(--safe-b)); }
  body.touch:not(.portrait) #killFeed div:nth-child(n+2) { display: none; }
}
/* narrow desktop windows: a shorter health bar, the house buttons without their keys */
@media (max-width: 1020px) {
  body:not(.touch) #chatBtn kbd, body:not(.touch) #talkBtn kbd { display: none; }
  body:not(.touch) #pingBtn kbd { display: none; }
  body:not(.touch) #hpBar { width: 26vw; }
  body.cup:not(.touch) #topRight .stat:first-child { display: none; }
  body:not(.touch) #cupBar { transform: translateX(-50%) scale(.8); transform-origin: top center; left: calc(50% - 50px); }
  body:not(.touch) #zoneStrip { top: calc(48px + var(--safe-t)); left: calc(50% - 50px); }
}

/* ---------------- loading bar ---------------- */
.loadBar { height: 14px; margin: 14px 4px 4px; border-radius: 8px; background: rgba(0, 0, 0, .45); border: 2px solid rgba(255, 207, 74, .5); overflow: hidden; }
.loadBar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #e3a51b, #ffd75e); box-shadow: 0 0 12px rgba(255, 207, 74, .6); transition: width .25s ease-out; }

/* what the held item does */
#itemInfo { font: 700 .82rem 'Lato', sans-serif; color: #fff4d0; background: rgba(10, 6, 30, .65); border: 1.5px solid rgba(255, 207, 74, .6); border-radius: 9px; padding: 3px 10px; max-width: 420px; text-align: center; }
body.touch #itemInfo { position: fixed; right: calc(178px + var(--safe-r)); bottom: calc(60px + var(--safe-b)); max-width: 30vw; font-size: .68rem; text-align: right; }
@media (max-height: 460px) { body.touch #itemInfo { bottom: calc(22px + var(--safe-b)); } }

/* desktop: a bigger minimap of the whole castle, never so big it meets the chat */
body:not(.touch) #minimap { width: min(260px, 38vh); height: min(260px, 38vh); }
body:not(.touch) #leader { top: calc(min(260px, 38vh) + 20px + var(--safe-t)); }
body:not(.touch) #stormInfo { top: calc(min(260px, 38vh) + 16px + var(--safe-t)); min-width: min(260px, 38vh); }

/* ---------------- admin panel ---------------- */
.card.wide { width: min(760px, 100%); text-align: left; }
.card.wide h2, .card.wide .sub { text-align: center; }
#adminForm { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; margin: 6px 0; }
#adminForm fieldset { border: 1.5px solid rgba(255, 207, 74, .35); border-radius: 10px; padding: 6px 10px 8px; margin: 0; }
#adminForm legend { font-family: var(--hud-font); font-weight: 800; color: var(--gold); padding: 0 6px; }
.adm { display: grid; grid-template-columns: 1fr 76px; align-items: center; gap: 2px 8px; margin: 4px 0; font-size: .85rem; }
.adm input { width: 76px; padding: 4px 6px; border-radius: 6px; border: 1.5px solid rgba(255, 255, 255, .2); background: rgba(0, 0, 0, .35); color: var(--ink); font: inherit; user-select: text; -webkit-user-select: text; }
.adm small { grid-column: 1 / -1; opacity: .5; font-size: .7rem; margin-top: -3px; }
.adm.changed span { color: var(--gold); font-weight: 700; }
#adminActions { display: flex; gap: 8px; }
#adminActions .btn { margin-top: 4px; }

/* a rare spell in a slot: gold */
.slot.rare { border-color: #ffd23a !important; box-shadow: 0 0 16px rgba(255, 210, 58, .7); background: rgba(60, 40, 0, .75); }
.slot.rare .nm { color: #ffe680; }
.tbtn.rare { border-color: #ffd23a !important; box-shadow: 0 0 14px rgba(255, 210, 58, .8); }

/* ---------------- training ground ---------------- */
#trainPanel { position: absolute; right: calc(10px + var(--safe-r)); top: calc(64px + var(--safe-t)); width: 250px; pointer-events: auto; background: rgba(10, 6, 30, .78); border: 1.5px solid rgba(255, 207, 74, .5); border-radius: 12px; padding: 8px 10px; font: 700 .78rem 'Lato', sans-serif; }
#trainPanel h4 { margin: 0 0 6px; font-family: var(--hud-font); font-weight: 800; color: var(--gold); font-size: .95rem; }
#trainPanel button { pointer-events: auto; margin: 2px; padding: 4px 7px; border-radius: 7px; border: 1.5px solid rgba(255, 255, 255, .25); background: rgba(0, 0, 0, .35); color: #fff; font: 700 .74rem 'Lato', sans-serif; cursor: pointer; }
#trainPanel button.on { background: rgba(255, 207, 74, .45); border-color: var(--gold); }
#trainPanel kbd { font: inherit; opacity: .6; margin-left: 2px; }
.tp-spells { display: flex; flex-wrap: wrap; }
.tp-row { display: flex; flex-wrap: wrap; align-items: center; margin-top: 4px; }
.tp-row > span { margin-right: 4px; opacity: .8; }
.tp-hint { margin: 6px 0 0; font-weight: 400; opacity: .65; font-size: .7rem; }
body.training #leader, body.training #killFeed { display: none; }
/* on a phone: open, it sits at the top in the middle (clear of the joystick and the spell buttons) and
   folds into a small title button under the menu */
body.touch #trainPanel { top: calc(52px + var(--safe-t)); right: auto; left: 50%; transform: translateX(-50%); width: min(420px, 56vw); max-height: calc(100% - 110px - var(--safe-t)); overflow-y: auto; font-size: .68rem; padding: 6px 8px; }
body.touch #trainPanel h4 { cursor: pointer; display: flex; justify-content: space-between; align-items: center; }
body.touch #trainPanel h4::after { content: '▴'; font-size: .8rem; opacity: .8; }
body.touch #trainPanel.min { left: auto; right: calc(10px + var(--safe-r)); transform: none; width: auto; padding: 4px 10px; overflow: visible; }
body.touch #trainPanel.min h4 { margin: 0; font-size: .8rem; gap: 6px; }
body.touch #trainPanel.min h4::after { content: '▾'; }
body.touch #trainPanel.min > :not(h4) { display: none; }
body.touch #trainPanel kbd, body.touch .tp-hint { display: none; }
body.touch #trainPanel button { font-size: .66rem; padding: 3px 5px; }

/* charging the heavy Stunbolt: a ring fills round the crosshair */
#charge { position: absolute; left: 50%; top: 50%; width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 50%;
  background: conic-gradient(#ff8a50 var(--p, 0%), rgba(255, 255, 255, .12) 0);
  -webkit-mask: radial-gradient(circle, transparent 18px, #000 19px); mask: radial-gradient(circle, transparent 18px, #000 19px); }
#charge.full { background: #ff5a20; box-shadow: 0 0 14px #ff5a20; animation: chargeFull .25s infinite alternate; }
@keyframes chargeFull { to { transform: scale(1.12); } }

/* ---------------- loading screen with a tutorial beside it ---------------- */
.loadWrap { display: flex; gap: 16px; align-items: center; justify-content: center; width: min(980px, 100%); margin: auto; }
.loadWrap .card { margin: 0; }
.loadCard { width: min(360px, 100%); flex: none; }
#loadGo { margin: 14px 0 0; width: 100%; }
#loadGo kbd { margin-left: 6px; padding: 1px 6px; border-radius: 5px; background: rgba(0, 0, 0, .18); font: 700 .75rem 'Lato', sans-serif; vertical-align: middle; }
body.touch #loadGo kbd { display: none; }
.tutorial { width: min(560px, 100%); text-align: left; padding: 16px 18px; }
/* the start screen keeps the tutorial beside the menu */
.menuWrap { align-items: flex-start; width: min(1060px, 100%); }
.menuWrap > .card:first-child { flex: none; }
.menuSide { display: flex; flex-direction: column; gap: 16px; width: min(560px, 100%); }
.menuSide .tutorial { width: 100%; }
.guide.card { width: 100%; margin: 0; padding: 12px 18px; }
.guide.card summary { opacity: 1; font-family: var(--hud-font); font-weight: 800; color: var(--gold); font-size: 1.2rem; }
.tutorial h3 { margin: 0 0 8px; font-family: var(--hud-font); font-weight: 800; color: var(--gold); font-size: 1.35rem; }
.tut { display: flex; gap: 10px; align-items: flex-start; margin: 6px 0; }
.tut .ti { flex: none; width: 30px; text-align: center; font-size: 1.3rem; line-height: 1.3; }
.tut p { margin: 0; line-height: 1.38; font-size: .92rem; }
/* each sentence its own bullet */
.tut .li { display: block; position: relative; padding-left: .95em; }
.tut .li::before { content: '•'; position: absolute; left: 0; opacity: .6; }
.tut .li + .li { margin-top: 1px; }
.tut .ln { display: block; }
.tut .potico { width: 1.75rem; height: 1.75rem; vertical-align: -0.3rem; }
.tutorial kbd { padding: 1px 6px; border-radius: 5px; background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .2); font: 700 .78rem 'Lato', sans-serif; }
.tutorial .tip { margin: 10px 0 0; padding: 7px 10px; border-radius: 9px; background: rgba(255, 207, 74, .12); font-size: .88rem; min-height: 2.6em; }
body.touch .tutorial .desk, body:not(.touch) .tutorial .mob { display: none; }
@media (max-width: 560px), (max-aspect-ratio: 1/1) {
  .loadWrap { flex-direction: column; }
  .loadCard, .tutorial { width: min(560px, 100%); }
}
@media (max-height: 500px) {
  .tutorial { padding: 10px 12px; }
  .tutorial h3 { font-size: 1.1rem; margin-bottom: 4px; }
  .tut { margin: 3px 0; }
  .tut p { font-size: .8rem; line-height: 1.3; }
  .tutorial .tip { margin-top: 6px; font-size: .78rem; }
  .loadCard h2 { font-size: 1.3rem; }
  .loadCard { width: min(250px, 100%); padding: 14px; }
  /* a phone on its side: the tutorial is taller than the screen, so both start at the top and the
     card with Continue stays put while the tutorial scrolls */
  #loading .loadWrap { align-items: flex-start; }
  .loadCard { position: sticky; top: 0; }
}
/* a small phone on its side has no room for the menu and the guide side by side: the guide goes below */
@media (max-height: 500px) and (max-width: 760px) {
  .menuWrap { flex-direction: column; align-items: center; }
  .menuWrap > .card:first-child, .menuSide { width: min(560px, 100%); }
}

/* EN / TR */
#menu .card { position: relative; }
#langSw { position: absolute; top: 10px; right: 12px; display: flex; gap: 4px; }
#langSw button { padding: 3px 8px; border-radius: 7px; border: 1.5px solid rgba(255, 255, 255, .25); background: rgba(0, 0, 0, .3); color: #fff; font: 700 .75rem 'Lato', sans-serif; cursor: pointer; opacity: .7; }
#langSw button.on { background: rgba(255, 207, 74, .45); border-color: var(--gold); opacity: 1; }

/* ---------------- party code, challenges, round recap ---------------- */
.party-pick { margin: 12px 0 0; }
.party-pick > span { margin-bottom: 4px; }
.party-pick input { width: 100%; }
.party-note { margin: 4px 0 0; font-size: .78rem; }
.chal { width: 100%; margin: 0; padding: 12px 18px; text-align: left; }
.chal h3 { margin: 0 0 6px; font-family: var(--hud-font); font-weight: 800; color: var(--gold); font-size: 1.2rem; }
#chalList { list-style: none; margin: 0; padding: 0; }
#chalList li { display: grid; grid-template-columns: 1fr 70px 44px; gap: 8px; align-items: center; margin: 5px 0; font-size: .88rem; }
#chalList li i { height: 7px; border-radius: 4px; background: linear-gradient(90deg, var(--gold) var(--p), rgba(255, 255, 255, .14) var(--p)); }
#chalList li b { text-align: right; font-size: .8rem; opacity: .85; }
#chalList li.done span { opacity: .7; text-decoration: line-through; }
#chalList li.weekly { margin-top: 9px; padding-top: 7px; border-top: 1px solid rgba(255, 255, 255, .12); }
.chal .note { margin: 6px 0 0; font-size: .76rem; }
#endRecap .recapMe { margin: 8px 0 4px; font-weight: 700; }
#endRecap .recapTop { list-style: none; padding: 0; margin: 0 0 6px; font-size: .9rem; opacity: .9; }
#endRecap .recapTop li { margin: 2px 0; }

/* the round's last two minutes */
#roundTime.finale { background: rgba(200, 30, 50, .85); border-color: #ff8a9a; animation: finalePulse 1s ease-in-out infinite alternate; }
@keyframes finalePulse { to { transform: scale(1.08); } }

/* ---------------- the logo: Magic, with Panic splashed on in paint, and a small "online" ---------------- */
h1.logo { display: flex; flex-direction: column; align-items: center; margin: 4px 0 8px; position: relative; }
h1.logo span { font: inherit; color: inherit; letter-spacing: inherit; text-shadow: inherit; } /* (not the plain h1 span style) */
h1.logo .l-magic { display: block; }
h1.logo .l-panic { position: relative; display: inline-block; padding: .18em .55em .26em; margin-top: -.08em; }
h1.logo .splat { position: absolute; inset: -6% -10% -14% -10%; width: 120%; height: 120%; z-index: 0; filter: drop-shadow(0 4px 0 #5a0614) drop-shadow(0 0 14px rgba(255, 60, 60, .45)); animation: splatIn .5s cubic-bezier(.2, 1.6, .4, 1) both; }
h1.logo .l-word { position: relative; z-index: 1; font-family: var(--hud-font); font-weight: 800; font-size: 1.25em; color: #fff; letter-spacing: .04em; white-space: nowrap;
  text-shadow: 0 3px 0 #6a0618, 0 0 2px #6a0618, -2px 0 0 #6a0618, 2px 0 0 #6a0618; }
/* each letter thrown on at its own angle */
h1.logo .l-word i { display: inline-block; font-style: normal; animation: letterShake 2.6s ease-in-out infinite; }
h1.logo .l-word i:nth-child(1) { transform: rotate(-8deg) translateY(2px); animation-delay: 0s; }
h1.logo .l-word i:nth-child(2) { transform: rotate(6deg) translateY(-3px); animation-delay: .15s; }
h1.logo .l-word i:nth-child(3) { transform: rotate(-4deg) translateY(1px); animation-delay: .3s; }
h1.logo .l-word i:nth-child(4) { transform: rotate(9deg) translateY(-2px); animation-delay: .45s; }
h1.logo .l-word i:nth-child(5) { transform: rotate(-6deg) translateY(3px); animation-delay: .6s; }
h1.logo .l-online { position: absolute; right: -6%; bottom: -14%; z-index: 2; transform: rotate(-4deg); font-family: 'Lato', sans-serif; font-weight: 900; font-size: .26em; letter-spacing: .32em; text-transform: uppercase;
  color: var(--gold); background: rgba(10, 6, 30, .85); padding: .25em .5em .25em .8em; border-radius: 6px; border: 1px solid rgba(255, 207, 74, .6); text-shadow: none; }
@keyframes splatIn { from { transform: scale(.2) rotate(-12deg); opacity: 0; } to { transform: scale(1) rotate(0); opacity: 1; } }
@keyframes letterShake { 0%, 86%, 100% { translate: 0 0; } 89% { translate: -1px 1px; } 92% { translate: 2px -1px; } 95% { translate: -1px 0; } }
@media (prefers-reduced-motion: reduce) { h1.logo .splat, h1.logo .l-word i { animation: none; } }

/* the rare spells as a little table: attack spells on the left, defence on the right */
.gtab.spells { table-layout: fixed; }
.gtab.spells th { font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; }
.gtab.spells td { width: 50%; line-height: 1.3; font-size: .84rem; padding: 6px 6px; }
.gtab.spells td b { font-size: .92rem; }
#boltTry.try { width: auto; margin: 0 0 0 6px; padding: 4px 10px; flex: none; }
#houseList div span { flex: 1; }
#houseList button.report { margin-left: 6px; }
#adminReports .rep { text-align: left; margin: 8px 0; padding: 8px 10px; border-radius: 10px; background: rgba(255, 255, 255, .06); font-family: 'Lato', sans-serif; font-size: .88rem; }
#adminReports .rep ul { margin: 6px 0; padding-left: 18px; }
#adminReports .rep .btn { width: auto; display: inline-block; margin: 4px 6px 0 0; padding: 5px 10px; font-size: .85rem; }
/* the house buttons stacked on the left, one width, labels lined up */
#chatBtn, #talkBtn, #pingBtn { width: 180px; gap: 6px; text-align: left; display: flex; align-items: center; }
#chatBtn kbd, #talkBtn kbd, #pingBtn kbd { margin-left: auto; }
body.touch #chatBtn, body.touch #talkBtn, body.touch #pingBtn, body.chatting #chatBtn, body.chatting #pingBtn { display: none; }
@media (max-width: 1020px) { #chatBtn, #talkBtn, #pingBtn { width: 140px; } }
/* your look and the Castle Pass */
.lookCard { max-height: 92vh; overflow: auto; }
.lookWrap { display: flex; gap: 16px; align-items: flex-start; }
#lookPreview { width: 200px; height: 250px; flex: none; border-radius: 14px; background: radial-gradient(circle at 50% 40%, rgba(255, 207, 74, .18), rgba(10, 6, 30, .6)); }
#lookPick { flex: 1; display: flex; flex-direction: column; gap: 10px; }
.lrow > span { display: block; font: 900 .78rem 'Lato', sans-serif; letter-spacing: .06em; text-transform: uppercase; opacity: .75; margin-bottom: 4px; }
.lrow > div { display: flex; flex-wrap: wrap; gap: 6px; }
.lopt { padding: 5px 10px; border-radius: 9px; border: 2px solid rgba(255, 255, 255, .25); background: rgba(0, 0, 0, .3); color: #fff; font: 700 .85rem 'Lato', sans-serif; cursor: pointer; }
.lsw { width: 30px; height: 30px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .35); cursor: pointer; }
.lopt.on, .lsw.on { border-color: var(--gold); box-shadow: 0 0 0 2px rgba(255, 207, 74, .45); }
#passBox { margin: 14px 0 8px; text-align: center; }
#passBox .pass { font-family: 'Lato', sans-serif; margin: 6px 0; }
#passBox .pass.ok { color: var(--gold); font-weight: 900; }
#passBox code { user-select: all; word-break: break-all; font-size: .75rem; background: rgba(0, 0, 0, .35); padding: 2px 6px; border-radius: 6px; }
.passHave { display: flex; gap: 6px; justify-content: center; margin-top: 10px; }
.passHave input { flex: 1; max-width: 340px; padding: 8px 10px; }
.btn.mini { width: auto; display: inline-block; margin: 0; padding: 5px 12px; font-size: .85rem; }
@media (max-width: 640px), (max-height: 500px) { .lookWrap { flex-direction: row; } #lookPreview { width: 140px; height: 175px; } }
#adminGoogle { display: flex; justify-content: center; margin: 4px 0 12px; min-height: 0; }
/* the pause menu's camera and spell-sound pickers look like the song picker; ▶ sits beside its select */
#camSel, #boltSel { width: 100%; padding: 8px 10px; border-radius: 10px; border: 2px solid rgba(255, 255, 255, .15); background: rgba(0, 0, 0, .35); color: var(--ink); font: inherit; font-size: .95rem; }

/* rooms */
.roomCard { max-height: 92vh; overflow: auto; text-align: left; }
.roomCard h3 { font: 900 .85rem 'Lato', sans-serif; letter-spacing: .06em; text-transform: uppercase; color: var(--gold); margin: 14px 0 6px; }
#roomList { display: flex; flex-direction: column; gap: 6px; max-height: 240px; overflow: auto; }
.rm { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 10px; background: rgba(0, 0, 0, .3); }
.rm b { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rm code { opacity: .7; font-size: .8rem; }
.rm .n { opacity: .8; font-size: .85rem; }
.roomRow { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.roomRow input[type=text], .roomRow input[type=password] { flex: 1; min-width: 120px; padding: 8px 10px; border-radius: 9px; border: 2px solid rgba(255, 255, 255, .2); background: rgba(0, 0, 0, .35); color: #fff; font: 700 .9rem 'Lato', sans-serif; }
.roomCard .check { display: flex; gap: 8px; align-items: center; margin: 8px 0; font: 700 .85rem 'Lato', sans-serif; }
#roomMsg { min-height: 1.2em; color: #ffb0a0; }
#roomInfo:empty { display: none; }
#roomBots:empty { display: none; }
#roomBots { margin: 6px 0 10px; padding: 8px 10px; border-radius: 10px; background: rgba(0, 0, 0, .28); }
#roomBots .rbh { font: 900 .78rem 'Lato', sans-serif; letter-spacing: .06em; text-transform: uppercase; color: var(--gold); margin-bottom: 6px; }
#roomBots .rbr { display: flex; align-items: center; gap: 8px; margin: 4px 0; }
#roomBots .rbr span { flex: 1; text-align: left; font: 700 .9rem 'Lato', sans-serif; }
#roomBots .rbr b { min-width: 2.2em; text-align: center; }
#roomBots .rbAll { display: flex; gap: 6px; margin-top: 6px; }
.roomRow select { flex: 1; padding: 8px 10px; border-radius: 9px; border: 2px solid rgba(255, 255, 255, .2); background: rgba(0, 0, 0, .35); color: #fff; font: 700 .9rem 'Lato', sans-serif; }
.rm small { opacity: .75; font-weight: 700; }
#roomBots .btn.on { outline: 2px solid var(--gold); }

/* the admin's balance report */
table.bal { width: 100%; border-collapse: collapse; font-size: 13px; margin: 6px 0 12px; }
table.bal th, table.bal td { padding: 4px 6px; border-bottom: 1px solid rgba(255,255,255,.12); text-align: left; }
table.bal small { opacity: .7; }

/* rebinding keys (pause menu) */
#keysPanel { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 14px; margin: 8px 0; text-align: left; }
#keysPanel .keyRow { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
#keysPanel .keyRow .btn { min-width: 74px; }
.lopt.locked { opacity: .55; }

/* ---------------- phones: a quieter screen ----------------
   The places show as small dots (the capture bar names the one you stand in), the scoreboard sits
   behind the scores (tap them), the clock, sound and stun count live in the pause menu, sprinting is
   the stick pushed all the way, and the item button shows only while you hold something. */
body.touch #zoneStrip .zchip { font-size: 0; width: 16px; height: 16px; padding: 0; border-radius: 50%; min-width: 0; overflow: hidden; }
body.touch #zoneStrip .zchip i { height: 100%; opacity: .55; }
body.touch.portrait #zoneStrip { width: auto; flex-wrap: nowrap; column-gap: 5px; }
body.touch #leader, body.touch #clock, body.touch #muteBtn, body.touch #topRight .stat, body.touch #tScore, body.touch #tSprint { display: none !important; }
body.touch #tItem:not(.has) { display: none; }
body.touch #killFeed div:nth-child(n+2) { display: none; }
body.touch #cupBar { pointer-events: auto; cursor: pointer; }
body.touch #tChat, body.touch #tTalk, body.touch #tPing { width: 40px; height: 40px; font-size: 1.05rem; }
body.touch #tTalk { left: calc(58px + var(--safe-l)) !important; }
body.touch #tPing { left: calc(104px + var(--safe-l)) !important; }
body.touch.portrait #leader { display: none; }

/* iPhone Safari, sideways: swipe up once to fold the address and tab bars away */
html.swipe, html.swipe body { height: auto; overflow: visible; }
html.swipe body { min-height: calc(100vh + 160px); }
#swipeUp { position: fixed; inset: 0; z-index: 45; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  background: rgba(10, 6, 30, .78); color: #fff; font: 800 1.3rem var(--hud-font); text-align: center; touch-action: pan-y; padding: 16px calc(16px + var(--safe-r)) 16px calc(16px + var(--safe-l)); }
#swipeUp .arrow { font-size: 2.6rem; animation: swipeUp 1.2s ease-in-out infinite; }
#swipeUp small { font: 400 .85rem 'Lato', sans-serif; opacity: .8; max-width: 34em; }
#swipeUp button { pointer-events: auto; }
@keyframes swipeUp { 0%, 100% { transform: translateY(10px); } 50% { transform: translateY(-10px); } }
@media (prefers-reduced-motion: reduce) { #swipeUp .arrow { animation: none; } }
/* sideways on a phone the stick needs the left side: the small buttons go beside the minimap */
@media (max-height: 460px) {
  body.touch:not(.portrait) #tChat, body.touch:not(.portrait) #tTalk, body.touch:not(.portrait) #tPing { width: 36px !important; height: 36px !important; font-size: .95rem; top: calc(10px + var(--safe-t)) !important; }
  body.touch:not(.portrait) #tChat { left: calc(118px + var(--safe-l)) !important; }
  body.touch:not(.portrait) #tTalk { left: calc(158px + var(--safe-l)) !important; }
  body.touch:not(.portrait) #tPing { left: calc(198px + var(--safe-l)) !important; }
  body.touch:not(.portrait) #chatInput { top: calc(52px + var(--safe-t)); left: calc(118px + var(--safe-l)); }
  body.touch:not(.portrait) #quickChat { top: calc(96px + var(--safe-t)); left: calc(118px + var(--safe-l)); }
}

/* the microphone is sending: a small red tag, top middle */
#micLive { position: absolute; left: 50%; top: calc(64px + var(--safe-t)); transform: translateX(-50%); padding: 3px 10px; border-radius: 99px; background: rgba(200, 20, 40, .85); color: #fff; font: 800 .8rem var(--hud-font); pointer-events: none; z-index: 5; }
body.touch:not(.portrait) #micLive { top: calc(46px + var(--safe-t)); }
body.touch.portrait #micLive { top: calc(72px + var(--safe-t)); }
#tTalk.on, #talkBtn.on { background: rgba(220, 30, 50, .75); border-color: #ff6a7a; }
#goalPill { font: 800 .9rem var(--hud-font); padding: 4px 9px; opacity: .9; }

/* ---------------- phones and tablets: review fixes ---------------- */
#goalPill { white-space: nowrap; }
body.touch.portrait #itemInfo { right: calc(16px + var(--safe-r)); bottom: auto; top: 50%; max-width: 60vw; }
/* the pause menu on a touch screen: Resume and Leave first, the settings under them */
body.touch #pause .card { display: flex; flex-direction: column; }
body.touch #pause .card > h2 { order: -4; }
body.touch #pause #pauseNote { order: -3; }
body.touch #pause #resume { order: -2; }
body.touch #pause #leave { order: -1; margin-bottom: 8px; }
/* sideways on a short phone, the small buttons sit beside the minimap: the scores move right of them */
@media (max-height: 460px) and (max-width: 820px) {
  body.touch:not(.portrait) #cupBar, body.touch:not(.portrait) #zoneStrip { left: calc(50% + 62px) !important; }
}
/* sideways with room under the minimap (no browser bars), the small buttons go under it */
@media (min-height: 340px) and (max-height: 460px) {
  body.touch:not(.portrait) #tChat, body.touch:not(.portrait) #tTalk, body.touch:not(.portrait) #tPing { top: calc(112px + var(--safe-t)) !important; }
  body.touch:not(.portrait) #tChat { left: calc(12px + var(--safe-l)) !important; }
  body.touch:not(.portrait) #tTalk { left: calc(52px + var(--safe-l)) !important; }
  body.touch:not(.portrait) #tPing { left: calc(92px + var(--safe-l)) !important; }
  body.touch:not(.portrait) #cupBar, body.touch:not(.portrait) #zoneStrip { left: 50% !important; }
}
/* tablets: a bigger minimap and buttons a little bigger */
@media (min-width: 1000px) and (min-height: 700px) {
  body.touch #minimap { width: 170px !important; height: 170px !important; }
  body.touch .tbtn, body.touch #stickBase { scale: calc(var(--tscale, 1) * 1.15); }
  body.touch:not(.portrait) #tChat, body.touch:not(.portrait) #tTalk, body.touch:not(.portrait) #tPing { top: calc(194px + var(--safe-t)) !important; }
  body.touch #cupBar { transform: translateX(-50%) scale(1) !important; }
}
body.touch.portrait #killFeed { top: calc(256px + var(--safe-t)); }
@media (min-width: 1000px) and (min-height: 700px) { body.touch #zoneStrip { top: calc(66px + var(--safe-t)) !important; } }

/* the short tutorial: the step to do now, at the top of the screen */
#tutBox { position: absolute; left: 50%; top: calc(108px + var(--safe-t)); transform: translateX(-50%); z-index: 6; pointer-events: auto;
  display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; max-width: min(520px, 92vw);
  padding: 10px 16px; border-radius: 14px; background: rgba(10, 6, 30, .82); border: 2px solid rgba(255, 207, 74, .7); color: #fff; }
#tutBox small { font: 700 .72rem 'Lato', sans-serif; letter-spacing: .08em; text-transform: uppercase; color: var(--gold); }
#tutBox b { font: 800 1.05rem var(--hud-font); }
#tutBox > span { font: 600 .9rem 'Lato', sans-serif; opacity: .92; }
#tutBox > span b { font: inherit; font-weight: 800; }
body.touch #tutBox > span { display: none; }
#tutBox .tutDots { display: flex; gap: 6px; }
#tutBox .tutDots i { width: 10px; height: 10px; border-radius: 50%; background: rgba(255, 255, 255, .25); }
#tutBox .tutDots i.ok { background: #52e07a; }
#tutBox .tutDots i.now { background: var(--gold); box-shadow: 0 0 8px var(--gold); }
#tutBox .tutBtns { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
/* on a phone: one thin line under the score chips, so the middle of the screen stays clear */
body.touch #tutBox { top: calc(50px + var(--safe-t)); flex-direction: row; flex-wrap: nowrap; gap: 8px; padding: 4px 6px 4px 10px; border-width: 1.5px; border-radius: 999px; max-width: min(560px, 70vw); background: rgba(10, 6, 30, .72); }
body.touch #tutBox small { font-size: .6rem; white-space: nowrap; }
body.touch #tutBox b { font-size: .78rem; line-height: 1.15; }
body.touch #tutBox .tutDots { display: none; }
body.touch #tutBox .btn.mini, body.touch #tutBox button { padding: 3px 9px; font-size: .7rem; margin: 0; width: auto; flex: none; }
body.touch #tutBox .tutBtns { flex-wrap: nowrap; }
body.touch.portrait #tutBox { top: calc(66px + var(--safe-t)); max-width: 94vw; }
body.touch.portrait #tutBox small { display: none; }

/* the map picker: a card per map; they wrap on a wide menu and scroll sideways on a narrow one */
#mapCards { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); grid-auto-flow: column; gap: 6px; }
.mapcard { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 4px 7px; border-radius: 12px; border: 2px solid rgba(255,255,255,.08);
  color: #fff; font: inherit; cursor: pointer; text-align: center; opacity: .72; transition: transform .12s, opacity .12s, border-color .12s, box-shadow .12s;
  background: linear-gradient(160deg, var(--a, #3a2c6e), var(--b, #1a1236)); }
.mapcard:hover { opacity: 1; transform: translateY(-1px); }
.mapcard:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.mapcard.on { opacity: 1; border-color: var(--gold); box-shadow: 0 0 0 2px rgba(255,207,74,.35), 0 6px 16px rgba(0,0,0,.35); transform: translateY(-2px); }
.mapcard.on::after { content: '✓'; position: absolute; top: 4px; right: 6px; font-weight: 900; font-size: .75rem; color: var(--gold); }
.mapcard.going { animation: mapGo .5s ease-in-out infinite alternate; }
@keyframes mapGo { to { filter: brightness(1.35); } }
.mapcard i { font-style: normal; font-size: 1.6rem; line-height: 1.15; filter: drop-shadow(0 2px 2px rgba(0,0,0,.4)); }
.mapcard b { font-size: .74rem; line-height: 1.15; }
.mapcard small { font-size: .66rem; font-weight: 800; color: var(--gold); letter-spacing: .02em; }
.mapcard em { display: none; }
.mapcard.m2 { --a: #5a3d9e; --b: #23164a; } .mapcard.m10 { --a: #a0602c; --b: #46240e; } .mapcard.m13 { --a: #7a6a3a; --b: #32290f; }
.mapcard.m11 { --a: #2f7a4a; --b: #10331d; } .mapcard.m12 { --a: #2f6ab0; --b: #10264a; }
.mapnote { margin: 6px 0 0; }
@media (max-width: 520px) {
  #mapCards { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; padding: 2px 2px 6px; margin: 0 -2px; scrollbar-width: none; }
  #mapCards::-webkit-scrollbar { display: none; }
  .mapcard { flex: 0 0 31%; scroll-snap-align: start; }
}

/* phones: fewer words over the game. No leaderboard during play (it's on the menu and at the round's
   end), smaller news lines, banners and chips. */
body.touch #leader { display: none; }
body.touch #killFeed { font-size: .66rem; gap: 2px; }
body.touch #killFeed div { padding: 2px 7px; }
body.touch #banner { font-size: clamp(1.3rem, 5vw, 2.2rem); }
body.touch #subBanner { font-size: clamp(.8rem, 2.6vw, 1rem); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0 12%; }
body.touch .chip { font-size: .72rem; padding: 2px 7px; }
/* the jump: automatic on a phone (into a low edge you hop it), so no button for it */
body.touch #tJump { display: none !important; }

/* a spell's drawn icon (Totemio's spirit lion), in a line of text or on its button */
.sp-ico { width: 1.25em; height: 1.25em; vertical-align: -.28em; filter: drop-shadow(0 0 3px rgba(143, 210, 255, .8)); }

/* in a practice castle once the online one is up: a button at the top to go and join everyone */
#goOnline { position: absolute; top: calc(64px + var(--safe-t)); left: 50%; transform: translateX(-50%); width: auto; pointer-events: auto; z-index: 5; padding: 8px 14px; font-size: .9rem; animation: pop .35s ease-out; }
#loadBots { margin-top: 10px; }

/* ---- phones: the spell buttons in the bottom-right corner, by the thumb (the jump button is gone),
   the scores on one tidy line with the places under it, banners near the top instead of mid-screen */
body.touch #tFire { right: calc(24px + var(--safe-r)) !important; bottom: calc(28px + var(--safe-b)) !important; }
body.touch #tShield { right: calc(124px + var(--safe-r)) !important; bottom: calc(20px + var(--safe-b)) !important; }
body.touch #tExpel { right: calc(104px + var(--safe-r)) !important; bottom: calc(100px + var(--safe-b)) !important; }
body.touch #tItem { right: calc(38px + var(--safe-r)) !important; bottom: calc(124px + var(--safe-b)) !important; } /* (in the arc round Stunbolt, on top: Escape Dust takes a second tap) */
body.touch.portrait #tFire { bottom: calc(40px + var(--safe-b)) !important; }
body.touch.portrait #tShield { bottom: calc(30px + var(--safe-b)) !important; }
body.touch.portrait #tExpel { bottom: calc(112px + var(--safe-b)) !important; }
body.touch.portrait #tItem { bottom: calc(136px + var(--safe-b)) !important; }
body.touch .hp-house { white-space: nowrap; padding: 3px 9px 3px 4px; gap: 5px; border-radius: 10px; min-width: 0; }
body.touch .hp-house b { white-space: nowrap; }
/* (on a phone the leading house gets a gold ring instead of a trophy that would wrap the chip onto two lines) */
body.touch .hp-house.lead b::after { content: none; }
body.touch .hp-house.lead { border-color: #ffd23a; box-shadow: 0 0 0 2px rgba(255, 210, 58, .55), 0 0 12px rgba(255, 210, 58, .6); }
body.touch .hp-house.lead.mine { border-color: #fff; }
body.touch .hp-house { flex-direction: row !important; flex-wrap: nowrap; height: auto; }
body.touch.portrait #zoneStrip { top: calc(52px + var(--safe-t)) !important; }
body.touch:not(.portrait) #zoneStrip { top: calc(46px + var(--safe-t)) !important; }
body.touch #banner { top: calc(84px + var(--safe-t)); }
body.touch #subBanner { top: calc(84px + var(--safe-t) + clamp(1.6rem, 6vw, 2.6rem)); }
body.touch.portrait #banner { top: calc(120px + var(--safe-t)); }
body.touch.portrait #subBanner { top: calc(120px + var(--safe-t) + clamp(1.6rem, 6vw, 2.6rem)); }

/* phones: no round target pill (1500 is the same every round), the small buttons in a column under the
   minimap in portrait, and the menu button tucked into the top-right corner */
body.touch #goalPill { display: none !important; }
body.touch.portrait #tChat, body.touch.portrait #tTalk, body.touch.portrait #tPing { left: calc(12px + var(--safe-l)) !important; }
body.touch.portrait #tChat { top: calc(204px + var(--safe-t)) !important; }
body.touch.portrait #tTalk { top: calc(254px + var(--safe-t)) !important; }
body.touch.portrait #tPing { top: calc(304px + var(--safe-t)) !important; }
body.touch.portrait #topRight { top: calc(6px + var(--safe-t)) !important; right: calc(6px + var(--safe-r)) !important; transform: scale(.68) !important; }
body.touch.portrait #fsBtn { display: none; }
body.touch.portrait #minimap { top: calc(76px + var(--safe-t)) !important; }
body.touch.portrait #tChat { top: calc(182px + var(--safe-t)) !important; }
body.touch.portrait #tTalk { top: calc(232px + var(--safe-t)) !important; }
body.touch.portrait #tPing { top: calc(282px + var(--safe-t)) !important; }

/* tips switched off (the default): no spelled-out item box */
body.no-tips #itemInfo { display: none !important; }

/* the scores (Tab): the columns named on a computer, and buttons to mute, report or vote someone out */
.sb-lbl { font-size: .75em; opacity: .75; font-weight: 700; }
body.touch .sb-lbl { display: none; }
.sb-acts { white-space: nowrap; }
.sb-acts button { pointer-events: auto; cursor: pointer; margin-left: 2px; padding: 1px 5px; border-radius: 6px; border: 1px solid rgba(255,255,255,.25); background: rgba(0,0,0,.35); color: #fff; font-size: .8rem; }
.sb-acts button:hover { background: rgba(255,255,255,.18); }
.sb-acts button.on { background: rgba(255,120,80,.45); border-color: #ff9a6a; }
#scoreboard { pointer-events: auto; }

/* the score chips: the house's animal, big */
.hp-house span.hp-animal { width: auto; height: auto; line-height: 1; font-size: 1.45rem; filter: drop-shadow(0 1px 2px rgba(0,0,0,.6)); }
/* the loading screen: the card with Continue under How to play (on a screen tall enough) */
/* How to play first, the card with Continue under it (a phone on its side keeps them side by side) */
@media (min-height: 501px) {
  #loading .loadWrap { flex-direction: column; align-items: center; }
  #loading .loadWrap .tutorial { order: 1; }
  #loading .loadWrap .loadCard { order: 2; width: min(560px, 100%); }
}

/* the short tutorial: a full-width outlined button under Quick play */
.btn.tutBtn { display: block; width: 100%; margin: 0; padding: 11px 14px; border-radius: 14px; background: rgba(255, 207, 74, .08); border: 2px solid rgba(255, 207, 74, .7); color: var(--gold); box-shadow: none; font-size: 1.05rem; }
.btn.tutBtn:hover { background: rgba(255, 207, 74, .18); }
.btn.tutBtn small { color: #fff; opacity: .75; font-size: .8rem; margin-left: 4px; }

/* the other ways to play, two to a row under Quick play */
.modeGrid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 10px 0 0; }
.modeGrid .btn { margin: 0; padding: 9px 8px; font-size: .98rem; line-height: 1.15; }
.modeGrid .btn small { display: block; margin: 2px 0 0; font-size: .72rem; }
.modeGrid .btn.wide { grid-column: 1 / -1; }
/* the guide column is as tall as the menu, so both cards end together */
@media (min-width: 761px) and (min-aspect-ratio: 1/1) {
  .menuWrap { align-items: stretch; }
  .menuSide .guide.card { flex: 1; }
}
/* the party code on one row: its name, then the box */
.party-pick { display: flex; align-items: center; gap: 10px; }
.party-pick > span { flex: none; margin: 0 !important; }
.party-pick input { flex: 1; min-width: 0; width: auto; padding: 8px 12px; font-size: .95rem; }
.party-note { font-size: .72rem; opacity: .75; }
/* a phone held upright: the tutorial box starts right of the minimap (it overlapped its corner) */
body.touch.portrait #tutBox { left: calc(112px + var(--safe-l)); right: calc(8px + var(--safe-r)); transform: none; max-width: none; justify-content: space-between; }
/* a narrow phone: the boy/girl buttons give the name box room for its "Wizard" / "Witch" */
@media (max-width: 480px) {
  .nameRow > .gfield { flex: 0 0 44%; }
  .nameRow #genderPick { width: 100%; }
  .nameRow #genderPick .gbtn { font-size: .82rem; padding: 0 2px; white-space: nowrap; }
}

/* ---------------- drop-down lists in the game's look (see dropdown.js) ---------------- */
.dd { position: relative; width: 100%; }
.dd-native { position: absolute; inset: 0; opacity: 0; pointer-events: none; width: 100%; height: 100%; }
.dd-btn {
  width: 100%; text-align: left; padding: 10px 38px 10px 14px; border-radius: 12px; border: 2px solid rgba(255, 207, 74, .28);
  background: rgba(0, 0, 0, .38) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'><path d='M3 6l5 5 5-5' fill='none' stroke='%23ffcf4a' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/></svg>") no-repeat right 12px center;
  color: var(--ink); font: 700 .98rem var(--hud-font); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .05); transition: border-color .12s, background-color .12s;
}
.dd-btn:hover, .dd-btn:focus-visible, .dd-btn.open { border-color: var(--gold); background-color: rgba(60, 30, 120, .45); outline: none; }
.dd-btn:disabled { opacity: .5; cursor: default; }
.dd-list {
  position: fixed; z-index: 60; overflow-y: auto; padding: 5px; border-radius: 14px; background: rgba(22, 14, 44, .97);
  border: 2px solid rgba(255, 207, 74, .7); box-shadow: 0 14px 40px rgba(0, 0, 0, .6); backdrop-filter: blur(6px); touch-action: pan-y;
}
.dd-item { padding: 9px 12px; border-radius: 9px; font: 700 .95rem var(--hud-font); color: var(--ink); cursor: pointer; }
.dd-item.hot, .dd-item:hover { background: rgba(138, 61, 255, .45); }
.dd-item.on { color: var(--gold); }
.dd-item.on::after { content: ' ✓'; }
.dd-item.off { opacity: .4; cursor: default; }
.dd-list::-webkit-scrollbar { width: 8px; } .dd-list::-webkit-scrollbar-thumb { background: rgba(255, 207, 74, .4); border-radius: 8px; }

/* the pause menu's three tabs */
.ptabs { display: flex; gap: 6px; margin: 4px 0 14px; padding: 4px; border-radius: 14px; background: rgba(0, 0, 0, .3); }
.ptab { flex: 1; padding: 8px 6px; border: 0; border-radius: 10px; background: transparent; color: var(--ink); font: 800 .95rem var(--hud-font); opacity: .75; }
.ptab.on { background: rgba(255, 207, 74, .18); color: var(--gold); opacity: 1; box-shadow: inset 0 0 0 1.5px rgba(255, 207, 74, .6); }
.ppane { min-height: 0; }
#pause .field:has(#boltSel) { display: grid; grid-template-columns: 1fr auto; gap: 0 8px; align-items: center; }
#pause .field:has(#boltSel) > span { grid-column: 1 / -1; }
#pause .field:has(#boltSel) .dd { min-width: 0; }

.ver { margin: 6px 0 0; font-size: .72rem; opacity: .45; text-align: center; letter-spacing: .04em; user-select: text; -webkit-user-select: text; }
.menuMute { position: absolute; top: 10px; left: 12px; padding: 3px 9px; border-radius: 7px; border: 1.5px solid rgba(255, 255, 255, .25); background: rgba(0, 0, 0, .3); color: #fff; font-size: .85rem; cursor: pointer; opacity: .8; }
.menuMute:hover { opacity: 1; border-color: var(--gold); }
/* the message list on an upright phone: at the top, just under the places' dots (it sat mid-screen) */
body.touch.portrait #killFeed { top: calc(76px + var(--safe-t)); left: calc(128px + var(--safe-l)); right: calc(8px + var(--safe-r)); transform: none; align-items: center; }
/* the pause menu's choice of messages */
.feedPick #feedKinds { display: flex; flex-direction: column; gap: 4px; margin-top: 4px; }
.feedPick #feedKinds label { display: flex; align-items: center; gap: 8px; font-size: .9rem; }

/* the room owner's bot buttons on the scores */
.sb-botadd { margin-left: 8px; padding: 1px 8px; border-radius: 8px; border: 1px solid rgba(255,255,255,.35); background: rgba(255,255,255,.08); color: #fff; font: 700 .75rem 'Lato', sans-serif; cursor: pointer; vertical-align: middle; }