:root{
  color-scheme:dark;
  --lime:#d9f36d;
  --red:#ff5b5b;
  --glass:rgba(8,14,19,.76);
  --line:rgba(255,255,255,.14);
  --muted:#a7b1b9;
}
*{box-sizing:border-box}
html,body{width:100%;height:100%;margin:0;overflow:hidden;background:#05080b;font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;user-select:none}
canvas{display:block;width:100%;height:100%;outline:none}
#hud{position:fixed;inset:0;pointer-events:none;color:#fff;text-shadow:0 2px 8px #000}
.top{position:absolute;top:20px;left:22px;right:22px;display:flex;justify-content:space-between;gap:16px}
.panel{padding:10px 14px;border:1px solid var(--line);border-radius:11px;background:var(--glass);backdrop-filter:blur(10px);min-width:170px}
.label{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:4px}
.value{font-size:19px;font-weight:900;letter-spacing:.035em}
#objective{text-align:right}
#crosshair{--spread:8px;position:absolute;left:50%;top:50%;width:50px;height:50px;transform:translate(-50%,-50%);transition:opacity .12s}
.cross-line{position:absolute;background:rgba(255,255,255,.94);box-shadow:0 0 6px rgba(255,255,255,.45);border-radius:2px}
.cross-line.t{width:2px;height:7px;left:24px;top:calc(18px - var(--spread))}
.cross-line.b{width:2px;height:7px;left:24px;bottom:calc(18px - var(--spread))}
.cross-line.l{width:7px;height:2px;top:24px;left:calc(18px - var(--spread))}
.cross-line.r{width:7px;height:2px;top:24px;right:calc(18px - var(--spread))}
#adsDot{position:absolute;left:50%;top:50%;width:4px;height:4px;border-radius:50%;background:#ff5151;box-shadow:0 0 7px #ff2f2f;transform:translate(-50%,-50%);opacity:0;transition:opacity .12s}
#hitmarker{position:absolute;left:50%;top:50%;width:44px;height:44px;transform:translate(-50%,-50%) scale(.7);opacity:0;transition:opacity .06s,transform .06s}
#hitmarker.show{opacity:1;transform:translate(-50%,-50%) scale(1)}
#hitmarker i{position:absolute;width:2px;height:11px;background:#fff;left:21px;top:4px;transform-origin:1px 18px;box-shadow:0 0 5px #fff}
#hitmarker i:nth-child(1){transform:rotate(45deg)}
#hitmarker i:nth-child(2){transform:rotate(135deg)}
#hitmarker i:nth-child(3){transform:rotate(225deg)}
#hitmarker i:nth-child(4){transform:rotate(315deg)}
#bottom{position:absolute;left:22px;right:22px;bottom:20px;display:flex;justify-content:space-between;align-items:flex-end}
#healthWrap{width:min(360px,40vw)}
#healthBar{height:12px;border:1px solid rgba(255,255,255,.2);border-radius:999px;overflow:hidden;background:rgba(0,0,0,.46)}
#healthFill{height:100%;width:100%;background:linear-gradient(90deg,#ff5252,#ffd36a 48%,#a8ef72);transition:width .16s}
#ammo{text-align:right;font-size:48px;font-weight:950;line-height:.82;letter-spacing:-.05em}
#ammo small{font-size:17px;color:var(--muted);letter-spacing:0}
#stance{font-size:11px;color:var(--muted);margin-bottom:6px;letter-spacing:.12em}
#message{position:absolute;left:50%;top:22%;transform:translate(-50%,-50%) scale(.96);font-size:clamp(24px,4vw,52px);font-weight:950;letter-spacing:.12em;text-align:center;opacity:0;transition:.2s}
#message.show{opacity:1;transform:translate(-50%,-50%) scale(1)}
#damage{position:absolute;inset:0;opacity:0;background:radial-gradient(circle at center,transparent 35%,rgba(170,0,0,.58));transition:opacity .12s}
#damage.show{opacity:1}
#killfeed{position:absolute;right:22px;top:102px;display:flex;flex-direction:column;align-items:flex-end;gap:7px}
.kill{padding:7px 10px;border-radius:7px;background:rgba(7,11,15,.62);border:1px solid rgba(255,255,255,.08);font-size:12px;animation:feed 2.8s forwards}
@keyframes feed{0%{opacity:0;transform:translateX(12px)}10%,75%{opacity:1;transform:none}100%{opacity:0;transform:translateY(-8px)}}
#start{position:fixed;inset:0;z-index:30;display:grid;place-items:center;background:
radial-gradient(circle at 55% 40%,rgba(88,112,125,.22),transparent 36%),
linear-gradient(rgba(3,6,9,.45),rgba(3,6,9,.9));color:#fff}
.card{width:min(760px,calc(100vw - 32px));padding:34px;border-radius:20px;border:1px solid rgba(255,255,255,.15);background:rgba(7,12,17,.86);backdrop-filter:blur(18px);box-shadow:0 30px 90px rgba(0,0,0,.58)}
.card h1{font-size:clamp(48px,9vw,94px);line-height:.82;letter-spacing:-.075em;margin:0 0 12px}
.card h1 span{color:var(--lime)}
.card p{color:#c3ccd2;font-size:16px;line-height:1.55;margin:0}
.controls{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 16px;margin:22px 0}
.control{padding:10px 12px;border-radius:9px;border:1px solid rgba(255,255,255,.09);background:rgba(255,255,255,.04);color:#b8c2c9}
.control b{color:#fff}
#play{width:100%;padding:15px;border:0;border-radius:11px;background:var(--lime);color:#0c1113;font:900 17px/1 inherit;letter-spacing:.08em;cursor:pointer}
#loadError{display:none;margin-top:12px;padding:11px;border-radius:9px;background:rgba(150,20,20,.24);border:1px solid rgba(255,90,90,.35);color:#ffd6d6}
#hint{margin-top:11px;text-align:center;color:#7f8b94;font-size:12px}
#debug{position:fixed;left:22px;top:238px;z-index:8;padding:8px 10px;border-radius:8px;background:rgba(4,8,11,.62);border:1px solid rgba(255,255,255,.09);color:#9eabb4;font:11px/1.45 ui-monospace,Consolas,monospace;pointer-events:none;display:none}
#fallbackLook{position:fixed;left:50%;bottom:18px;transform:translateX(-50%);z-index:8;padding:7px 11px;border-radius:999px;border:1px solid rgba(255,255,255,.1);background:rgba(4,8,11,.65);color:#9eabb4;font-size:11px;pointer-events:none}
#skillHud{position:absolute;left:22px;top:102px;width:228px;padding:10px 11px;border:1px solid var(--line);border-radius:10px;background:var(--glass);backdrop-filter:blur(10px)}
.skill-mini{margin-top:8px}
.skill-mini:first-child{margin-top:0}
.skill-mini-head{display:flex;justify-content:space-between;gap:10px;font-size:11px;color:#d9e0e4}
.skill-mini-head span:last-child{color:var(--lime)}
.skill-bar{height:5px;margin-top:5px;border-radius:99px;overflow:hidden;background:rgba(255,255,255,.1)}
.skill-bar>i{display:block;height:100%;width:0;background:linear-gradient(90deg,#9dbd55,var(--lime));transition:width .25s}
#skillTree{position:fixed;inset:0;z-index:26;display:none;place-items:center;background:rgba(2,5,8,.72);backdrop-filter:blur(9px);pointer-events:none;color:#fff}
#skillTree.show{display:grid}
.tree-card{width:min(820px,calc(100vw - 32px));padding:26px;border:1px solid rgba(255,255,255,.15);border-radius:18px;background:rgba(7,12,17,.94);box-shadow:0 24px 80px rgba(0,0,0,.55)}
.tree-title{display:flex;justify-content:space-between;align-items:end;gap:20px;margin-bottom:20px}
.tree-title h2{margin:0;font-size:32px;letter-spacing:-.04em}
.tree-title small{color:#8e9aa2}
.tree-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.branch{padding:16px;border:1px solid rgba(255,255,255,.1);border-radius:13px;background:rgba(255,255,255,.035)}
.branch h3{margin:0 0 5px}
.branch-meta{color:var(--lime);font-size:12px;margin-bottom:14px}
.nodes{display:flex;align-items:center;gap:8px}
.node{flex:1;min-height:68px;padding:8px;border:1px solid rgba(255,255,255,.1);border-radius:9px;background:rgba(255,255,255,.025);color:#66727b;font-size:10px;line-height:1.35}
.node.active{color:#eaf0f3;border-color:rgba(217,243,109,.4);background:rgba(217,243,109,.075)}
.node b{display:block;font-size:11px;margin-bottom:3px}
.tree-help{margin-top:16px;color:#89959d;font-size:12px;text-align:center}
#pickupHint{position:absolute;left:50%;top:61%;transform:translate(-50%,-50%);padding:7px 10px;border-radius:8px;background:rgba(5,10,14,.72);border:1px solid rgba(217,243,109,.25);color:#eaff9a;font-size:12px;opacity:0;transition:opacity .15s}
#pickupHint.show{opacity:1}

@media(max-width:700px){
  .controls{grid-template-columns:1fr}
  .panel{min-width:135px}
  #ammo{font-size:37px}
  #healthWrap{width:44vw}
  #killfeed{display:none}
  #skillHud{width:190px;top:96px}
  .tree-grid{grid-template-columns:1fr}
  .nodes{flex-wrap:wrap}
  .node{min-width:110px}
}


/* v4.1 Arsenal */
#weaponHud{
  position:absolute;
  left:50%;
  bottom:20px;
  transform:translateX(-50%);
  min-width:430px;
  padding:9px 11px;
  border:1px solid rgba(255,255,255,.13);
  border-radius:12px;
  background:rgba(6,11,15,.76);
  backdrop-filter:blur(10px);
  text-align:center;
}
#weaponTitle{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  margin-bottom:7px;
  font-size:12px;
  letter-spacing:.06em;
}
#weaponTitle>span{font-weight:900;color:#fff}
#weaponTitle small{color:#9da9b1;font-size:9px}
#weaponSlots{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:6px;
}
.weapon-slot{
  display:flex;
  align-items:center;
  gap:7px;
  min-width:92px;
  padding:7px 9px;
  border:1px solid rgba(255,255,255,.09);
  border-radius:8px;
  background:rgba(255,255,255,.025);
  color:#8f9ba3;
  transition:.16s;
}
.weapon-slot b{
  display:grid;
  place-items:center;
  width:20px;
  height:20px;
  border-radius:5px;
  background:rgba(255,255,255,.08);
  color:#d7dfe4;
  font-size:11px;
}
.weapon-slot span{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:10px;
  font-weight:800;
}
.weapon-slot.active{
  color:#f3f6f7;
  border-color:rgba(217,243,109,.48);
  background:rgba(217,243,109,.09);
  box-shadow:0 0 18px rgba(217,243,109,.08);
}
.weapon-slot.active b{background:#d9f36d;color:#11170d}
.weapon-slot.locked{opacity:.34;filter:saturate(.3)}
.weapon-slot.new-weapon{animation:weaponUnlock .9s ease 2}
@keyframes weaponUnlock{
  0%,100%{transform:none}
  50%{transform:translateY(-4px);border-color:#d9f36d;box-shadow:0 0 25px rgba(217,243,109,.3)}
}
@media(max-width:760px){
  #weaponHud{min-width:calc(100vw - 24px);bottom:82px}
  .weapon-slot{min-width:0;padding:6px}
  .weapon-slot span{display:none}
}


/* ==========================================================================
   v4.2 HUD layout repair
   The controls hint and weapon selector previously occupied the same bottom
   position. They now have separate rows and safe spacing.
   ========================================================================== */

#weaponHud {
  bottom: 70px;
  z-index: 12;
}

#fallbackLook {
  bottom: 12px;
  z-index: 13;
  max-width: calc(100vw - 32px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#bottom {
  bottom: 22px;
}

@media (max-width: 760px) {
  #weaponHud {
    bottom: 112px;
  }

  #fallbackLook {
    bottom: 12px;
    max-width: calc(100vw - 20px);
  }

  #bottom {
    bottom: 76px;
  }
}

/* Weapon case hints */
.weapon-case-beacon {
  pointer-events: none;
}

/* Tactical role shown in F3/debug only, no extra combat HUD clutter. */


/* ==========================================================================
   v4.3 Level 1 completion and richer objective HUD
   ========================================================================== */
#objective .value{font-size:16px;white-space:nowrap}
#objective #cash{color:var(--lime)}
#complete{position:fixed;inset:0;z-index:40;display:none;place-items:center;padding:18px;background:rgba(2,5,8,.78);backdrop-filter:blur(12px);color:#fff;pointer-events:auto;overflow:auto}
#complete.show{display:grid;animation:completeFade .28s ease both}
.complete-card{width:min(760px,calc(100vw - 30px));max-height:calc(100vh - 36px);overflow:auto;padding:34px;border-radius:20px;border:1px solid rgba(217,243,109,.28);background:linear-gradient(145deg,rgba(11,19,23,.96),rgba(5,10,13,.96));box-shadow:0 30px 100px rgba(0,0,0,.65),0 0 45px rgba(217,243,109,.08)}
.complete-card h2{margin:4px 0 10px;font-size:clamp(30px,5vw,56px);line-height:.95;letter-spacing:-.045em}
.complete-card p{margin:0;color:#b7c2c8;line-height:1.55}
.complete-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:24px 0}
.complete-stats>div{padding:14px;border-radius:11px;border:1px solid rgba(255,255,255,.09);background:rgba(255,255,255,.035)}
.complete-stats span{display:block;color:#91a0a9;font-size:10px;letter-spacing:.12em;text-transform:uppercase;margin-bottom:5px}
.complete-stats b{font-size:25px;color:#fff}
.complete-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px}
#nextLevel,#replay,#levelMenu{width:100%;padding:15px;border:0;border-radius:11px;color:#0c1113;font:900 16px/1 inherit;letter-spacing:.07em;cursor:pointer}
#replay{background:var(--lime)}
#nextLevel{background:#edf3ff;color:#111b22}
#levelMenu{grid-column:1/-1;background:#202b33;color:#eaf0f3;border:1px solid rgba(255,255,255,.12)}
#nextLevel[hidden]{display:none}

.shop-panel{margin:0 0 18px;padding:16px;border-radius:14px;border:1px solid rgba(255,255,255,.09);background:rgba(255,255,255,.035)}
.shop-panel[hidden]{display:none}
.shop-panel__header{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;margin-bottom:12px}
.shop-panel__header span{display:block;color:#91a0a9;font-size:10px;letter-spacing:.14em;text-transform:uppercase}
.shop-panel__header h3{margin:3px 0 0;font-size:18px;letter-spacing:-.02em}
.shop-balance{padding:8px 11px;border-radius:9px;background:rgba(217,243,109,.10);color:var(--lime);font-weight:900;white-space:nowrap}
.shop-upgrades{display:grid;grid-template-columns:repeat(2,1fr);gap:9px}
.shop-upgrade{display:grid;gap:5px;padding:13px;text-align:left;border-radius:11px;border:1px solid rgba(255,255,255,.10);background:rgba(4,9,12,.75);color:#fff;cursor:pointer;transition:.18s transform,.18s border-color,.18s background}
.shop-upgrade:hover{transform:translateY(-2px);border-color:rgba(217,243,109,.5);background:rgba(217,243,109,.06)}
.shop-upgrade.unaffordable{opacity:.62}
.shop-upgrade.maxed{border-color:rgba(217,243,109,.35);cursor:default}
.shop-upgrade__name{font-weight:900;font-size:12px;letter-spacing:.035em}
.shop-upgrade__description{color:#9ba8af;font-size:11px;line-height:1.35}
.shop-upgrade__meta{display:flex;justify-content:space-between;align-items:center;margin-top:4px;color:#dbe2e5;font-size:11px}
.shop-upgrade__meta strong{color:var(--lime)}

@keyframes completeFade{from{opacity:0;transform:scale(.985)}to{opacity:1;transform:none}}
@media(max-width:780px){
  #objective .value{font-size:12px}
  .complete-stats{grid-template-columns:repeat(2,1fr)}
  .complete-actions{grid-template-columns:1fr}
}

/* v4.5 Stamina, level selector and modular campaign */
#survivalWrap{width:min(360px,40vw);display:grid;gap:8px}
#healthWrap{width:100%}
#staminaWrap{width:100%}
#staminaBar{height:9px;border:1px solid rgba(255,255,255,.18);border-radius:999px;overflow:hidden;background:rgba(0,0,0,.46)}
#staminaFill{height:100%;width:100%;background:linear-gradient(90deg,#4b91ba,#8fe1ff);transition:width .12s,background .18s}
#staminaWrap.exhausted #staminaFill{background:linear-gradient(90deg,#a04545,#ff6d6d)}
.level-picker{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:8px 12px;margin:0 0 14px;padding:12px;border-radius:11px;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.035)}
.level-picker label{font-size:10px;letter-spacing:.14em;color:#9eabb4}
#levelSelect{min-width:0;padding:10px 12px;border:1px solid rgba(255,255,255,.14);border-radius:8px;background:#111920;color:#fff;font:800 13px/1 inherit;outline:none}
#musicStatus{grid-column:1/-1;color:var(--lime);font:800 10px/1.35 ui-monospace,Consolas,monospace;letter-spacing:.08em}
@media(max-width:700px){#survivalWrap{width:48vw}.level-picker{grid-template-columns:1fr}.level-picker label{display:none}}


/* ==========================================================================
   v4.5.1 Pause menu and landscape mobile controls
   ========================================================================== */
html,body{overscroll-behavior:none}
body{touch-action:none;-webkit-user-select:none;user-select:none}
canvas{touch-action:none}
#pauseButton{position:fixed;top:max(10px,env(safe-area-inset-top));left:50%;z-index:24;display:none;place-items:center;pointer-events:auto;width:42px;height:34px;transform:translateX(-50%);border:1px solid rgba(255,255,255,.14);border-radius:10px;background:rgba(5,10,14,.72);color:#fff;font:900 18px/1 sans-serif;cursor:pointer;backdrop-filter:blur(8px)}
#pauseButton:hover{border-color:rgba(217,243,109,.55);color:var(--lime)}
#pauseMenu{position:fixed;inset:0;z-index:80;display:none;place-items:center;padding:18px;background:rgba(2,5,8,.78);backdrop-filter:blur(14px);pointer-events:auto}
#pauseMenu.show{display:grid;animation:completeFade .2s ease both}
.pause-card{width:min(520px,calc(100vw - 28px));padding:30px;border:1px solid rgba(217,243,109,.28);border-radius:20px;background:linear-gradient(145deg,rgba(11,19,23,.98),rgba(5,10,13,.98));box-shadow:0 30px 100px rgba(0,0,0,.7)}
.pause-card h2{margin:3px 0 8px;font-size:clamp(38px,8vw,66px);line-height:.95;letter-spacing:-.05em}
.pause-card p{margin:0 0 20px;color:#aab6bd;line-height:1.5}
.pause-actions{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.pause-actions button{min-height:48px;padding:12px;border:1px solid rgba(255,255,255,.11);border-radius:10px;background:#172129;color:#edf3f5;font:900 12px/1.15 inherit;letter-spacing:.05em;cursor:pointer}
.pause-actions button.primary{grid-column:1/-1;background:var(--lime);color:#101511;border-color:transparent;font-size:15px}
.pause-actions button:hover{border-color:rgba(217,243,109,.55)}
.pause-hint{margin-top:14px;color:#75838c;text-align:center;font-size:10px;letter-spacing:.08em}

#mobileControls{position:fixed;inset:0;z-index:31;display:none;pointer-events:none;touch-action:none}
#mobileLookZone{position:absolute;top:0;right:0;width:62%;height:100%;pointer-events:auto;touch-action:none}
.mobile-stick{position:absolute;left:max(24px,env(safe-area-inset-left));bottom:max(25px,env(safe-area-inset-bottom));width:132px;height:132px;border-radius:50%;pointer-events:auto;touch-action:none}
.mobile-stick-ring{position:absolute;inset:0;border:2px solid rgba(255,255,255,.22);border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.09),rgba(3,7,10,.34));box-shadow:inset 0 0 30px rgba(0,0,0,.28)}
.mobile-stick-knob{position:absolute;left:50%;top:50%;width:58px;height:58px;margin:-29px;border:2px solid rgba(217,243,109,.68);border-radius:50%;background:rgba(217,243,109,.18);box-shadow:0 0 24px rgba(217,243,109,.14);will-change:transform}
.mobile-actions{position:absolute;display:grid;gap:9px;pointer-events:none}
.mobile-actions-left{left:max(168px,calc(env(safe-area-inset-left) + 168px));bottom:max(25px,env(safe-area-inset-bottom));grid-template-columns:repeat(2,62px)}
.mobile-actions-right{right:max(18px,env(safe-area-inset-right));bottom:max(20px,env(safe-area-inset-bottom));grid-template-columns:repeat(3,64px);align-items:end}
.mobile-action{display:grid;place-items:center;border:1px solid rgba(255,255,255,.25);border-radius:50%;background:rgba(7,14,18,.57);color:#fff;font:900 10px/1 sans-serif;letter-spacing:.02em;pointer-events:auto;touch-action:none;backdrop-filter:blur(5px);box-shadow:0 6px 20px rgba(0,0,0,.22)}
.mobile-action-small{width:58px;height:58px}
.mobile-action-medium{width:68px;height:68px}
.mobile-action-fire{grid-column:3;grid-row:1/3;width:92px;height:92px;border-color:rgba(255,113,82,.62);background:rgba(119,30,20,.56);font-size:12px}
.mobile-action.pressed,.mobile-action.active{transform:scale(.93);border-color:var(--lime);background:rgba(217,243,109,.22);color:#fff}
.mobile-pause{position:absolute;top:max(10px,env(safe-area-inset-top));right:max(12px,env(safe-area-inset-right));display:grid;place-items:center;width:44px;height:38px;border:1px solid rgba(255,255,255,.22);border-radius:10px;background:rgba(5,10,14,.65);color:#fff;font:900 18px/1 sans-serif;pointer-events:auto;touch-action:none}

#rotatePrompt{position:fixed;inset:0;z-index:110;display:none;place-items:center;padding:24px;background:radial-gradient(circle at center,#17242b,#05090c 72%);color:#fff;text-align:center}
#rotatePrompt.show{display:grid}
.rotate-card{max-width:340px}
.rotate-card h2{margin:20px 0 8px;font-size:32px;letter-spacing:-.04em}
.rotate-card p{margin:0;color:#aebbc2;line-height:1.55}
.phone-rotate-icon{position:relative;width:76px;height:126px;margin:auto;border:4px solid var(--lime);border-radius:16px;animation:rotatePhone 1.8s ease-in-out infinite}
.phone-rotate-icon:after{content:'';position:absolute;left:50%;bottom:7px;width:10px;height:10px;transform:translateX(-50%);border:2px solid var(--lime);border-radius:50%}
.phone-rotate-icon span{position:absolute;inset:12px 8px 24px;border:1px solid rgba(217,243,109,.45);border-radius:6px}
@keyframes rotatePhone{0%,18%{transform:rotate(0)}55%,88%{transform:rotate(90deg)}100%{transform:rotate(0)}}

body.game-running:not(.is-paused) #pauseButton{display:grid}
body.mobile-device #pauseButton{display:none}
body.mobile-device.game-running:not(.is-paused) #mobileControls{display:block}
body.mobile-device.is-paused #mobileControls{display:none}

@media (pointer:coarse) and (orientation:landscape){
  #fallbackLook{display:none}
  #skillHud{display:none}
  #weaponHud{bottom:max(8px,env(safe-area-inset-bottom));min-width:330px;padding:5px 7px;opacity:.78}
  #weaponTitle{display:none}
  .weapon-slot{padding:5px 6px}
  #bottom{bottom:max(8px,env(safe-area-inset-bottom));left:50%;right:auto;width:48%;transform:translateX(-50%);pointer-events:none}
  #survivalWrap{width:45%;gap:4px}
  #healthBar,#staminaBar{height:7px}
  #bottom .label{font-size:8px}
  #ammo{font-size:34px}
  .top{padding:8px max(62px,env(safe-area-inset-right)) 0 max(8px,env(safe-area-inset-left));gap:7px}
  .top .panel{padding:7px 9px}
  .top .value{font-size:10px}
  #objective .value{font-size:10px}
  #crosshair{transform:scale(.82)}
  #pickupHint{bottom:28%}
}

@media (pointer:coarse) and (orientation:landscape) and (max-height:500px){
  .mobile-stick{width:112px;height:112px;bottom:12px}
  .mobile-stick-knob{width:50px;height:50px;margin:-25px}
  .mobile-actions-left{left:145px;bottom:14px;grid-template-columns:repeat(2,52px)}
  .mobile-action-small{width:50px;height:50px;font-size:8px}
  .mobile-action-medium{width:58px;height:58px;font-size:8px}
  .mobile-action-fire{width:80px;height:80px}
  .mobile-actions-right{grid-template-columns:repeat(3,56px);bottom:12px}
  #weaponHud{transform:translateX(-50%) scale(.82);transform-origin:bottom center}
  #bottom{width:44%}
}

@media(max-width:600px){
  .pause-card{padding:22px}
  .pause-actions{grid-template-columns:1fr}
  .pause-actions button.primary{grid-column:auto}
}


/* v4.6 adaptive difficulty, achievements, blood rush and grenades */
#difficultyStatus{margin-top:4px;color:#9eb2bd;font:800 9px/1.2 sans-serif;letter-spacing:.09em;text-transform:uppercase}
#combatResources{margin-bottom:2px;text-align:right;color:#9fb0b8;font:800 9px/1 sans-serif;letter-spacing:.09em}
#combatResources b{color:#d9f36d;font-size:13px}
#bloodRush{position:fixed;inset:0;z-index:19;pointer-events:none;opacity:0;background:radial-gradient(circle at center,transparent 35%,rgba(125,0,0,.16) 63%,rgba(104,0,0,.72) 100%);mix-blend-mode:screen;transition:opacity .3s;animation:bloodPulse .58s ease-in-out infinite alternate}
body.blood-rush #bloodRush{opacity:1}
@keyframes bloodPulse{from{filter:saturate(1);transform:scale(1)}to{filter:saturate(1.5);transform:scale(1.015)}}
#achievementBanner{position:fixed;left:50%;top:17%;z-index:46;display:flex;flex-direction:column;align-items:center;min-width:min(460px,86vw);padding:16px 28px;transform:translate(-50%,-20px) scale(.96);opacity:0;pointer-events:none;border:1px solid rgba(255,92,63,.45);border-radius:14px;background:linear-gradient(135deg,rgba(28,5,5,.92),rgba(7,10,13,.94));box-shadow:0 18px 70px rgba(0,0,0,.62),0 0 42px rgba(220,30,20,.15);transition:opacity .18s,transform .2s}
#achievementBanner.show{opacity:1;transform:translate(-50%,0) scale(1)}
#achievementBanner small{color:#ff8a6e;font:900 9px/1 sans-serif;letter-spacing:.28em}
#achievementBanner b{margin-top:6px;color:#fff;font:950 clamp(20px,4vw,34px)/1 sans-serif;letter-spacing:-.02em}
#achievementBanner span{margin-top:6px;color:#c8b5b1;font:700 11px/1.2 sans-serif;letter-spacing:.05em}
.difficulty-picker{display:grid;grid-template-columns:auto 1fr;gap:9px;align-items:center;margin-top:8px}
.difficulty-picker label,.pause-select-label{color:#8f9da5;font:900 9px/1 sans-serif;letter-spacing:.12em}
.difficulty-picker select,.pause-select{min-height:38px;border:1px solid rgba(255,255,255,.14);border-radius:8px;background:#101920;color:#eef3f5;font:800 11px/1 sans-serif;padding:0 10px}
.pause-select-label{align-self:center;padding-left:10px}
.pause-select{width:100%}
.mobile-action-grenade{border-color:rgba(255,191,73,.62);background:rgba(91,56,9,.62)}
@media(max-height:520px) and (orientation:landscape){
  #achievementBanner{top:11%;padding:10px 20px}
  #achievementBanner b{font-size:20px}
  #difficultyStatus{display:none}
}

/* v4.7 streamed levels and player flashlight */
#combatResources{display:flex;justify-content:flex-end;gap:12px;flex-wrap:wrap}
#flashlightStatus{min-width:24px;display:inline-block;text-align:left}
.mobile-actions-left{grid-template-columns:repeat(3,58px)}
@media (pointer:coarse) and (orientation:landscape) and (max-height:500px){
  .mobile-actions-left{grid-template-columns:repeat(3,50px);left:135px}
}

/* v4.8 Atmosphere, operative card and prewarm status */
#operationName{margin-top:6px;color:#d9f36d;font-size:11px;letter-spacing:.12em}
.briefing-meta{margin-top:10px;color:#8ea0ab;font-size:13px}
#preloadStatus{margin-top:8px;color:#d9f36d;font-size:12px;letter-spacing:.08em}

/* ==========================================================================
   v4.8.1 Mobile landscape start screen and controls repair
   ========================================================================== */
#start{
  overflow-x:hidden;
  overflow-y:auto;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  padding:max(12px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left));
}
#start>.card{
  max-height:calc(100dvh - max(24px,env(safe-area-inset-top)) - max(24px,env(safe-area-inset-bottom)));
  overflow-y:auto;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
}
body.mobile-device.game-running:not(.is-paused):not(.portrait-mobile) #mobileControls{
  display:block!important;
  visibility:visible;
  opacity:1;
}
body.mobile-device.portrait-mobile #mobileControls{
  display:none!important;
}

@media (orientation:landscape) and (max-height:600px){
  body.mobile-device #start{
    display:block;
    padding:max(6px,env(safe-area-inset-top)) max(8px,env(safe-area-inset-right)) max(6px,env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left));
  }
  body.mobile-device #start>.card{
    width:min(920px,100%);
    max-height:calc(100dvh - max(12px,env(safe-area-inset-top)) - max(12px,env(safe-area-inset-bottom)));
    margin:0 auto;
    padding:14px 18px 16px;
    border-radius:14px;
  }
  body.mobile-device #start .card h1{
    margin-bottom:7px;
    font-size:clamp(36px,10vh,58px);
    line-height:.82;
  }
  body.mobile-device #briefingText{
    display:-webkit-box;
    overflow:hidden;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:2;
    font-size:12px;
    line-height:1.35;
  }
  body.mobile-device #briefingMeta{
    display:none;
  }
  body.mobile-device #start .controls{
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:5px;
    margin:9px 0;
  }
  body.mobile-device #start .control{
    min-width:0;
    padding:6px 7px;
    font-size:9px;
    line-height:1.2;
  }
  body.mobile-device #start .control:nth-child(n+5){
    display:none;
  }
  body.mobile-device #start .level-picker{
    grid-template-columns:minmax(150px,1.35fr) minmax(140px,1fr);
    gap:7px 10px;
    margin:0 0 8px;
    padding:8px;
  }
  body.mobile-device #start .level-picker>label{
    display:none;
  }
  body.mobile-device #start .difficulty-picker{
    grid-template-columns:1fr;
    margin:0;
  }
  body.mobile-device #start .difficulty-picker label{
    display:none;
  }
  body.mobile-device #start .level-picker select,
  body.mobile-device #start .difficulty-picker select{
    width:100%;
    min-height:34px;
    font-size:11px;
  }
  body.mobile-device #musicStatus,
  body.mobile-device #preloadStatus{
    margin:0;
    font-size:9px;
    line-height:1.25;
  }
  body.mobile-device #play{
    position:sticky;
    bottom:0;
    z-index:4;
    min-height:42px;
    padding:11px;
    box-shadow:0 -10px 24px rgba(7,12,17,.94);
    font-size:14px;
  }
  body.mobile-device #hint{
    display:none;
  }
}

