:root{
  --gold:#d6a43a;
  --dark:#15120e;
  --panel:#f7efd9;
  --line:#6d4b25;
  --text:#2d2115;
}
*{box-sizing:border-box}
html{
  min-width:320px;
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}
body{
  margin:0;
  min-width:320px;
  font-family:Tahoma,Arial,sans-serif;
  background:#1c1711;
  color:var(--text);
  -webkit-tap-highlight-color:transparent;
}
button,input,select,textarea{font:inherit}
img{display:block;max-width:100%}
.game-shell{
  width:100%;
  min-height:100vh;
  background:linear-gradient(#24190f,#120e0b);
}
@supports (min-height:100dvh){
  .game-shell{min-height:100dvh}
}
.topbar{
  position:sticky;
  top:0;
  z-index:20;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  width:100%;
  padding:9px max(10px,env(safe-area-inset-right)) 9px max(10px,env(safe-area-inset-left));
  background:linear-gradient(#2c2116,#17110c);
  border-bottom:2px solid var(--gold);
  color:#fff;
}
.brand{font-weight:800;color:#f5cf72}
.player-name{font-size:12px;color:#ead9b6;margin-top:2px}
.quick-actions{display:flex;gap:6px;align-items:flex-end}
.quick-actions a,.bottom-nav a{color:#fff;text-decoration:none;font-size:11px;text-align:center}
.quick-actions a{min-width:43px;padding:2px 4px;border-radius:8px}
.quick-actions a:active{background:#ffffff14}
.quick-actions img{width:29px;height:29px;object-fit:contain;margin:0 auto 2px}
.resources{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:5px;
  width:100%;
  padding:7px max(7px,env(safe-area-inset-right)) 7px max(7px,env(safe-area-inset-left));
  background:#0f0c09;
  border-bottom:1px solid #5a4127;
}
.resource{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:4px;
  min-width:0;
  padding:5px 2px;
  border:1px solid #6e512b;
  border-radius:9px;
  background:linear-gradient(#382819,#21170f);
  color:#ffe3a0;
  font-weight:700;
  font-size:11px;
}
.resource img{width:22px;height:22px;object-fit:contain}
.kingdom{
  position:relative;
  overflow:hidden;
  width:100%;
  max-width:1672px;
  margin:0 auto;
  aspect-ratio:16/11;
  background:#182316;
}
.kingdom-picture{
  position:absolute;
  inset:0;
  display:block;
  width:100%;
  height:100%;
}
.kingdom-bg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
}
.building{
  position:absolute;
  width:20%;
  max-width:180px;
  padding:0;
  border:0;
  background:none;
  cursor:pointer;
  filter:drop-shadow(0 8px 6px rgba(0,0,0,.45));
  transition:transform .15s ease;
  -webkit-appearance:none;
  appearance:none;
}
.building:active{transform:scale(.96)}
.building:focus-visible{outline:3px solid #ffe08a;outline-offset:3px}
.building img{width:100%;height:auto}
.building span{
  display:inline-block;
  margin-top:-4px;
  padding:3px 7px;
  border-radius:8px;
  border:1px solid #d9ad55;
  background:rgba(38,24,12,.9);
  color:#ffe3a0;
  font-weight:700;
  font-size:12px;
  white-space:nowrap;
}
.palace{width:27%;left:36.5%;top:30%}
.academy{left:12%;top:20%}
.barracks{right:12%;top:20%}
.market{left:17%;top:57%}
.rally{right:17%;top:57%}
.water-shine{
  position:absolute;
  left:0;right:0;bottom:0;
  height:24%;
  pointer-events:none;
  background:linear-gradient(105deg,transparent 20%,rgba(255,255,255,.18) 42%,transparent 64%);
  background-size:220% 100%;
  animation:water 5s linear infinite;
}
@keyframes water{from{background-position:220% 0}to{background-position:-220% 0}}
.panel{
  margin:12px auto 86px;
  max-width:760px;
  padding:16px;
  border:2px solid var(--line);
  border-radius:16px;
  background:var(--panel);
  box-shadow:0 8px 24px rgba(0,0,0,.35);
  position:relative;
}
.panel h2{margin-top:0}
.close{position:absolute;left:10px;top:8px;border:0;background:none;font-size:28px;cursor:pointer}
.royal-btn{
  min-height:44px;
  border:1px solid #6f4b17;
  border-radius:10px;
  background:linear-gradient(#f0c45e,#b77817);
  color:#2d1904;
  font-weight:800;
  padding:10px 18px;
}
.bottom-nav{
  position:sticky;
  bottom:0;
  z-index:25;
  display:grid;
  grid-template-columns:repeat(5,1fr);
  padding-bottom:env(safe-area-inset-bottom);
  background:linear-gradient(#2b2015,#130f0b);
  border-top:2px solid var(--gold);
}
.bottom-nav a{padding:6px 2px 7px}
.bottom-nav a.active{background:rgba(214,164,58,.18);color:#ffd86b}
.bottom-nav img{width:31px;height:31px;object-fit:contain;margin:0 auto 2px}
.resource-page{max-width:850px;margin:auto;padding:14px 12px calc(90px + env(safe-area-inset-bottom))}
.resource-title{color:#f5cf72;text-align:center;margin:4px 0 14px}
.resource-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.resource-card{
  position:relative;
  overflow:hidden;
  min-height:126px;
  padding:14px;
  border:1px solid #8c6934;
  border-radius:15px;
  background:linear-gradient(145deg,#3a2819,#1d140d);
  color:#fff0c9;
  box-shadow:0 6px 18px #0006;
}
.resource-card img{width:58px;height:58px;object-fit:contain;float:right;margin-left:10px}
.resource-card h3{margin:3px 0 7px;color:#ffd86b}
.resource-card strong{font-size:23px}
.resource-meta{clear:both;padding-top:8px;font-size:12px;color:#d9c49a}
.resource-wide{grid-column:1/-1}
.resource-note{margin-top:12px;padding:11px;border-radius:12px;background:#f7efd9;color:#422c16;border:1px solid #8c6934}
.nav-spacer{height:6px}

/* Computer / wide browser kingdom artwork.
   The desktop artwork already contains the five buildings, so the Android
   sprites become invisible hit areas while labels remain clickable. */
@media (min-width:900px){
  .topbar{padding-top:11px;padding-bottom:11px}
  .quick-actions img{width:34px;height:34px}
  .resources{gap:9px;padding-top:9px;padding-bottom:9px}
  .resource{font-size:13px;padding:7px 4px}
  .resource img{width:26px;height:26px}
  .kingdom{aspect-ratio:16/9}
  .building{
    max-width:none;
    width:17%;
    height:17%;
    filter:none;
  }
  .building img{display:none}
  .building span{
    position:absolute;
    left:50%;
    bottom:0;
    margin:0;
    transform:translateX(-50%);
    padding:5px 10px;
    font-size:13px;
    box-shadow:0 3px 10px #0007;
  }
  .palace{left:41.5%;top:46%;width:17%;height:19%}
  .academy{left:22.5%;top:39%;width:15%;height:16%}
  .barracks{right:22.5%;top:39%;width:15%;height:16%}
  .market{left:21%;top:63%;width:16%;height:17%}
  .rally{right:21%;top:63%;width:16%;height:17%}
  .water-shine{height:18%;opacity:.65}
  .bottom-nav a{font-size:12px;padding-top:7px}
  .bottom-nav img{width:34px;height:34px}
}

@media (max-width:899px){
  .kingdom{max-width:980px}
}
@media (max-width:520px){
  .topbar{align-items:flex-start}
  .brand{font-size:14px}
  .quick-actions{gap:2px;flex-wrap:nowrap}
  .quick-actions a{font-size:9px;min-width:34px;padding:1px}
  .quick-actions img{width:23px;height:23px}
  .resource{font-size:9px}
  .resource img{width:18px;height:18px}
  .kingdom{aspect-ratio:9/11}
  .palace{width:32%;left:34%;top:32%}
  .academy{width:23%;left:6%;top:24%}
  .barracks{width:23%;right:6%;top:24%}
  .market{width:23%;left:10%;top:62%}
  .rally{width:23%;right:10%;top:62%}
  .building span{font-size:10px}
  .bottom-nav a{font-size:9px}
  .bottom-nav img{width:27px;height:27px}
  .resource-cards{grid-template-columns:1fr}
  .resource-wide{grid-column:auto}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
}

/* ========================================================================
   ملوك العالم - واجهة المملكة الملكية للمتصفح
   Scoped to .kingdom-page so the rest of the PHP pages remain unchanged.
   ======================================================================== */
.kingdom-page{
  --hud-black:#0d0906;
  --hud-brown:#21160d;
  --hud-brown-2:#392414;
  --hud-gold:#d9a63a;
  --hud-gold-soft:#f1cf75;
  --hud-cream:#f8e8b6;
  --hud-line:rgba(218,165,63,.55);
  overflow-x:hidden;
  background:#090704;
  color:#fff;
}
.kingdom-page .game-shell{
  min-height:100vh;
  background:#090704;
}
@supports (min-height:100dvh){
  .kingdom-page .game-shell{min-height:100dvh}
}

.kingdom-page .royal-hud{
  position:sticky;
  top:0;
  z-index:80;
  display:grid;
  grid-template-columns:minmax(190px,260px) minmax(260px,.9fr) minmax(360px,1.25fr) minmax(118px,160px);
  grid-template-areas:"player shortcuts resources wallet";
  align-items:stretch;
  direction:ltr;
  min-height:78px;
  padding-left:max(10px,env(safe-area-inset-left));
  padding-right:max(10px,env(safe-area-inset-right));
  background:
    linear-gradient(180deg,rgba(28,20,13,.98),rgba(9,7,5,.99)),
    #0d0906;
  border-bottom:1px solid #72501f;
  box-shadow:0 8px 24px rgba(0,0,0,.45),inset 0 -1px 0 rgba(244,195,91,.12);
}

.kingdom-page .player-card{
  grid-area:player;
  direction:rtl;
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
  padding:8px 11px;
  border-right:1px solid rgba(217,166,58,.24);
  background:linear-gradient(90deg,rgba(177,113,24,.12),transparent 75%);
}
.kingdom-page .player-avatar-frame{
  flex:0 0 auto;
  width:56px;
  height:60px;
  padding:3px;
  border:1px solid #b8832b;
  border-radius:5px;
  background:linear-gradient(145deg,#382312,#130e09);
  box-shadow:0 0 0 1px rgba(255,218,126,.1) inset,0 4px 12px rgba(0,0,0,.42);
  overflow:hidden;
}
.kingdom-page .player-avatar-frame img{
  width:100%;
  height:100%;
  object-fit:contain;
}
.kingdom-page .player-meta{
  min-width:0;
  display:flex;
  flex-direction:column;
  line-height:1.25;
  color:var(--hud-cream);
}
.kingdom-page .player-meta strong{
  max-width:160px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:#fff2c6;
  font-size:16px;
}
.kingdom-page .player-meta span{
  max-width:170px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  margin-top:2px;
  color:#e5c47b;
  font-size:12px;
}
.kingdom-page .player-meta small{
  margin-top:4px;
  color:#bfa575;
  font-size:10px;
}

.kingdom-page .hud-shortcuts{
  grid-area:shortcuts;
  direction:rtl;
  display:grid;
  grid-template-columns:repeat(4,minmax(50px,1fr));
  align-items:stretch;
  min-width:0;
  border-right:1px solid rgba(217,166,58,.18);
}
.kingdom-page .hud-shortcuts a{
  min-width:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:2px;
  padding:6px 4px 5px;
  color:#ead7ae;
  text-decoration:none;
  font-size:11px;
  border-inline-start:1px solid rgba(255,255,255,.025);
  transition:background-color .16s ease,color .16s ease,transform .16s ease;
}
.kingdom-page .hud-shortcuts a:hover,
.kingdom-page .hud-shortcuts a:focus-visible{
  color:#ffe6a0;
  background:rgba(218,166,58,.09);
  outline:none;
}
.kingdom-page .hud-shortcuts a:active{transform:translateY(1px)}
.kingdom-page .hud-icon{
  width:34px;
  height:34px;
  display:grid;
  place-items:center;
  filter:drop-shadow(0 4px 4px rgba(0,0,0,.45));
}
.kingdom-page .hud-icon img{width:100%;height:100%;object-fit:contain}

.kingdom-page .hud-resources{
  grid-area:resources;
  direction:rtl;
  display:grid;
  grid-template-columns:repeat(4,minmax(72px,1fr));
  align-items:center;
  gap:4px;
  padding:8px 10px;
  min-width:0;
}
.kingdom-page .hud-resource{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  min-width:0;
  height:45px;
  border-radius:5px;
  color:#f3ddb1;
  background:linear-gradient(180deg,rgba(61,41,23,.30),rgba(8,6,4,.05));
}
.kingdom-page .hud-resource img{
  flex:0 0 auto;
  width:28px;
  height:28px;
  object-fit:contain;
  filter:drop-shadow(0 2px 2px rgba(0,0,0,.35));
}
.kingdom-page .hud-resource b{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  font-size:15px;
  letter-spacing:.1px;
}

.kingdom-page .gold-wallet{
  grid-area:wallet;
  direction:ltr;
  align-self:center;
  justify-self:stretch;
  height:46px;
  margin:8px 6px;
  padding:0 8px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:6px;
  color:#ffe49a;
  text-decoration:none;
  border:1px solid #6f4a18;
  border-radius:5px;
  background:linear-gradient(180deg,#2f2112,#151008);
  box-shadow:inset 0 0 0 1px rgba(240,193,85,.06),0 4px 10px rgba(0,0,0,.25);
}
.kingdom-page .gold-wallet img{width:27px;height:27px;object-fit:contain}
.kingdom-page .gold-wallet b{font-size:14px;white-space:nowrap}
.kingdom-page .gold-wallet span{
  display:grid;
  place-items:center;
  width:27px;
  height:27px;
  border-radius:3px;
  color:#2d1b05;
  background:linear-gradient(#f5d16d,#b67818);
  font-weight:900;
  font-size:19px;
  line-height:1;
}

.kingdom-page .kingdom-stage{
  width:100%;
  margin:0;
  padding:0;
  background:#090704;
}
.kingdom-page .kingdom{
  width:100%;
  max-width:none;
  margin:0 auto;
  aspect-ratio:16/9;
  min-height:460px;
  max-height:calc(100vh - 146px);
  max-height:calc(100dvh - 146px);
  background:#10190e;
  box-shadow:0 12px 36px rgba(0,0,0,.55) inset;
  isolation:isolate;
}
.kingdom-page .kingdom-picture,
.kingdom-page .kingdom-bg{width:100%;height:100%}
.kingdom-page .kingdom-bg{
  object-fit:cover;
  object-position:center 48%;
  user-select:none;
  -webkit-user-drag:none;
}
.kingdom-page .kingdom-vignette{
  position:absolute;
  z-index:2;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(90deg,rgba(0,0,0,.20),transparent 9%,transparent 91%,rgba(0,0,0,.20)),
    linear-gradient(180deg,rgba(0,0,0,.06),transparent 25%,transparent 78%,rgba(0,0,0,.22));
}

.kingdom-page .side-rail{
  position:absolute;
  z-index:12;
  top:16%;
  display:flex;
  flex-direction:column;
  gap:15px;
  direction:rtl;
}
.kingdom-page .side-rail-left{left:16px}
.kingdom-page .side-rail-right{right:16px}
.kingdom-page .rail-item{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:3px;
  color:#e5c98e;
  text-decoration:none;
  text-shadow:0 2px 4px #000;
}
.kingdom-page .rail-icon{
  width:48px;
  height:48px;
  display:grid;
  place-items:center;
  padding:8px;
  border:1px solid #a77628;
  border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#46321e,#17100a 72%);
  box-shadow:0 5px 13px rgba(0,0,0,.55),inset 0 0 0 2px rgba(0,0,0,.35);
  transition:transform .16s ease,filter .16s ease;
}
.kingdom-page .rail-icon img{width:100%;height:100%;object-fit:contain}
.kingdom-page .rail-item:hover .rail-icon,
.kingdom-page .rail-item:focus-visible .rail-icon{transform:scale(1.06);filter:brightness(1.12)}
.kingdom-page .rail-item:focus-visible{outline:none}
.kingdom-page .rail-item small{
  max-width:68px;
  padding:2px 5px;
  border-radius:8px;
  background:rgba(15,10,6,.72);
  font-size:9px;
  white-space:nowrap;
}

.kingdom-page .building{
  z-index:10;
  max-width:none;
  filter:none;
}
.kingdom-page .building span{
  position:absolute;
  left:50%;
  bottom:0;
  transform:translateX(-50%);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  margin:0;
  padding:6px 11px;
  border:1px solid #bb842f;
  border-radius:9px;
  background:linear-gradient(180deg,rgba(59,37,18,.96),rgba(25,16,10,.96));
  color:#f9df9a;
  box-shadow:0 4px 12px rgba(0,0,0,.55),inset 0 0 0 1px rgba(255,219,120,.05);
  text-shadow:0 1px 1px #000;
  font-size:13px;
  font-style:normal;
}
.kingdom-page .building span strong{font-weight:700}
.kingdom-page .building span em{
  color:#fff1c5;
  font-style:normal;
  font-weight:800;
}
.kingdom-page .building:hover span{border-color:#e0b354;box-shadow:0 4px 14px rgba(0,0,0,.6),0 0 12px rgba(215,157,48,.14)}

/* Desktop artwork contains all five buildings. Keep transparent hit targets. */
@media (min-width:900px){
  .kingdom-page .building img{display:none}
  .kingdom-page .palace{left:42%;top:43%;width:16%;height:22%}
  .kingdom-page .academy{left:23%;top:35%;width:15%;height:20%}
  .kingdom-page .barracks{right:23%;top:35%;width:15%;height:20%}
  .kingdom-page .market{left:21%;top:61%;width:17%;height:19%}
  .kingdom-page .rally{right:21%;top:61%;width:17%;height:19%}
  .kingdom-page .water-shine{z-index:3;height:14%;opacity:.45}

  .kingdom-page .bottom-nav{
    position:sticky;
    bottom:0;
    z-index:90;
    min-height:70px;
    width:100%;
    grid-template-columns:repeat(5,minmax(110px,1fr));
    padding:0 max(12%,160px) env(safe-area-inset-bottom);
    background:linear-gradient(180deg,rgba(31,21,13,.99),rgba(12,8,5,.99));
    border-top:1px solid #8a5d20;
    box-shadow:0 -8px 24px rgba(0,0,0,.36);
  }
  .kingdom-page .bottom-nav a{
    min-width:0;
    min-height:68px;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-direction:row;
    gap:10px;
    padding:8px 12px;
    color:#edd8ae;
    font-size:14px;
    border-inline:1px solid rgba(218,166,58,.06);
    transition:background-color .15s ease,color .15s ease;
  }
  .kingdom-page .bottom-nav a:hover{background:rgba(218,166,58,.07);color:#ffe69d}
  .kingdom-page .bottom-nav a.active{
    color:#f7d46e;
    background:linear-gradient(180deg,rgba(131,83,17,.28),rgba(57,35,13,.38));
    box-shadow:inset 0 2px 0 rgba(224,172,66,.15);
  }
  .kingdom-page .bottom-nav img{
    width:42px;
    height:42px;
    margin:0;
    object-fit:contain;
  }
}

/* Large computer screens: preserve the full kingdom without stretching. */
@media (min-width:1500px) and (min-height:800px){
  .kingdom-page .royal-hud{
    grid-template-columns:260px minmax(320px,.8fr) minmax(500px,1.15fr) 160px;
    min-height:82px;
  }
  .kingdom-page .kingdom{
    min-height:620px;
    max-height:calc(100vh - 152px);
    max-height:calc(100dvh - 152px);
  }
  .kingdom-page .rail-icon{width:54px;height:54px;padding:9px}
  .kingdom-page .building span{font-size:14px;padding:7px 13px}
}

/* Mid-size laptops/tablets: two-row HUD avoids any overflow. */
@media (min-width:900px) and (max-width:1180px){
  .kingdom-page .royal-hud{
    grid-template-columns:220px 1fr 120px;
    grid-template-areas:
      "player shortcuts wallet"
      "resources resources resources";
  }
  .kingdom-page .hud-resources{
    min-height:52px;
    border-top:1px solid rgba(217,166,58,.14);
  }
  .kingdom-page .kingdom{
    max-height:none;
  }
  .kingdom-page .bottom-nav{padding-left:8%;padding-right:8%}
}

/* Mobile/tablet portrait: same royal identity, no side rails or clipping. */
@media (max-width:899px){
  .kingdom-page .royal-hud{
    position:sticky;
    grid-template-columns:minmax(0,1fr) auto;
    grid-template-areas:
      "player wallet"
      "shortcuts shortcuts"
      "resources resources";
    min-height:0;
    direction:ltr;
    padding:0 max(5px,env(safe-area-inset-right)) 0 max(5px,env(safe-area-inset-left));
  }
  .kingdom-page .player-card{
    min-height:58px;
    padding:5px 6px;
    border:0;
  }
  .kingdom-page .player-avatar-frame{width:42px;height:46px;padding:2px}
  .kingdom-page .player-meta strong{font-size:13px;max-width:160px}
  .kingdom-page .player-meta span{font-size:10px;max-width:170px}
  .kingdom-page .player-meta small{font-size:9px;margin-top:2px}
  .kingdom-page .gold-wallet{
    width:112px;
    height:38px;
    margin:9px 4px;
    padding:0 5px;
  }
  .kingdom-page .gold-wallet img{width:22px;height:22px}
  .kingdom-page .gold-wallet b{font-size:12px}
  .kingdom-page .gold-wallet span{width:23px;height:23px;font-size:16px}
  .kingdom-page .hud-shortcuts{
    min-height:50px;
    border-top:1px solid rgba(217,166,58,.12);
    border-right:0;
  }
  .kingdom-page .hud-shortcuts a{padding:4px 3px;font-size:9px}
  .kingdom-page .hud-icon{width:27px;height:27px}
  .kingdom-page .hud-resources{
    min-height:43px;
    gap:2px;
    padding:4px 4px 5px;
    border-top:1px solid rgba(217,166,58,.12);
  }
  .kingdom-page .hud-resource{height:33px;gap:4px}
  .kingdom-page .hud-resource img{width:20px;height:20px}
  .kingdom-page .hud-resource b{font-size:10px}
  .kingdom-page .kingdom{
    min-height:0;
    max-height:none;
    aspect-ratio:9/11;
  }
  .kingdom-page .kingdom-bg{object-position:center center}
  .kingdom-page .kingdom-vignette{background:linear-gradient(180deg,rgba(0,0,0,.06),transparent 25%,transparent 82%,rgba(0,0,0,.15))}
  .kingdom-page .side-rail{display:none}
  .kingdom-page .building{filter:drop-shadow(0 7px 5px rgba(0,0,0,.42))}
  .kingdom-page .building img{display:block}
  .kingdom-page .palace{width:32%;left:34%;top:32%}
  .kingdom-page .academy{width:23%;left:6%;top:24%}
  .kingdom-page .barracks{width:23%;right:6%;top:24%}
  .kingdom-page .market{width:23%;left:10%;top:62%}
  .kingdom-page .rally{width:23%;right:10%;top:62%}
  .kingdom-page .building span{
    padding:4px 7px;
    gap:4px;
    font-size:10px;
    border-radius:8px;
  }
  .kingdom-page .bottom-nav{
    position:sticky;
    bottom:0;
    z-index:90;
    min-height:58px;
    background:linear-gradient(#281c12,#100c08);
    border-top:1px solid #9a6823;
  }
  .kingdom-page .bottom-nav a{
    min-height:56px;
    padding:5px 2px 6px;
    color:#ead6ae;
    font-size:9px;
  }
  .kingdom-page .bottom-nav img{width:28px;height:28px;margin:0 auto 2px}
}

@media (max-width:430px){
  .kingdom-page .player-meta strong{max-width:118px;font-size:12px}
  .kingdom-page .player-meta span{max-width:126px}
  .kingdom-page .player-meta small{max-width:135px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .kingdom-page .gold-wallet{width:102px}
  .kingdom-page .hud-shortcuts a{font-size:8px}
  .kingdom-page .hud-resource{gap:2px}
  .kingdom-page .hud-resource img{width:18px;height:18px}
  .kingdom-page .hud-resource b{font-size:9px}
  .kingdom-page .building span{font-size:9px;padding:4px 6px}
}

/* Landscape phones: keep HUD compact and maximize the kingdom artwork. */
@media (max-height:520px) and (orientation:landscape){
  .kingdom-page .royal-hud{
    position:relative;
    grid-template-columns:170px 1fr 110px;
    grid-template-areas:"player shortcuts wallet";
  }
  .kingdom-page .hud-resources{display:none}
  .kingdom-page .player-card{min-height:52px}
  .kingdom-page .hud-shortcuts{min-height:52px;border-top:0}
  .kingdom-page .kingdom{aspect-ratio:16/9;min-height:340px}
  .kingdom-page .bottom-nav{position:relative}
}

/* Fallback for older engines lacking aspect-ratio. */
@supports not (aspect-ratio:16/9){
  .kingdom-page .kingdom{height:0;min-height:0;padding-top:56.25%}
  @media (max-width:899px){.kingdom-page .kingdom{padding-top:122.222%}}
}

/* Firefox/Safari/Chromium focus consistency. */
.kingdom-page a:focus-visible,
.kingdom-page button:focus-visible{
  outline:2px solid #f3c75f;
  outline-offset:2px;
}