@media (orientation:landscape) and (max-height:430px){
  body.mobile-device #start .controls{
    display:none;
  }
  body.mobile-device #start>.card{
    padding:10px 14px 12px;
  }
  body.mobile-device #start .card h1{
    font-size:34px;
  }
  body.mobile-device #briefingText{
    -webkit-line-clamp:1;
  }
  .mobile-stick{
    left:max(10px,env(safe-area-inset-left));
    bottom:max(8px,env(safe-area-inset-bottom));
    width:96px;
    height:96px;
  }
  .mobile-stick-knob{
    width:44px;
    height:44px;
    margin:-22px;
  }
  .mobile-actions-left{
    left:max(112px,calc(env(safe-area-inset-left) + 112px));
    bottom:max(8px,env(safe-area-inset-bottom));
    grid-template-columns:repeat(3,44px);
    gap:5px;
  }
  .mobile-actions-right{
    right:max(8px,env(safe-area-inset-right));
    bottom:max(8px,env(safe-area-inset-bottom));
    grid-template-columns:repeat(3,48px);
    gap:5px;
  }
  .mobile-action-small{
    width:43px;
    height:43px;
    font-size:7px;
  }
  .mobile-action-medium{
    width:50px;
    height:50px;
    font-size:7px;
  }
  .mobile-action-fire{
    width:70px;
    height:70px;
    font-size:9px;
  }
  .mobile-pause{
    top:max(5px,env(safe-area-inset-top));
    right:max(7px,env(safe-area-inset-right));
    width:38px;
    height:32px;
  }
}

/* ========================================================================== 
   v5.0 Air Defense command HUD, controllable AA gun and decoy controls
   ========================================================================== */
#airDefenseHud{
  position:fixed;
  left:50%;
  top:88px;
  z-index:23;
  display:none;
  width:min(720px,calc(100vw - 36px));
  transform:translateX(-50%);
  padding:12px 14px 10px;
  border:1px solid rgba(108,211,255,.28);
  border-radius:14px;
  background:linear-gradient(145deg,rgba(4,15,21,.88),rgba(7,22,27,.76));
  color:#eefaff;
  box-shadow:0 18px 55px rgba(0,0,0,.32),inset 0 0 35px rgba(45,174,220,.035);
  backdrop-filter:blur(9px);
  pointer-events:none;
  transition:border-color .18s,box-shadow .18s,transform .18s;
}
#airDefenseHud.show{display:block}
.air-hud-head{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:9px}
.air-hud-head small{display:block;color:#74d3ef;font:900 9px/1 sans-serif;letter-spacing:.18em}
.air-hud-head b{display:block;margin-top:4px;color:#fff;font:900 13px/1 sans-serif;letter-spacing:.08em}
#airTurretStatus{padding:5px 8px;border:1px solid rgba(117,214,243,.28);border-radius:7px;color:#b9efff;font:900 9px/1 sans-serif;letter-spacing:.08em}
.air-hud-grid{display:grid;grid-template-columns:1.6fr repeat(4,.7fr) 1fr 1.25fr;gap:7px}
.air-hud-stat{min-width:0;padding:7px 8px;border:1px solid rgba(255,255,255,.075);border-radius:8px;background:rgba(255,255,255,.035)}
.air-hud-stat span{display:block;overflow:hidden;color:#8fa8b2;font:800 7px/1 sans-serif;letter-spacing:.08em;white-space:nowrap;text-overflow:ellipsis}
.air-hud-stat b{display:block;margin-top:4px;color:#eaf9ff;font:950 15px/1 sans-serif}
.air-hud-stat i{display:block;height:5px;margin-top:6px;overflow:hidden;border-radius:99px;background:rgba(255,255,255,.08)}
.air-hud-stat i em{display:block;width:100%;height:100%;border-radius:inherit;background:linear-gradient(90deg,#56d88e,#c8ef62);transition:width .12s}
.air-heat i em{width:0;background:linear-gradient(90deg,#52b6ee,#ffd15d,#ff5d45)}
#airInteractionHint{margin-top:8px;color:#b8d7df;text-align:center;font:900 8px/1.2 sans-serif;letter-spacing:.1em}
#airDefenseHud.hit{border-color:rgba(255,220,120,.9);box-shadow:0 0 36px rgba(255,170,70,.34),inset 0 0 25px rgba(255,190,80,.08)}
#airDefenseHud.danger{border-color:rgba(255,89,62,.72);box-shadow:0 0 32px rgba(255,55,30,.18)}
#airDefenseHud.danger .air-battery i em{background:linear-gradient(90deg,#ff493c,#ff9b48)}
body.aa-turret-active #weaponHud,body.aa-turret-active #bottom{opacity:.16}
body.aa-turret-active #crosshair{--spread:14px;filter:drop-shadow(0 0 6px rgba(95,221,255,.85));transform:scale(1.18)}
body.aa-turret-active #crosshair .cross-line{background:#8ee8ff}
#mobileSpecial,#mobileTurret,#mobileDecoy{display:none}
body.air-defense-level #mobileSpecial,body.air-defense-level #mobileTurret,body.air-defense-level #mobileDecoy{display:grid}
body.air-defense-level #mobileTurret{border-color:rgba(107,221,255,.55);background:rgba(24,89,112,.58)}
body.air-defense-level #mobileDecoy{border-color:rgba(255,174,79,.55);background:rgba(104,62,21,.58)}

@media(max-width:900px){
  #airDefenseHud{top:72px;width:min(650px,calc(100vw - 24px));padding:9px 10px}
  .air-hud-grid{grid-template-columns:1.45fr repeat(4,.62fr) 1fr 1.05fr;gap:5px}
  .air-hud-stat{padding:6px}
}

@media (pointer:coarse) and (orientation:landscape){
  #airDefenseHud{left:50%;top:max(5px,env(safe-area-inset-top));width:58vw;max-width:620px;padding:6px 8px;transform:translateX(-50%);border-radius:9px}
  .air-hud-head{margin-bottom:5px}
  .air-hud-head small{font-size:7px}.air-hud-head b{font-size:10px;margin-top:2px}
  #airTurretStatus{padding:3px 5px;font-size:7px}
  .air-hud-grid{grid-template-columns:1.3fr repeat(4,.58fr) .9fr 1fr;gap:3px}
  .air-hud-stat{padding:4px 5px;border-radius:5px}
  .air-hud-stat span{font-size:6px}.air-hud-stat b{font-size:11px;margin-top:2px}.air-hud-stat i{height:3px;margin-top:3px}
  #airInteractionHint{margin-top:4px;font-size:6px}
  body.air-defense-level .mobile-actions-left{grid-template-columns:repeat(3,58px);left:max(162px,calc(env(safe-area-inset-left) + 162px))}
}

@media (pointer:coarse) and (orientation:landscape) and (max-height:500px){
  #airDefenseHud{width:54vw;top:3px;padding:4px 6px}
  .air-hud-head{margin-bottom:3px}.air-hud-stat{padding:3px 4px}
  #airInteractionHint{display:none}
  body.air-defense-level .mobile-actions-left{grid-template-columns:repeat(3,48px);left:138px;gap:6px}
  body.air-defense-level .mobile-action-small{width:46px;height:46px;font-size:7px}
}

/* v5.1.0 PVO radar, lock and aerial objective layout */
.air-radar-row{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:8px}
#airRadar{position:relative;width:126px;height:126px;overflow:hidden;border:1px solid rgba(98,220,255,.42);border-radius:50%;background:radial-gradient(circle,rgba(44,140,164,.13) 0 2%,transparent 3%),repeating-radial-gradient(circle,transparent 0 20%,rgba(104,222,245,.13) 21% 22%),linear-gradient(90deg,transparent 49%,rgba(91,218,245,.18) 50% 51%,transparent 52%),linear-gradient(transparent 49%,rgba(91,218,245,.18) 50% 51%,transparent 52%),rgba(2,18,24,.78);box-shadow:inset 0 0 24px rgba(59,210,241,.1),0 0 18px rgba(39,188,225,.08)}
.air-radar-sweep{position:absolute;inset:50% 50% 0 0;transform-origin:100% 0;background:linear-gradient(35deg,transparent 35%,rgba(81,235,255,.28));animation:airRadarSweep 3s linear infinite;clip-path:polygon(100% 0,0 100%,100% 100%)}
@keyframes airRadarSweep{to{transform:rotate(360deg)}}
#airRadarBlips{position:absolute;inset:0}
.air-radar-blip{position:absolute;width:6px;height:6px;margin:-3px 0 0 -3px;border-radius:50%;background:#ff765f;box-shadow:0 0 8px currentColor;transition:left .10s linear,top .10s linear,opacity .15s}
.air-radar-blip.decoy{width:5px;height:5px;margin:-2.5px 0 0 -2.5px;background:#ffd469;clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%)}
.air-objective-progress{min-width:112px;padding:8px 11px;border:1px solid rgba(255,255,255,.08);border-radius:8px;background:rgba(255,255,255,.035)}
.air-objective-progress span,.air-objective-progress small{display:block;color:#8fa8b2;font:800 7px/1.2 sans-serif;letter-spacing:.09em}
.air-objective-progress b{display:block;margin:4px 0;color:#e9fbff;font:950 20px/1 sans-serif}
body.aa-turret-active #airRadar{border-color:rgba(126,239,255,.82);box-shadow:inset 0 0 28px rgba(59,210,241,.14),0 0 22px rgba(39,188,225,.16)}
@media (pointer:coarse) and (orientation:landscape){.air-radar-row{position:absolute;right:7px;top:37px;margin:0;gap:5px}#airRadar{width:72px;height:72px}.air-objective-progress{min-width:66px;padding:4px 6px}.air-objective-progress span,.air-objective-progress small{font-size:5px}.air-objective-progress b{font-size:12px;margin:2px 0}}
@media (pointer:coarse) and (orientation:landscape) and (max-height:500px){.air-radar-row{display:none}}

/* ========================================================================== 
   v5.1 Air-defense HUD separation and MANPADS lock feedback
   ========================================================================== */
body.air-defense-level #message{
  top:18%;
  max-width:min(860px,82vw);
  padding:8px 16px;
  border-radius:10px;
  background:rgba(3,13,18,.32);
  text-shadow:0 3px 18px rgba(0,0,0,.85);
  font-size:clamp(20px,3.2vw,42px);
}

.air-radar-blip.locked{
  z-index:3;
  width:10px;
  height:10px;
  margin:-5px 0 0 -5px;
  background:#caff76;
  clip-path:none;
  border:1px solid rgba(255,255,255,.9);
  box-shadow:0 0 4px #fff,0 0 14px #b8ff78,0 0 24px rgba(184,255,120,.72);
  animation:airLockPulse .45s ease-in-out infinite alternate;
}
.air-radar-blip.edge{filter:saturate(.65);}
@keyframes airLockPulse{to{transform:scale(1.45)}}

@media (pointer:fine) and (min-width:901px){
  #airDefenseHud{
    padding-bottom:113px;
  }
  .air-radar-row{
    position:absolute;
    right:14px;
    bottom:9px;
    justify-content:flex-end;
    gap:9px;
    margin:0;
  }
  #airRadar{
    width:108px;
    height:108px;
  }
  .air-objective-progress{
    min-width:104px;
    padding:7px 9px;
  }
  #airInteractionHint{
    position:absolute;
    left:14px;
    right:252px;
    bottom:24px;
    margin:0;
    text-align:left;
    line-height:1.35;
  }
}

@media(max-width:900px){
  body.air-defense-level #message{top:16%;font-size:clamp(16px,4.5vw,30px)}
}

/* ========================================================================== 
   v5.2 PVO Frontline — HUD swap, stronger radar and transparent VKS scope
   ========================================================================== */
#scopeOverlay{
  position:fixed;
  inset:0;
  z-index:21;
  display:none;
  pointer-events:none;
  background:
    radial-gradient(circle at 50% 50%,rgba(64,91,96,.06) 0 24.8vmin,rgba(3,7,9,.94) 25.4vmin 100%);
}
body.vks-scope-active #scopeOverlay{display:block}
body.vks-scope-active #crosshair,body.vks-scope-active #adsDot{opacity:0!important}
.scope-reticle{
  position:absolute;
  left:50%;
  top:50%;
  width:49.5vmin;
  height:49.5vmin;
  transform:translate(-50%,-50%);
  border:2px solid rgba(9,15,17,.92);
  border-radius:50%;
  box-shadow:0 0 0 4px rgba(124,163,170,.18),inset 0 0 28px rgba(0,0,0,.26);
}
.scope-line{position:absolute;display:block;background:rgba(18,28,31,.86);box-shadow:0 0 1px rgba(255,255,255,.2)}
.scope-line-h{left:7%;right:7%;top:50%;height:1px}
.scope-line-v{top:7%;bottom:7%;left:50%;width:1px}
.scope-center{position:absolute;left:50%;top:50%;width:8px;height:8px;border:1px solid rgba(214,75,62,.95);border-radius:50%;transform:translate(-50%,-50%);box-shadow:0 0 7px rgba(255,83,66,.42)}
.scope-tick{position:absolute;left:50%;width:16px;height:1px;background:rgba(18,28,31,.82);transform:translateX(-50%)}
.scope-tick-1{top:59%}.scope-tick-2{top:67%;width:24px}.scope-tick-3{top:75%;width:32px}

@media (pointer:fine) and (min-width:1101px){
  body.air-defense-level .top{
    top:14px;
    left:14px;
    right:14px;
    align-items:flex-start;
    justify-content:flex-start;
  }
  body.air-defense-level #objective{
    order:-2;
    width:min(365px,26vw);
    min-width:300px;
    text-align:left;
    margin-right:auto;
  }
  body.air-defense-level #operatorPanel{
    position:absolute;
    left:0;
    top:86px;
    width:245px;
    min-width:0;
    padding:8px 11px;
  }
  body.air-defense-level #skillHud{top:174px}
  body.air-defense-level #airDefenseHud{
    left:auto;
    right:14px;
    top:14px;
    width:min(690px,calc(100vw - 420px));
    transform:none;
  }
  body.air-defense-level #killfeed{top:228px}
}

.air-radar-blip{
  width:8px;
  height:8px;
  margin:-4px 0 0 -4px;
  border:1px solid rgba(255,255,255,.82);
  background:#ff4e42;
  box-shadow:0 0 4px #fff,0 0 12px #ff5c4f;
}
.air-radar-blip.decoy{
  width:7px;
  height:7px;
  margin:-3.5px 0 0 -3.5px;
  background:#ffd84e;
  box-shadow:0 0 4px #fff,0 0 10px #ffd84e;
}
.air-radar-blip.cruise{
  width:12px;
  height:5px;
  margin:-2.5px 0 0 -6px;
  border-radius:2px;
  background:#ff8b3d;
  clip-path:polygon(0 28%,76% 28%,100% 50%,76% 72%,0 72%);
  box-shadow:0 0 4px #fff,0 0 14px #ff7a2f;
}
.air-radar-blip.diving{
  width:11px;
  height:11px;
  margin:-5.5px 0 0 -5.5px;
  background:#ff2b1f;
  animation:airDivePulse .32s ease-in-out infinite alternate;
}
@keyframes airDivePulse{to{transform:scale(1.55);box-shadow:0 0 7px #fff,0 0 20px #ff2b1f}}

@media(max-width:1100px) and (pointer:fine){
  body.air-defense-level #operatorPanel{display:none}
  body.air-defense-level #objective{text-align:left}
  body.air-defense-level #airDefenseHud{top:74px}
}

/* v5.8.0 — GLB/GLTF asset importer */
.asset-import-panel {
  position: fixed;
  inset: 0;
  z-index: 1800;
  display: none;
  place-items: center;
  padding: 24px;
  background: rgba(3, 10, 16, .82);
  backdrop-filter: blur(8px);
}
.asset-import-panel.show { display: grid; }
.asset-import-card {
  width: min(720px, 96vw);
  max-height: 92vh;
  overflow: auto;
  padding: 22px;
  border: 1px solid rgba(146, 213, 255, .28);
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(15, 29, 40, .98), rgba(7, 17, 25, .98));
  color: #e8f4fb;
  box-shadow: 0 24px 80px rgba(0, 0, 0, .5);
}
.asset-import-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 12px;
}
.asset-import-head small { display: block; color: #72c9ff; letter-spacing: .13em; }
.asset-import-head b { display: block; margin-top: 4px; font-size: 22px; }
.asset-import-head button {
  width: 42px;
  min-width: 42px;
  height: 42px;
  padding: 0;
  border-radius: 10px;
  font-size: 28px;
}
.asset-import-card p,
.asset-import-note { color: #aac0ce; line-height: 1.5; }
.asset-import-card code { color: #aee0ff; }
.asset-import-card label {
  display: block;
  margin-top: 14px;
  color: #b9d2df;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
}
.asset-import-card input[type="file"],
.asset-import-card input[type="number"],
.asset-import-card textarea {
  box-sizing: border-box;
  width: 100%;
  margin-top: 7px;
  padding: 11px 12px;
  border: 1px solid rgba(151, 198, 224, .25);
  border-radius: 10px;
  background: rgba(2, 10, 16, .74);
  color: #edf8ff;
  font: inherit;
}
.asset-import-card textarea {
  min-height: 155px;
  resize: vertical;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 12px;
  line-height: 1.45;
}
.asset-import-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.asset-import-check {
  display: flex !important;
  align-items: center;
  gap: 9px;
  letter-spacing: 0 !important;
  font-size: 13px !important;
}
.asset-import-check input { width: 18px; height: 18px; }
.asset-import-status {
  min-height: 22px;
  margin-top: 14px;
  color: #9ee7a5;
  line-height: 1.45;
}
.asset-import-status.error { color: #ff9e91; }
.asset-import-actions {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 10px;
  margin-top: 14px;
}
.asset-import-note {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(151, 198, 224, .16);
  font-size: 12px;
}
@media (max-width: 640px) {
  .asset-import-panel { padding: 10px; }
  .asset-import-card { padding: 16px; }
  .asset-import-grid,
  .asset-import-actions { grid-template-columns: 1fr; }
}

/* ===== v5.9.0 · Chess House / local checkers alpha ===== */
body.is-checkers-level #weaponHud,
body.is-checkers-level #crosshair,
body.is-checkers-level #adsDot,
body.is-checkers-level #skillHud,
body.is-checkers-level #survivalWrap,
body.is-checkers-level #combatResources,
body.is-checkers-level #stance,
body.is-checkers-level #airDefenseHud {
  display: none !important;
}

body.is-checkers-level #objective {
  min-width: min(480px, 60vw);
}

body.is-checkers-level #objective .value {
  color: #ead6ad;
}

#boardGameHint {
  position: fixed;
  left: 50%;
  bottom: 108px;
  z-index: 62;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 15px;
  border: 1px solid rgba(224,183,111,.56);
  border-radius: 10px;
  background: rgba(20,17,14,.91);
  color: #f0d8aa;
  font: 800 14px/1.2 Arial, sans-serif;
  letter-spacing: .04em;
  box-shadow: 0 14px 40px rgba(0,0,0,.42), inset 0 0 0 1px rgba(255,255,255,.04);
  opacity: 0;
  transform: translate(-50%, 12px);
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
}

#boardGameHint.show {
  opacity: 1;
  transform: translate(-50%, 0);
}

#boardGameHint button {
  display: none;
  min-height: 38px;
  padding: 0 15px;
  border: 1px solid #d0a45e;
  border-radius: 7px;
  background: linear-gradient(#a66f31, #70451e);
  color: #fff4dd;
  font: 900 12px/1 Arial, sans-serif;
  letter-spacing: .08em;
  pointer-events: auto;
}

#checkersOverlay {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: grid;
  place-items: center;
  padding: 22px;
  background: radial-gradient(circle at 50% 42%, rgba(59,44,30,.44), rgba(5,6,7,.84));
  backdrop-filter: blur(7px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .22s ease, visibility .22s ease;
}

#checkersOverlay.show {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.checkers-shell {
  width: min(1120px, 96vw);
  max-height: 96vh;
  overflow: auto;
  border: 1px solid rgba(222,181,106,.62);
  border-radius: 18px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.035), transparent 34%),
    linear-gradient(#211a15, #100e0c);
  color: #f1e4cc;
  box-shadow: 0 30px 100px rgba(0,0,0,.72), inset 0 0 0 1px rgba(255,255,255,.035);
}

.checkers-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 22px;
  padding: 20px 24px 15px;
  border-bottom: 1px solid rgba(213,169,92,.28);
}

.checkers-head small {
  color: #bd9458;
  font: 800 11px/1.2 Arial, sans-serif;
  letter-spacing: .16em;
}

.checkers-head h2 {
  margin: 5px 0 2px;
  color: #f0ca87;
  font: 950 clamp(25px, 3.2vw, 42px)/1 Arial, sans-serif;
  letter-spacing: .05em;
}

.checkers-head p {
  margin: 5px 0 0;
  color: #c6b79e;
  font: 600 13px/1.4 Arial, sans-serif;
}

.checkers-close {
  width: 42px;
  height: 42px;
  border: 1px solid rgba(222,181,106,.38);
  border-radius: 50%;
  background: rgba(255,255,255,.035);
  color: #e8d7ba;
  font: 300 30px/1 Arial, sans-serif;
}

.checkers-body {
  display: grid;
  grid-template-columns: minmax(130px, .65fr) minmax(330px, 1.7fr) minmax(130px, .65fr);
  align-items: center;
  gap: 22px;
  padding: 18px 24px 12px;
}

.checkers-side {
  display: grid;
  gap: 7px;
  justify-items: center;
  padding: 20px 10px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 12px;
  background: rgba(255,255,255,.025);
  text-align: center;
}

.checkers-side span {
  color: #a88a60;
  font: 800 10px/1 Arial, sans-serif;
  letter-spacing: .14em;
}

.checkers-side b {
  font: 950 19px/1 Arial, sans-serif;
  letter-spacing: .08em;
}

.checkers-side i {
  color: #9e9588;
  font: 500 11px/1.25 Arial, sans-serif;
}

.checkers-side-white b { color: #ead8b5; }
.checkers-side-black b { color: #c85e55; }

.checkers-main {
  display: grid;
  justify-items: center;
  gap: 9px;
}

.checkers-status {
  min-height: 24px;
  color: #f2cf91;
  font: 950 17px/1.2 Arial, sans-serif;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.checkers-status.winner {
  color: #8ee0a9;
  text-shadow: 0 0 18px rgba(83,224,139,.32);
}

.checkers-board {
  width: min(62vh, 610px, 64vw);
  aspect-ratio: 1;
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  overflow: hidden;
  border: 10px solid #6e492a;
  border-radius: 8px;
  background: #6e492a;
  box-shadow: 0 18px 55px rgba(0,0,0,.55), inset 0 0 0 2px #d4aa68;
  touch-action: manipulation;
}

.checkers-cell {
  position: relative;
  display: grid;
  place-items: center;
  min-width: 0;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  cursor: pointer;
}

.checkers-cell.light { background: #dfc493; }
.checkers-cell.dark { background: #493020; }
.checkers-cell.last-move::before {
  content: '';
  position: absolute;
  inset: 7%;
  border: 2px solid rgba(245,203,113,.48);
  border-radius: 4px;
}

.checkers-cell.selected {
  box-shadow: inset 0 0 0 5px #f5c96e;
  z-index: 2;
}

.checkers-cell.legal::after {
  content: '';
  position: absolute;
  width: 28%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: rgba(96,226,143,.72);
  box-shadow: 0 0 15px rgba(96,226,143,.45);
}

.checkers-cell.can-capture::before {
  content: '';
  position: absolute;
  inset: 8%;
  border: 3px solid rgba(255,104,81,.85);
  border-radius: 50%;
  animation: checkersCapturePulse 1s ease-in-out infinite;
}

@keyframes checkersCapturePulse {
  50% { transform: scale(.91); opacity: .55; }
}

.checkers-piece {
  position: relative;
  z-index: 3;
  width: 74%;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: 50%;
  box-shadow: 0 6px 10px rgba(0,0,0,.45), inset 0 0 0 4px rgba(255,255,255,.13), inset 0 -7px 10px rgba(0,0,0,.26);
  transition: transform .12s ease;
}

.checkers-cell:hover .checkers-piece { transform: translateY(-2px); }
.checkers-piece.white { background: linear-gradient(145deg, #fff0cf, #bd9768); border: 2px solid #fff1d4; }
.checkers-piece.black { background: linear-gradient(145deg, #8b302d, #351012); border: 2px solid #bc5a50; }
.checkers-piece i {
  width: 55%;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,.26);
  color: #f5d27d;
  font: normal 900 clamp(13px, 2vw, 24px)/1 serif;
}
.checkers-piece.king i { background: rgba(0,0,0,.2); }

.checkers-detail {
  min-height: 18px;
  color: #cbbda7;
  font: 650 12px/1.3 Arial, sans-serif;
  text-align: center;
}

.checkers-score {
  color: #a8906d;
  font: 800 11px/1.2 Arial, sans-serif;
  letter-spacing: .04em;
}

.checkers-actions {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  padding: 12px 24px 15px;
}

.checkers-actions button {
  min-height: 42px;
  padding: 0 18px;
  border: 1px solid rgba(218,176,103,.42);
  border-radius: 8px;
  background: #28211b;
  color: #e6d3b3;
  font: 900 12px/1 Arial, sans-serif;
  letter-spacing: .06em;
}

.checkers-actions button.primary {
  background: linear-gradient(#a26c31, #68401e);
  color: #fff2da;
  border-color: #d1a35c;
}

.checkers-rules {
  padding: 0 20px 18px;
  color: #8f806d;
  font: 650 11px/1.3 Arial, sans-serif;
  text-align: center;
}

body.checkers-open #hud,
body.checkers-open #mobileControls,
body.checkers-open #fallbackLook {
  visibility: hidden !important;
}

@media (pointer: coarse), (max-width: 860px) {
  #boardGameHint {
    bottom: 88px;
    width: min(92vw, 410px);
    justify-content: space-between;
    font-size: 12px;
  }
  #boardGameHint button { display: inline-flex; align-items: center; justify-content: center; }
  .checkers-shell { width: min(98vw, 820px); }
  .checkers-body {
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 10px 12px;
  }
  .checkers-side {
    display: none;
  }
  .checkers-board {
    width: min(65vh, 88vw);
    border-width: 7px;
  }
  .checkers-head { padding: 12px 15px 9px; }
  .checkers-head p { display: none; }
  .checkers-actions { padding: 7px 10px 10px; gap: 6px; }
  .checkers-actions button { min-height: 38px; padding: 0 12px; font-size: 10px; }
  .checkers-rules { display: none; }
}

@media (max-height: 620px) and (orientation: landscape) {
  #checkersOverlay { padding: 6px; }
  .checkers-shell { max-height: 99vh; }
  .checkers-head { padding: 7px 12px 5px; }
  .checkers-head h2 { font-size: 24px; }
  .checkers-head small, .checkers-head p { display: none; }
  .checkers-close { width: 34px; height: 34px; font-size: 25px; }
  .checkers-body { padding: 4px 10px; }
  .checkers-status { font-size: 13px; min-height: 16px; }
  .checkers-board { width: min(73vh, 74vw); border-width: 6px; }
  .checkers-detail, .checkers-score { font-size: 9px; min-height: 12px; }
  .checkers-actions { padding: 5px 8px 7px; }
  .checkers-actions button { min-height: 32px; }
}

/* v5.9.2 — expanded board plus meme avatar library */
.checkers-shell {
  width: min(1440px, 98vw);
  max-height: 98vh;
}

.checkers-body {
  grid-template-columns: minmax(260px, 320px) minmax(430px, 1fr) minmax(190px, 220px);
  align-items: center;
  gap: clamp(14px, 1.8vw, 26px);
  padding: 18px 24px 10px;
}

.checkers-main {
  width: 100%;
  min-width: 0;
}

.checkers-board {
  width: min(64vh, 650px, 54vw);
  max-width: 100%;
  aspect-ratio: 1 / 1;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  grid-template-rows: repeat(8, minmax(0, 1fr));
  grid-auto-rows: minmax(0, 1fr);
  box-sizing: border-box;
}

.checkers-cell {
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  box-sizing: border-box;
  appearance: none;
  -webkit-appearance: none;
  line-height: 0;
}

.checkers-avatar-picker,
.checkers-player-card {
  border: 1px solid rgba(218,176,103,.30);
  border-radius: 14px;
  background:
    linear-gradient(145deg, rgba(255,255,255,.032), transparent 48%),
    rgba(10,10,10,.20);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.018);
}

.checkers-avatar-picker {
  display: grid;
  gap: 10px;
  align-content: start;
  padding: 16px 13px;
  text-align: center;
  max-height: 74vh;
  overflow: auto;
}

.checkers-panel-title {
  color: #e6bd78;
  font: 900 12px/1.2 Arial, sans-serif;
  letter-spacing: .13em;
}

.checkers-avatar-picker > p {
  margin: -2px 0 2px;
  color: #aa9b86;
  font: 650 11px/1.35 Arial, sans-serif;
}

.checkers-side-targets {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.checkers-side-target {
  min-height: 34px;
  border: 1px solid rgba(218,176,103,.30);
  border-radius: 9px;
  background: rgba(255,255,255,.03);
  color: #d8bf97;
  font: 900 10px/1 Arial, sans-serif;
  letter-spacing: .08em;
}

.checkers-side-target.active {
  border-color: #d9a553;
  background: linear-gradient(180deg, rgba(205,148,68,.22), rgba(255,255,255,.03));
  color: #fff1d5;
}

.checkers-avatar-options {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.checkers-avatar-option {
  position: relative;
  display: grid;
  justify-items: center;
  align-content: start;
  gap: 5px;
  min-width: 0;
  min-height: 128px;
  padding: 8px 5px 7px;
  border: 1px solid rgba(218,176,103,.20);
  border-radius: 11px;
  background: rgba(255,255,255,.025);
  color: #d9c5a4;
  cursor: pointer;
  transition: border-color .18s ease, background .18s ease, transform .18s ease, box-shadow .18s ease;
}

.checkers-avatar-option:hover {
  transform: translateY(-1px);
  border-color: rgba(232,190,112,.55);
}

.checkers-avatar-option.selected-white,
.checkers-avatar-option.selected-black {
  background: linear-gradient(180deg, rgba(205,148,68,.18), rgba(255,255,255,.025));
  box-shadow: 0 0 0 2px rgba(220,165,79,.12), 0 8px 22px rgba(0,0,0,.26);
}

.checkers-avatar-option.selected-white { border-color: #e7d5b4; }
.checkers-avatar-option.selected-black { border-color: #d9786f; }

.checkers-avatar-option img,
.checkers-player-avatar {
  display: block;
  object-fit: cover;
  object-position: center;
  border-radius: 50%;
  border: 2px solid rgba(224,177,94,.78);
  background: #1d1915;
  box-shadow: 0 7px 18px rgba(0,0,0,.38), inset 0 0 0 2px rgba(255,255,255,.10);
}

.checkers-avatar-option img {
  width: clamp(54px, 4.3vw, 72px);
  aspect-ratio: 1;
}

.checkers-avatar-option span {
  max-width: 100%;
  min-height: 22px;
  color: #e8d6b7;
  font: 900 8px/1.15 Arial, sans-serif;
  letter-spacing: .06em;
  text-wrap: balance;
}

.checkers-avatar-option small {
  min-width: 54px;
  min-height: 14px;
  padding: 4px 5px 3px;
  border-radius: 999px;
  background: rgba(215,166,87,.13);
  color: transparent;
  font: 900 8px/1 Arial, sans-serif;
  letter-spacing: .08em;
}

.checkers-avatar-option.selected-white small {
  background: #d5bd92;
  color: #2a1e14;
}

.checkers-avatar-option.selected-black small {
  background: #a14941;
  color: #fff1d5;
}

.checkers-swap-players {
  min-height: 36px;
  padding: 0 10px;
  border: 1px solid rgba(218,176,103,.34);
  border-radius: 8px;
  background: #28211b;
  color: #e5cfab;
  font: 900 9px/1.15 Arial, sans-serif;
  letter-spacing: .06em;
}

.checkers-avatar-prompt {
  color: #9d8d76;
  font: 700 9px/1.3 Arial, sans-serif;
}

.checkers-player-stack {
  display: grid;
  gap: 10px;
}

.checkers-player-card {
  display: grid;
  justify-items: center;
  gap: 6px;
  padding: 13px 10px 12px;
  text-align: center;
}

.checkers-player-card > span {
  color: #aa895b;
  font: 900 10px/1 Arial, sans-serif;
  letter-spacing: .15em;
}

.checkers-player-card-black > span { color: #cc675d; }
.checkers-player-card-white > span { color: #ead8b5; }

.checkers-player-avatar {
  width: clamp(70px, 6vw, 92px);
  aspect-ratio: 1;
}

.checkers-player-card b {
  max-width: 100%;
  color: #ead8b5;
  font: 900 11px/1.2 Arial, sans-serif;
  letter-spacing: .06em;
}

.checkers-player-card-black b { color: #d9786f; }

.checkers-player-card i {
  color: #938879;
  font: 600 10px/1.2 Arial, sans-serif;
}

.checkers-captured {
  margin-top: 3px;
  padding-top: 8px;
  width: 100%;
  border-top: 1px solid rgba(255,255,255,.07);
  color: #a88d68;
  font: 800 9px/1.2 Arial, sans-serif;
  letter-spacing: .08em;
}

.checkers-captured strong {
  margin-left: 5px;
  color: #f0c87f;
  font-size: 13px;
}

.checkers-status {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.checkers-status::before,
.checkers-status::after {
  content: '';
  width: clamp(24px, 4vw, 68px);
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(221,172,91,.62));
}

.checkers-status::after { transform: scaleX(-1); }

.checkers-actions {
  padding-top: 10px;
}

@media (max-width: 1120px) {
  .checkers-body {
    grid-template-columns: 220px minmax(390px, 1fr) 178px;
    gap: 12px;
    padding-inline: 14px;
  }
  .checkers-board { width: min(62vh, 610px, 55vw); }
  .checkers-avatar-picker { padding-inline: 9px; }
}

@media (pointer: coarse), (max-width: 900px) {
  .checkers-shell { width: min(98vw, 820px); }
  .checkers-body {
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 10px 12px;
  }
  .checkers-main { order: 1; }
  .checkers-avatar-picker { order: 2; width: 100%; box-sizing: border-box; }
  .checkers-player-stack {
    order: 3;
    width: 100%;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .checkers-avatar-picker > p,
  .checkers-avatar-prompt { display: none; }
  .checkers-avatar-options { max-width: 520px; width: 100%; justify-self: center; grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .checkers-board {
    width: min(61vh, 88vw);
    grid-template-rows: repeat(8, minmax(0, 1fr));
  }
  .checkers-player-card {
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto auto;
    justify-items: start;
    text-align: left;
  }
  .checkers-player-card > span,
  .checkers-player-card .checkers-player-avatar { grid-row: 1 / 4; }
  .checkers-player-card > span { display: none; }
  .checkers-player-avatar { width: 58px; }
  .checkers-captured { display: none; }
}

@media (max-height: 650px) and (orientation: landscape) {
  .checkers-avatar-picker,
  .checkers-player-stack { display: none; }
  .checkers-body { grid-template-columns: 1fr; }
  .checkers-board {
    width: min(72vh, 74vw);
    grid-template-rows: repeat(8, minmax(0, 1fr));
  }
}

/* v5.10.0 — realtime lobby, player figures and occupied multiplayer tables */
#multiplayerStatus {
  position: fixed;
  left: max(14px, env(safe-area-inset-left));
  top: max(14px, env(safe-area-inset-top));
  z-index: 34;
  display: none;
  min-width: 196px;
  padding: 10px 13px;
  border: 1px solid rgba(210,162,82,.36);
  border-radius: 11px;
  background: rgba(16,13,11,.78);
  box-shadow: 0 10px 30px rgba(0,0,0,.30);
  backdrop-filter: blur(8px);
  pointer-events: none;
}

#multiplayerStatus.show { display: grid; gap: 3px; }
#multiplayerStatus b {
  color: #d9b36f;
  font: 900 9px/1 Arial, sans-serif;
  letter-spacing: .16em;
}
#multiplayerStatus span {
  color: #aaa198;
  font: 800 11px/1.25 Arial, sans-serif;
}
#multiplayerStatus.online span { color: #91c695; }

#checkersOverlay.online .checkers-shell {
  box-shadow: 0 24px 90px rgba(0,0,0,.72), 0 0 0 1px rgba(115,190,126,.18);
}

.checkers-side-target:disabled,
.checkers-swap-players:disabled,
.checkers-actions button:disabled {
  opacity: .42;
  cursor: not-allowed;
  transform: none !important;
}

@media (max-width: 900px) {
  #multiplayerStatus {
    top: auto;
    bottom: max(84px, calc(env(safe-area-inset-bottom) + 74px));
    min-width: 0;
    padding: 8px 10px;
  }
  #multiplayerStatus b { display: none; }
}

/* v5.11.0 — simple accounts, match history and Chess House hall of fame */
#accountDock {
  position: fixed;
  z-index: 79;
  top: 92px;
  right: 18px;
  display: none;
  gap: 8px;
  pointer-events: auto;
}
#accountDock.show { display: grid; }
#accountDock button {
  position: relative;
  display: grid;
  min-width: 174px;
  padding: 10px 13px 9px 34px;
  border: 1px solid rgba(222,174,91,.42);
  border-radius: 11px;
  background: linear-gradient(145deg, rgba(32,27,22,.96), rgba(12,11,10,.96));
  color: #ead5ad;
  text-align: left;
  box-shadow: 0 10px 28px rgba(0,0,0,.36), inset 0 0 0 1px rgba(255,255,255,.025);
}
#accountDock button:last-child { padding-left: 13px; }
#accountDock b { font: 900 10px/1.2 Arial, sans-serif; letter-spacing: .12em; }
#accountDock small { margin-top: 3px; color: #9f8c71; font: 700 8px/1.2 Arial, sans-serif; letter-spacing: .06em; }
.account-dot {
  position: absolute;
  left: 13px;
  top: 50%;
  width: 10px;
  height: 10px;
  margin-top: -5px;
  border-radius: 50%;
  background: #8e8273;
  box-shadow: 0 0 0 3px rgba(142,130,115,.15);
}
.account-dot.online { background: #8bc18c; box-shadow: 0 0 0 3px rgba(139,193,140,.16), 0 0 14px rgba(139,193,140,.45); }

#accountOverlay {
  position: fixed;
  z-index: 220;
  inset: 0;
  display: none;
  place-items: center;
  padding: 18px;
  background: rgba(6,5,4,.82);
  backdrop-filter: blur(10px);
  pointer-events: auto;
}
#accountOverlay.show { display: grid; }
.account-window {
  width: min(1120px, 96vw);
  max-height: 94vh;
  overflow: hidden;
  border: 1px solid rgba(222,174,91,.62);
  border-radius: 18px;
  background:
    radial-gradient(circle at 30% 0, rgba(163,106,45,.12), transparent 38%),
    linear-gradient(145deg, #191612, #0d0c0b 70%);
  box-shadow: 0 34px 90px rgba(0,0,0,.72), inset 0 0 0 1px rgba(255,255,255,.025);
  color: #ddc9a7;
}
.account-window > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px 16px;
  border-bottom: 1px solid rgba(222,174,91,.24);
}
.account-window > header small { color: #bd9051; font: 900 9px/1 Arial, sans-serif; letter-spacing: .16em; }
.account-window > header h2 { margin: 7px 0 0; color: #f0cc87; font: 950 clamp(24px, 3vw, 40px)/1 Arial, sans-serif; letter-spacing: .06em; }
#accountClose {
  width: 44px;
  height: 44px;
  border: 1px solid rgba(222,174,91,.42);
  border-radius: 50%;
  background: rgba(255,255,255,.025);
  color: #e7c994;
  font: 300 28px/1 Arial, sans-serif;
}
.account-tabs { display: flex; gap: 8px; padding: 10px 24px; border-bottom: 1px solid rgba(255,255,255,.055); }
.account-tabs button {
  padding: 9px 14px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: #988a76;
  font: 900 9px/1 Arial, sans-serif;
  letter-spacing: .1em;
}
.account-tabs button.active { border-color: rgba(222,174,91,.34); background: rgba(185,126,54,.12); color: #e4bd79; }
.account-content { max-height: calc(94vh - 145px); overflow: auto; padding: 22px 24px 26px; }
.account-auth-card { width: min(470px, 100%); margin: 20px auto; }
.account-intro { margin-bottom: 18px; padding: 16px; border: 1px solid rgba(222,174,91,.18); border-radius: 12px; background: rgba(255,255,255,.025); }
.account-intro b { color: #e7c991; font-size: 14px; }
.account-intro p { margin: 6px 0 0; color: #9f927f; font-size: 12px; }
.account-form { display: grid; gap: 12px; }
.account-form h3, .account-register-grid h3, .account-history h3 { margin: 0 0 4px; color: #dcb876; font: 900 12px/1.2 Arial, sans-serif; letter-spacing: .12em; }
.account-form label { display: grid; gap: 6px; color: #a99475; font: 900 9px/1.2 Arial, sans-serif; letter-spacing: .09em; }
.account-form label small { color: #7f7465; font-weight: 600; letter-spacing: 0; }
.account-form input {
  min-height: 42px;
  box-sizing: border-box;
  padding: 0 12px;
  border: 1px solid rgba(222,174,91,.25);
  border-radius: 8px;
  outline: none;
  background: rgba(255,255,255,.035);
  color: #f0dfc1;
  font: 700 13px Arial, sans-serif;
}
.account-form input:focus { border-color: #d7a354; box-shadow: 0 0 0 3px rgba(215,163,84,.1); }
.account-form button {
  min-height: 42px;
  border: 1px solid rgba(222,174,91,.36);
  border-radius: 8px;
  background: #26211c;
  color: #e2c89b;
  font: 900 10px/1 Arial, sans-serif;
  letter-spacing: .08em;
}
.account-form button.primary { background: linear-gradient(180deg, #a96e2b, #744317); color: #fff0d1; }
.account-message { min-height: 18px; color: #dc776d; font: 700 11px/1.35 Arial, sans-serif; }
.account-message[data-type="success"] { color: #8fca91; }
.account-register-grid { display: grid; grid-template-columns: minmax(250px, .75fr) minmax(420px, 1.25fr); gap: 24px; align-items: start; }
.account-avatar-grid { display: grid; grid-template-columns: repeat(6, minmax(70px, 1fr)); gap: 8px; }
.account-avatar-choice {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 4px;
  min-width: 0;
  padding: 7px 4px;
  border: 1px solid rgba(222,174,91,.16);
  border-radius: 10px;
  background: rgba(255,255,255,.022);
  cursor: pointer;
}
.account-avatar-choice input { position: absolute; opacity: 0; pointer-events: none; }
.account-avatar-choice img { width: min(76px, 100%); aspect-ratio: 1; object-fit: cover; border-radius: 50%; border: 2px solid rgba(222,174,91,.45); }
.account-avatar-choice span { color: #ad9a7c; font: 800 8px/1.1 Arial, sans-serif; text-align: center; }
.account-avatar-choice.selected { border-color: #dda956; background: rgba(197,133,51,.13); box-shadow: 0 0 0 2px rgba(221,169,86,.08); }
.account-avatar-choice.selected img { border-color: #f0c776; }
.account-profile-head { display: grid; grid-template-columns: auto 1fr auto; gap: 16px; align-items: center; padding: 15px; border: 1px solid rgba(222,174,91,.22); border-radius: 14px; background: rgba(255,255,255,.025); }
.account-profile-head img { width: 90px; aspect-ratio: 1; object-fit: cover; border-radius: 50%; border: 3px solid #c89244; }
.account-profile-head small { color: #a48150; font: 900 8px/1 Arial, sans-serif; letter-spacing: .13em; }
.account-profile-head h3 { margin: 6px 0 2px; color: #efd29d; font: 900 24px/1 Arial, sans-serif; }
.account-profile-head p { margin: 0; color: #a99b87; font-size: 12px; }
.account-profile-head button { padding: 10px 14px; border: 1px solid rgba(210,105,92,.38); border-radius: 8px; background: rgba(123,52,43,.16); color: #de8b81; font: 900 9px Arial, sans-serif; }
.account-stats { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; margin: 12px 0 20px; }
.account-stats > div { padding: 12px 8px; border: 1px solid rgba(222,174,91,.15); border-radius: 10px; background: rgba(255,255,255,.02); text-align: center; }
.account-stats span { display: block; color: #8d806f; font: 900 8px Arial, sans-serif; letter-spacing: .1em; }
.account-stats b { display: block; margin-top: 5px; color: #e6bf78; font: 900 21px Arial, sans-serif; }
.account-profile-grid { display: grid; grid-template-columns: 1.25fr .75fr; gap: 20px; align-items: start; }
.account-profile-avatar .account-avatar-grid { grid-template-columns: repeat(4, minmax(60px, 1fr)); }
.account-history { border: 1px solid rgba(222,174,91,.18); border-radius: 12px; padding: 14px; background: rgba(255,255,255,.02); }
#accountHistory { display: grid; gap: 7px; max-height: 470px; overflow: auto; }
#accountHistory article { display: grid; grid-template-columns: auto 1fr; gap: 2px 9px; padding: 9px; border-radius: 8px; background: rgba(255,255,255,.027); }
#accountHistory article b { color: #aaa091; font: 900 9px Arial, sans-serif; }
#accountHistory article[data-outcome="win"] b { color: #90c791; }
#accountHistory article[data-outcome="loss"] b { color: #d77a70; }
#accountHistory article[data-outcome="draw"] b { color: #d4ad6d; }
#accountHistory article span { color: #d9c6a6; font: 700 10px Arial, sans-serif; }
#accountHistory article small { grid-column: 1 / -1; color: #81776a; font-size: 9px; }
.account-leaderboard-head, .account-leaderboard-list article { display: grid; grid-template-columns: 48px minmax(250px, 1fr) 100px 100px 100px; gap: 10px; align-items: center; }
.account-leaderboard-head { padding: 0 12px 9px; color: #8e7f6a; font: 900 8px Arial, sans-serif; letter-spacing: .1em; }
.account-leaderboard-list { display: grid; gap: 7px; }
.account-leaderboard-list article { min-height: 62px; padding: 8px 12px; border: 1px solid rgba(222,174,91,.14); border-radius: 11px; background: rgba(255,255,255,.024); }
.account-leaderboard-list article.me { border-color: #d4a050; background: rgba(190,126,45,.1); }
.account-leaderboard-list article > strong { color: #dfb66f; font: 900 20px Arial, sans-serif; text-align: center; }
.account-rank-player { display: flex; align-items: center; gap: 10px; min-width: 0; }
.account-rank-player img { width: 46px; aspect-ratio: 1; object-fit: cover; border-radius: 50%; border: 2px solid rgba(222,174,91,.55); }
.account-rank-player div { min-width: 0; }
.account-rank-player b { display: block; color: #edd2a0; font: 900 12px Arial, sans-serif; overflow: hidden; text-overflow: ellipsis; }
.account-rank-player small { display: block; margin-top: 3px; color: #8f8372; font-size: 9px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-leaderboard-list article > span { color: #c6b494; font: 800 12px Arial, sans-serif; text-align: center; }
.account-leaderboard-list article > em { color: #f0bf68; font: 900 20px Arial, sans-serif; text-align: center; font-style: normal; }
.account-loading { padding: 40px; color: #a99a83; text-align: center; }

@media (max-width: 900px) {
  #accountDock { top: 70px; right: 8px; transform: scale(.9); transform-origin: top right; }
  .account-register-grid, .account-profile-grid { grid-template-columns: 1fr; }
  .account-avatar-grid { grid-template-columns: repeat(4, 1fr); }
  .account-stats { grid-template-columns: repeat(3, 1fr); }
  .account-leaderboard-head { display: none; }
  .account-leaderboard-list article { grid-template-columns: 36px minmax(180px, 1fr) 58px; }
  .account-leaderboard-list article > span:nth-of-type(1), .account-leaderboard-list article > span:nth-of-type(2) { display: none; }
}

@media (max-width: 560px) {
  #accountDock button { min-width: 140px; }
  .account-content { padding-inline: 12px; }
  .account-avatar-grid, .account-profile-avatar .account-avatar-grid { grid-template-columns: repeat(3, 1fr); }
  .account-profile-head { grid-template-columns: auto 1fr; }
  .account-profile-head button { grid-column: 1 / -1; }
}
.account-last-played { display: block; margin-top: 7px; color: #807568 !important; font-weight: 700 !important; letter-spacing: .03em !important; }

/* v5.12.0 — populated chess room and chess-table preparation overlay */
#chessRoomHint {
  position: fixed;
  left: 50%;
  bottom: 9.5vh;
  z-index: 1150;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px 10px 16px;
  border: 1px solid rgba(196,154,81,.55);
  border-radius: 12px;
  background: rgba(17,15,13,.90);
  color: #ead5ad;
  font: 800 12px/1.2 Arial, sans-serif;
  letter-spacing: .05em;
  opacity: 0;
  transform: translate(-50%, 12px);
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
  box-shadow: 0 14px 40px rgba(0,0,0,.40);
}

#chessRoomHint.show {
  opacity: 1;
  transform: translate(-50%, 0);
  pointer-events: auto;
}

#chessRoomHint button {
  min-height: 34px;
  padding: 0 13px;
  border: 1px solid rgba(218,176,103,.50);
  border-radius: 8px;
  background: linear-gradient(180deg, #7a5427, #513619);
  color: #fff0d0;
  font: 900 10px/1 Arial, sans-serif;
  letter-spacing: .08em;
}

#chessRoomOverlay {
  position: fixed;
  inset: 0;
  z-index: 1500;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(10,8,7,.68);
  backdrop-filter: blur(10px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .18s ease, visibility .18s ease;
}

#chessRoomOverlay.show {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.chess-room-shell {
  width: min(1180px, 96vw);
  max-height: 96vh;
  overflow: auto;
  border: 1px solid rgba(202,157,81,.72);
  border-radius: 18px;
  background:
    radial-gradient(circle at 50% 0, rgba(196,151,76,.10), transparent 34%),
    linear-gradient(145deg, rgba(255,255,255,.035), transparent 45%),
    #151311;
  color: #ead9ba;
  box-shadow: 0 30px 100px rgba(0,0,0,.62), inset 0 0 0 1px rgba(255,255,255,.025);
}

.chess-room-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
  padding: 24px 28px 18px;
  border-bottom: 1px solid rgba(196,154,81,.25);
}

.chess-room-head small {
  color: #c8a468;
  font: 900 11px/1 Arial, sans-serif;
  letter-spacing: .14em;
}

.chess-room-head h2 {
  margin: 7px 0 3px;
  color: #f0d29a;
  font: 950 clamp(28px, 4vw, 52px)/.95 Arial, sans-serif;
  letter-spacing: .08em;
}

.chess-room-head p {
  margin: 0;
  color: #a99a87;
  font: 650 12px/1.4 Arial, sans-serif;
}

.chess-room-head button {
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
  border: 1px solid rgba(214,169,92,.38);
  border-radius: 50%;
  background: rgba(255,255,255,.025);
  color: #e8d1a8;
  font: 700 28px/1 Arial, sans-serif;
}

.chess-room-content {
  display: grid;
  grid-template-columns: 190px minmax(430px, 1fr) 190px;
  gap: 18px;
  align-items: center;
  padding: 18px 24px 14px;
}

.chess-room-main {
  display: grid;
  justify-items: center;
  gap: 12px;
  min-width: 0;
}

.chess-room-status {
  color: #dfbd7e;
  font: 900 14px/1.2 Arial, sans-serif;
  letter-spacing: .10em;
  text-align: center;
}

.chess-room-board {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  grid-template-rows: repeat(8, minmax(0, 1fr));
  width: min(60vh, 590px, 54vw);
  aspect-ratio: 1;
  overflow: hidden;
  border: 9px solid #6e492b;
  border-radius: 10px;
  background: #6e492b;
  box-shadow: 0 18px 44px rgba(0,0,0,.44), inset 0 0 0 2px #d1a35d;
}

.chess-room-cell {
  display: grid;
  place-items: center;
  min-width: 0;
  min-height: 0;
  line-height: 1;
}

.chess-room-cell.light { background: #e5cfa6; }
.chess-room-cell.dark { background: #5a3a25; }

.chess-room-cell span {
  display: block;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(28px, 5.8vh, 58px);
  filter: drop-shadow(0 4px 3px rgba(0,0,0,.38));
  transform: translateY(-1px);
}

.chess-room-cell .white-piece {
  color: #fff4dd;
  -webkit-text-stroke: 1px rgba(64,43,28,.65);
}

.chess-room-cell .black-piece {
  color: #201816;
  -webkit-text-stroke: 1px rgba(240,210,155,.20);
}

.chess-room-board.flipped .chess-room-cell span { transform: rotate(180deg) translateY(1px); }

.chess-room-player {
  display: grid;
  justify-items: center;
  gap: 9px;
  padding: 18px 12px;
  border: 1px solid rgba(205,160,82,.27);
  border-radius: 14px;
  background: rgba(255,255,255,.025);
  text-align: center;
}

.chess-room-player span {
  color: #c9984c;
  font: 900 11px/1 Arial, sans-serif;
  letter-spacing: .16em;
}

.chess-room-player b {
  max-width: 100%;
  color: #ead7b5;
  font: 900 13px/1.25 Arial, sans-serif;
  overflow-wrap: anywhere;
}

.chess-room-player i {
  color: #908678;
  font: 600 10px/1.2 Arial, sans-serif;
}

.chess-room-player-black { border-color: rgba(157,75,69,.48); }
.chess-room-player-black span { color: #d36e65; }
.chess-room-player-white { border-color: rgba(226,207,172,.42); }

.chess-room-engine-note {
  max-width: 720px;
  padding: 11px 14px;
  border: 1px solid rgba(196,154,81,.20);
  border-radius: 10px;
  background: rgba(255,255,255,.025);
  color: #b8aa96;
  font: 650 10px/1.45 Arial, sans-serif;
  text-align: center;
}

.chess-room-engine-note b { color: #e3bf7c; }
.chess-room-engine-note span { display: block; margin-top: 3px; color: #8fa7a0; }

.chess-room-actions {
  display: flex;
  justify-content: center;
  gap: 12px;
  padding: 10px 24px 22px;
}

.chess-room-actions button {
  min-width: 220px;
  min-height: 48px;
  padding: 0 18px;
  border: 1px solid rgba(205,160,82,.42);
  border-radius: 9px;
  background: #28211b;
  color: #ead6b3;
  font: 900 12px/1 Arial, sans-serif;
  letter-spacing: .08em;
}

.chess-room-actions button.primary {
  background: linear-gradient(180deg, #9c6729, #6a431e);
  color: #fff0d0;
}

@media (max-width: 900px), (pointer: coarse) {
  #chessRoomOverlay { padding: 8px; }
  .chess-room-content { grid-template-columns: 1fr; padding: 10px 12px; }
  .chess-room-main { order: 1; }
  .chess-room-player { order: 2; grid-template-columns: auto 1fr; justify-items: start; text-align: left; width: 100%; box-sizing: border-box; }
  .chess-room-board { width: min(62vh, 88vw); }
  .chess-room-player i { display: none; }
  .chess-room-actions { flex-wrap: wrap; }
  .chess-room-actions button { min-width: min(300px, 88vw); }
}

@media (max-height: 650px) and (orientation: landscape) {
  .chess-room-head { padding-block: 10px; }
  .chess-room-head p, .chess-room-engine-note, .chess-room-player { display: none; }
  .chess-room-content { grid-template-columns: 1fr; padding-block: 6px; }
  .chess-room-board { width: min(68vh, 64vw); }
  .chess-room-actions { padding-block: 5px 10px; }
}

/* v5.13.0 — full authoritative chess UI */
.chess-room-shell { position: relative; width: min(1380px, 98vw); }
.chess-room-content {
  grid-template-columns: minmax(190px, 230px) minmax(430px, 1fr) minmax(210px, 250px);
  gap: clamp(12px, 1.6vw, 24px);
  align-items: stretch;
}
.chess-room-side-panel { display: grid; gap: 12px; align-content: center; min-width: 0; }
.chess-room-avatar {
  width: 86px; aspect-ratio: 1; object-fit: cover; border-radius: 50%;
  border: 2px solid rgba(221,174,94,.78); background: #201a16;
  box-shadow: 0 8px 24px rgba(0,0,0,.42), inset 0 0 0 2px rgba(255,255,255,.08);
}
.chess-room-material {
  width: 100%; padding-top: 9px; border-top: 1px solid rgba(255,255,255,.07);
  color: #a69275; font: 800 9px/1.5 Arial, sans-serif; letter-spacing: .07em;
}
.chess-room-material strong { display: block; margin-top: 4px; color: #ead0a2; font-size: 15px; letter-spacing: .01em; }
.chess-room-info-card, .chess-room-moves-card {
  border: 1px solid rgba(205,160,82,.25); border-radius: 12px;
  background: rgba(255,255,255,.025); padding: 12px;
}
.chess-room-info-card { display: grid; grid-template-columns: auto 1fr; gap: 8px 12px; align-items: center; }
.chess-room-info-card b { color: #9b825f; font: 900 9px/1 Arial, sans-serif; letter-spacing: .1em; }
.chess-room-info-card span { color: #d9bd8e; font: 800 10px/1.2 Arial, sans-serif; text-align: right; }
.chess-room-moves-card { min-height: 190px; max-height: 300px; display: grid; grid-template-rows: auto 1fr; min-width: 0; }
.chess-room-moves-card > div { display: flex; justify-content: space-between; gap: 8px; padding-bottom: 9px; border-bottom: 1px solid rgba(255,255,255,.07); }
.chess-room-moves-card > div b { color: #d7b474; font: 900 9px/1 Arial, sans-serif; letter-spacing: .1em; }
.chess-room-moves-card > div span { color: #8f8476; font: 700 9px/1 Arial, sans-serif; }
#chessRoomMoveList { margin: 8px 0 0; padding: 0; overflow: auto; list-style: none; }
#chessRoomMoveList li { display: grid; grid-template-columns: 28px 1fr 1fr; gap: 5px; padding: 4px 2px; color: #ded0b8; font: 750 11px/1.15 ui-monospace, Consolas, monospace; }
#chessRoomMoveList li:nth-child(odd) { background: rgba(255,255,255,.025); }
#chessRoomMoveList li span { color: #817667; }
.chess-room-detail { color: #a99a87; font: 700 10px/1.3 Arial, sans-serif; text-align: center; min-height: 14px; }
.chess-room-status.check { color: #ef9e70; text-shadow: 0 0 16px rgba(232,110,64,.25); }
.chess-room-status.winner { color: #f1cb79; font-size: 16px; }
.chess-room-cell {
  position: relative; width: 100%; height: 100%; border: 0; padding: 0;
  cursor: pointer; overflow: hidden; appearance: none; -webkit-appearance: none;
}
.chess-room-cell::after {
  content: ''; position: absolute; inset: 38%; border-radius: 50%;
  opacity: 0; transform: scale(.4); transition: opacity .12s ease, transform .12s ease;
}
.chess-room-cell.legal-target::after { opacity: .75; transform: scale(1); background: rgba(29,112,70,.72); box-shadow: 0 0 0 5px rgba(255,255,255,.14); }
.chess-room-cell.capture-target::after { inset: 8%; opacity: .95; transform: scale(1); border: 5px solid rgba(176,49,38,.72); background: transparent; }
.chess-room-cell.selected { box-shadow: inset 0 0 0 5px rgba(232,183,76,.82); }
.chess-room-cell.last-move { background-image: linear-gradient(rgba(235,196,76,.30), rgba(235,196,76,.30)); }
.chess-room-piece { position: relative; z-index: 2; user-select: none; transition: transform .12s ease, filter .12s ease; }
.chess-room-cell:hover .chess-room-piece { transform: translateY(-3px) scale(1.03); filter: drop-shadow(0 7px 5px rgba(0,0,0,.44)); }
.chess-room-cell small { position: absolute; z-index: 1; left: 3px; bottom: 2px; color: rgba(60,35,22,.55); font: 800 8px/1 Arial, sans-serif; pointer-events: none; }
.chess-room-cell.dark small { color: rgba(247,224,184,.55); }
.chess-room-board.flipped .chess-room-cell span { transform: none; }
.chess-room-board.flipped .chess-room-cell:hover .chess-room-piece { transform: translateY(-3px) scale(1.03); }
.chess-room-actions { flex-wrap: wrap; padding-top: 8px; }
.chess-room-actions button { min-width: 175px; }
#chessRoomResign { border-color: rgba(192,80,68,.45); color: #e4a39a; }
.chess-promotion {
  position: absolute; inset: 0; z-index: 5; display: grid; place-items: center;
  background: rgba(8,7,6,.76); backdrop-filter: blur(8px); opacity: 0; visibility: hidden; pointer-events: none;
}
.chess-promotion.show { opacity: 1; visibility: visible; pointer-events: auto; }
.chess-promotion > div { width: min(480px, 90vw); padding: 24px; border: 1px solid rgba(222,174,93,.62); border-radius: 16px; background: #181410; text-align: center; box-shadow: 0 30px 80px rgba(0,0,0,.65); }
.chess-promotion > div > b { display: block; color: #f0ce91; font: 900 18px/1.1 Arial, sans-serif; letter-spacing: .1em; }
.chess-promotion > div > span { display: block; margin-top: 7px; color: #9d8f7b; font: 650 11px/1.2 Arial, sans-serif; }
.chess-promotion-options { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 18px; }
.chess-promotion-options button { min-width: 0; padding: 10px 5px; border: 1px solid rgba(219,170,91,.34); border-radius: 10px; background: #292119; color: #f1dfbd; font: 48px/1 Georgia, serif; }
.chess-promotion-options button:hover { border-color: #dfa94f; transform: translateY(-2px); }
.chess-promotion-options small { display: block; margin-top: 7px; color: #c6a46d; font: 800 8px/1 Arial, sans-serif; letter-spacing: .08em; }

@media (max-width: 1040px), (pointer: coarse) {
  .chess-room-content { grid-template-columns: 1fr; }
  .chess-room-main { order: 1; }
  .chess-room-side-panel { order: 2; grid-template-columns: repeat(2, minmax(0,1fr)); width: 100%; }
  .chess-room-board { width: min(60vh, 88vw); }
  .chess-room-moves-card { max-height: 180px; min-height: 130px; }
  .chess-room-player { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto auto; justify-items: start; text-align: left; }
  .chess-room-player .chess-room-avatar { grid-row: 1 / 4; width: 62px; }
  .chess-room-player > span { display: none; }
  .chess-room-material { display: none; }
}
@media (max-height: 680px) and (orientation: landscape) {
  .chess-room-side-panel { display: none; }
  .chess-room-content { grid-template-columns: 1fr; }
  .chess-room-board { width: min(66vh, 62vw); }
  .chess-room-head h2 { font-size: 27px; }
  .chess-room-actions button { min-height: 38px; }
}

/* v5.13.1 — Chess House uses a social HUD, not the shooter HUD. */
body.board-club-mode #hud .top,
body.board-club-mode #skillHud,
body.board-club-mode #weaponHud,
body.board-club-mode #bottom,
body.board-club-mode #crosshair,
body.board-club-mode #adsDot,
body.board-club-mode #hitmarker,
body.board-club-mode #damage,
body.board-club-mode #bloodRush,
body.board-club-mode #achievementBanner,
body.board-club-mode #pickupHint,
body.board-club-mode #killfeed,
body.board-club-mode #airDefenseHud,
body.board-club-mode #fallbackLook {
  display: none !important;
}

body.board-club-mode #pauseButton {
  display: block;
}

body.board-club-mode #message {
  top: 14%;
  max-width: min(900px, 82vw);
  font-size: clamp(18px, 3vw, 38px);
  color: #f3dfba;
  text-shadow: 0 3px 18px rgba(0,0,0,.75);
}

body.board-club-mode .pause-card {
  border-color: rgba(216,165,79,.32);
  background: linear-gradient(145deg, rgba(31,24,19,.97), rgba(11,10,9,.96));
}

body.board-club-mode .pause-card h2 { color: #efcc8d; }
body.board-club-mode .pause-select-label,
body.board-club-mode #pauseDifficulty {
  display: none;
}

/* v5.14.0 — profile identity card, custom avatars and safer account forms */
.pause-identity {
  display: grid;
  grid-template-columns: auto minmax(0,1fr) auto;
  gap: 12px;
  align-items: center;
  margin: 14px 0 16px;
  padding: 12px;
  border: 1px solid rgba(224,174,88,.28);
  border-radius: 13px;
  background: linear-gradient(145deg, rgba(184,122,48,.08), rgba(255,255,255,.018));
}
.pause-identity > img {
  width: 58px;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 50%;
  border: 2px solid rgba(230,183,100,.72);
  box-shadow: 0 8px 20px rgba(0,0,0,.32);
}
.pause-identity-copy { min-width: 0; display: grid; gap: 3px; }
.pause-identity-copy small { color: #a6875e; font: 900 8px/1 Arial,sans-serif; letter-spacing: .13em; }
.pause-identity-copy b { color: #f0d19a; font: 900 15px/1.15 Arial,sans-serif; overflow: hidden; text-overflow: ellipsis; }
.pause-identity-copy span { color: #a69985; font: 700 10px/1.25 Arial,sans-serif; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pause-identity-copy em { color: #d4a75e; font: 900 9px/1.1 Arial,sans-serif; font-style: normal; letter-spacing: .06em; }
.pause-identity > button {
  min-height: 38px;
  padding: 0 12px;
  border: 1px solid rgba(222,174,91,.42);
  border-radius: 9px;
  background: rgba(151,94,35,.17);
  color: #e7c48a;
  font: 900 9px/1.15 Arial,sans-serif;
  letter-spacing: .06em;
}
.account-form select,
.account-form input[type="file"] {
  width: 100%;
  min-height: 42px;
  box-sizing: border-box;
  padding: 9px 12px;
  border: 1px solid rgba(222,174,91,.25);
  border-radius: 8px;
  outline: none;
  background: rgba(255,255,255,.035);
  color: #f0dfc1;
  font: 700 12px Arial,sans-serif;
}
.account-form select:focus,
.account-form input[type="file"]:focus { border-color: #d7a354; box-shadow: 0 0 0 3px rgba(215,163,84,.1); }
.account-custom-avatar {
  display: grid;
  gap: 10px;
  padding: 13px;
  border: 1px solid rgba(222,174,91,.16);
  border-radius: 11px;
  background: rgba(255,255,255,.018);
}
.account-custom-avatar h3 { margin: 0; color: #dcb876; font: 900 12px/1.2 Arial,sans-serif; letter-spacing: .12em; }
.account-custom-avatar p,
.account-avatar-note { margin: 0; color: #887d6d; font: 650 10px/1.4 Arial,sans-serif; }
.account-avatar-crop { display: none; grid-template-columns: 180px 1fr; gap: 14px; align-items: center; }
.account-avatar-crop.show { display: grid; }
.account-avatar-crop canvas {
  width: 180px;
  height: 180px;
  border-radius: 12px;
  border: 2px solid rgba(223,176,94,.62);
  object-fit: cover;
  background: #0b0a09;
}
.account-avatar-crop label { display: grid; gap: 8px; color: #a99475; font: 900 9px Arial,sans-serif; letter-spacing: .09em; }
.account-avatar-crop input[type="range"] { width: 100%; }
.account-avatar-upload-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.account-avatar-upload-actions button {
  min-height: 38px;
  padding: 0 12px;
  border: 1px solid rgba(222,174,91,.32);
  border-radius: 8px;
  background: #26211c;
  color: #e2c89b;
  font: 900 9px Arial,sans-serif;
}
body.account-ui-open canvas { pointer-events: none; }
@media (max-width: 620px) {
  .pause-identity { grid-template-columns: auto 1fr; }
  .pause-identity > button { grid-column: 1 / -1; }
  .account-avatar-crop { grid-template-columns: 1fr; }
  .account-avatar-crop canvas { width: min(240px,100%); height: auto; justify-self: center; }
}