/* KWARS1 game shell: title screen, home/command centre, mode select, results.
   Visual language follows the existing KWARS palette -- bronze rims (#98722b),
   gold type (#ffe27a), slate stone panels -- not the KEEPITIL site styling. */

:root{
  --kw-gold:#ffe27a; --kw-bronze:#98722b; --kw-stone:#1d2832;
  --kw-stone-hi:#26343f; --kw-ink:#0b1218; --kw-mute:#b9c7ce;
}

/* ---------------- title screen ---------------- */
#title{
  position:fixed; inset:0; z-index:40; display:grid; place-items:center;
  padding:max(20px,env(safe-area-inset-top)) 18px max(20px,env(safe-area-inset-bottom));
  color:#fff; text-align:center; overflow-y:auto;
  background:
    radial-gradient(120% 85% at 50% 8%, rgba(255,226,122,.13), transparent 60%),
    radial-gradient(140% 100% at 50% 118%, rgba(152,114,43,.30), transparent 62%),
    linear-gradient(#16212b 0%, #101922 52%, #070c11 100%);
}
#title.hidden{ display:none; }
/* distant banner/spear silhouettes along the horizon */
#title::after{
  content:''; position:absolute; left:0; right:0; bottom:0; height:34vh; pointer-events:none;
  background:
    repeating-linear-gradient(95deg, transparent 0 26px, rgba(0,0,0,.55) 26px 29px),
    linear-gradient(transparent, rgba(0,0,0,.72) 70%);
  mask-image:linear-gradient(transparent, #000 55%);
  -webkit-mask-image:linear-gradient(transparent, #000 55%);
  opacity:.5;
}
.titleinner{ position:relative; z-index:1; width:min(560px,100%); }
.titlecrest{
  font-size:clamp(40px,9vw,64px); line-height:1; color:var(--kw-gold);
  text-shadow:0 0 26px rgba(255,226,122,.35); margin-bottom:6px;
}
.titlewordmark{
  font-size:clamp(34px,10vw,68px); line-height:.98; letter-spacing:.10em; font-weight:bold;
  color:#f4f8fb; text-shadow:0 4px 0 rgba(0,0,0,.6), 0 0 34px rgba(255,226,122,.22);
}
.titlewordmark span{ display:block; color:var(--kw-gold); }
.titletag{
  margin:14px auto 0; max-width:430px; color:var(--kw-mute);
  font-size:clamp(12px,3.1vw,14px); line-height:1.6;
}
.titlebtn{
  margin:26px auto 0; display:block; min-width:230px; padding:15px 34px;
  border:2px solid var(--kw-gold); border-radius:12px; cursor:pointer;
  background:linear-gradient(#c8a23c,#8a6417); color:#1c1305;
  font:bold clamp(17px,4.4vw,21px)/1 inherit; letter-spacing:.20em;
  box-shadow:0 5px 0 rgba(0,0,0,.5), 0 0 30px rgba(255,226,122,.22);
  touch-action:manipulation;
}
.titlebtn:active{ transform:translateY(4px); box-shadow:0 1px 0 rgba(0,0,0,.5); }
/* §2 LANDING — three primary choices, stacked, each naming what it is. */
.landing{ display:flex; flex-direction:column; align-items:stretch; gap:10px; margin-top:20px; width:min(19rem,82vw); }
.landing .titlebtn{ margin-top:0; width:100%; display:flex; flex-direction:column; gap:2px; padding:13px 18px; }
.titlebtnsub{ display:block; font-size:10px; font-weight:600; letter-spacing:.05em;
  text-transform:none; color:rgba(61,43,8,.72); }
.titlebtn.ghost{ background:linear-gradient(#3a4855,#26313c); color:#e8eef2;
  border:1px solid #566d7a; box-shadow:0 3px 0 rgba(0,0,0,.45); }
.titlebtn.ghost .titlebtnsub{ color:var(--kw-mute); }
.landingmodetitle{ margin:0; font-size:17px; letter-spacing:.14em; color:#f2c94d; text-align:center; }
.landingmodesub{ margin:0 0 4px; font-size:11px; line-height:1.5; color:var(--kw-mute); text-align:center; }
.titlecont{
  margin:12px auto 0; display:block; max-width:330px; padding:9px 18px;
  border:1px solid #7f939f; border-radius:10px; background:rgba(29,40,50,.85);
  color:#dbe5ea; font:bold 12px inherit; cursor:pointer; line-height:1.5;
}
.titlecont[hidden]{ display:none; }
.titlefoot{
  margin-top:30px; display:flex; align-items:center; justify-content:center;
  gap:10px; flex-wrap:wrap; color:#7e8f9b; font-size:11px;
}
.titlefoot button{
  border:1px solid #4a5b66; border-radius:8px; background:rgba(20,28,36,.8);
  color:#b9c7ce; padding:7px 12px; font:bold 11px inherit; cursor:pointer;
  min-height:44px; min-width:44px; letter-spacing:.06em;   /* §8 touch target */
}

/* ---------------- home / command centre ---------------- */
.home{
  width:min(560px,95vw); max-height:94vh; overflow-y:auto; padding:18px;
  border:2px solid var(--kw-bronze); border-radius:18px; text-align:center;
  background:
    linear-gradient(rgba(38,52,63,.97),rgba(23,33,41,.98));
  box-shadow:0 14px 50px rgba(0,0,0,.65), inset 0 1px 0 rgba(255,226,122,.12);
}
.homehud{
  display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:10px;
  padding:9px 11px; margin-bottom:14px; text-align:left;
  border:1px solid #4d6270; border-radius:12px;
  background:linear-gradient(#223038,#1a252d);
}
.hudcrest{ font-size:26px; color:var(--kw-gold); }
.hudmain b{ display:block; font-size:13px; color:#f1f6f9; }
.hudmain small{ display:block; color:var(--kw-mute); font-size:11px; margin-top:2px; }
.hudstats{ display:flex; flex-direction:column; gap:3px; text-align:right; }
.hudstats span{ font-size:11px; font-weight:bold; color:var(--kw-gold); white-space:nowrap; }
.hometitle{
  font-size:clamp(19px,5vw,26px); letter-spacing:.16em; color:var(--kw-gold);
  margin-bottom:14px; text-shadow:0 2px 0 rgba(0,0,0,.5);
}
.playbtn{
  background:linear-gradient(#c8a23c,#8a6417) !important; color:#1c1305 !important;
  border-color:var(--kw-gold) !important; font-size:17px !important;
  letter-spacing:.16em; padding:14px !important;
}
#continuebtn{ text-align:left; }
.homegrid{ display:grid; grid-template-columns:1fr 1fr; gap:8px; margin:14px 0 12px; }
.hometile{
  display:grid; grid-template-columns:30px 1fr; grid-template-rows:auto auto;
  align-items:center; gap:2px 9px; min-height:60px; padding:10px;
  border:1px solid #566d7a; border-radius:11px; cursor:pointer; text-align:left;
  background:linear-gradient(#2b3d48,#1f2d36); color:#fff; font:inherit;
}
.hometile:active{ transform:scale(.985); }
.hometile .tileicon{ grid-row:1/3; font-size:22px; text-align:center; }
.hometile b{ font-size:12px; letter-spacing:.05em; }
.hometile small{ color:var(--kw-mute); font-size:10px; line-height:1.35; }
.hometile:first-child{ grid-column:1/3; border-color:var(--kw-bronze); background:linear-gradient(#35485a,#22323f); }
/* §2 first-time Home: orientation copy and a single recommended path. Both are
   shown only to a player with no progress; returning players see their numbers. */
.homeintro{
  margin:2px 0 12px; padding:9px 11px; font-size:11px; line-height:1.5;
  color:var(--kw-mute); text-align:left;
  border:1px solid #3c5160; border-left:3px solid var(--kw-bronze);
  border-radius:9px; background:rgba(255,255,255,.03);
}
.hometile{ position:relative; }
.tilebadge{
  position:absolute; top:-7px; right:8px; padding:2px 7px;
  font-size:9px; font-weight:700; letter-spacing:.1em;
  color:#3d2b08; background:linear-gradient(#f2c94d,#c98f1d);
  border-radius:999px;
}
.homesec{ display:flex; flex-wrap:wrap; gap:6px; justify-content:center; margin-bottom:10px; }
.homesec button{
  flex:1 1 44%; min-height:38px; padding:9px 6px;
  border:1px solid #4a5b66; border-radius:9px; background:#202d35;
  color:#c6d3da; font:bold 10.5px inherit; letter-spacing:.06em; cursor:pointer;
}

/* ---------------- shared panel pieces ---------------- */
.modecard{
  display:block; width:100%; margin:9px 0; padding:13px; text-align:left; cursor:pointer;
  border:2px solid #566d7a; border-radius:13px; color:#fff; font:inherit;
  background:linear-gradient(#2b3d48,#1f2d36);
}
.modecard.recommended{ border-color:var(--kw-gold); box-shadow:0 0 15px rgba(255,226,122,.2); }
.modecard h3{ font-size:15px; letter-spacing:.08em; color:var(--kw-gold); }
.modecard .modetag{
  float:right; font-size:9px; letter-spacing:.1em; padding:3px 7px; border-radius:20px;
  background:var(--kw-gold); color:#1c1305;
}
.modecard ul{ list-style:none; margin:9px 0 0; }
.modecard li{ display:flex; justify-content:space-between; gap:10px; font-size:11.5px; padding:3px 0; color:var(--kw-mute); }
.modecard li b{ color:#f1f6f9; }
.achgrid{ display:grid; gap:6px; }
.achrow{
  display:grid; grid-template-columns:30px 1fr auto; align-items:center; gap:9px;
  padding:9px 10px; border:1px solid #465863; border-radius:9px;
  background:#22303a; text-align:left; font-size:11.5px;
}
.achrow.earned{ border-color:#69b879; background:#26473b; }
.achrow.earned .achmark{ color:#8fe0a0; }
.achrow .achicon{ font-size:19px; text-align:center; filter:grayscale(1) opacity(.45); }
.achrow.earned .achicon{ filter:none; }
.achrow small{ display:block; color:var(--kw-mute); margin-top:2px; font-size:10px; }
.achmark{ color:#7b8b95; font-weight:bold; font-size:11px; white-space:nowrap; }
.firstrun{ border:1px solid var(--kw-bronze); border-radius:11px; padding:11px; background:#2a2317; text-align:left; }
.firstrun li{ list-style:none; margin:6px 0; font-size:11.5px; color:#e6edf1; line-height:1.45; }

/* ---------------- results screen ---------------- */
.resultwrap{ width:min(430px,94vw); text-align:center; }
.resultbanner{
  font-size:clamp(26px,7vw,40px); letter-spacing:.14em; font-weight:bold; line-height:1.1;
  text-shadow:0 3px 0 rgba(0,0,0,.55);
}
.resultbanner.victory{ color:var(--kw-gold); }
.resultbanner.defeat{ color:#ff8f8f; }
.resultsub{ color:var(--kw-mute); font-size:12.5px; margin-top:5px; letter-spacing:.06em; }
.resultstats{
  display:grid; grid-template-columns:1fr 1fr; gap:7px; margin:16px 0;
  text-align:left;
}
.resultstats div{
  padding:9px 11px; border:1px solid #465863; border-radius:9px; background:rgba(29,40,50,.9);
}
.resultstats small{ display:block; color:#8fa2ad; font-size:9.5px; letter-spacing:.1em; }
.resultstats b{ font-size:15px; color:#f1f6f9; }
.resultnotes{
  margin:0 0 14px; padding:9px 11px; border:1px solid var(--kw-bronze); border-radius:9px;
  background:#2a2317; color:var(--kw-gold); font-size:11.5px; text-align:left; line-height:1.55;
}
.resultacts{ display:grid; grid-template-columns:1fr 1fr; gap:7px; }
.resultacts button{
  min-height:44px; padding:11px 8px; border:1px solid #7f939f; border-radius:10px;
  background:linear-gradient(#516574,#34444f); color:#fff; font:bold 12px inherit; cursor:pointer;
  letter-spacing:.05em;
}
.resultacts button.primary{
  grid-column:1/3; border-color:var(--kw-gold);
  background:linear-gradient(#c8a23c,#8a6417); color:#1c1305; font-size:14px;
}

/* ---------------- responsive ---------------- */
@media (max-width:760px){
  .home{ width:96vw; padding:13px; border-radius:14px; }
  .homegrid{ gap:6px; }
  .hometile{ min-height:56px; padding:8px; }
  .homesec button{ flex:1 1 47%; }
  .titlefoot{ margin-top:20px; }
  .resultstats{ gap:6px; }
}
/* short landscape phones: keep the title readable without clipping */
@media (max-height:480px){
  #title{ align-items:start; }
  .titlecrest{ display:none; }
  .titlewordmark{ font-size:clamp(26px,7vh,38px); }
  .titletag{ margin-top:8px; font-size:11px; }
  .titlebtn{ margin-top:14px; padding:11px 28px; }
  .titlefoot{ margin-top:14px; }
  .home{ max-height:97vh; padding:11px; }
  .hometitle{ margin-bottom:9px; }
}

/* [hidden] must beat .menubtn{display:block} -- the CONTINUE button is
   hidden by the `hidden` attribute, not by a class. */
[hidden]{ display:none !important; }

/* While the title or the command centre is up, the battlefield HUD is not the
   player's context: hide it so the shell reads as a game screen, not an
   overlay dropped on top of a running battle. */
body.kw-shell #topbar,
body.kw-shell #unitbar,
body.kw-shell #wavechip,
body.kw-shell #msg{ display:none !important; }

/* the results screen is a screen, not a caption over the battlefield */
#overlay{ background:rgba(8,13,18,.90) !important; }
.resultwrap{
  padding:20px; border:2px solid var(--kw-bronze); border-radius:18px;
  background:linear-gradient(rgba(38,52,63,.97),rgba(23,33,41,.98));
  box-shadow:0 14px 50px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,226,122,.12);
  max-height:94vh; overflow-y:auto;
}

/* The phone-portrait rotate gate predates the shell and must stay on top of
   it: showing ENTER in portrait would invite a tap that lands on the gate. */
#rotate{ z-index:60; }

/* phone landscape: widen the grid so PLAY and the destinations fit without
   pushing the secondary row off the first screenful */
@media (max-height:480px) and (min-width:700px){
  .home{ width:min(720px,96vw); }
  .homegrid{ grid-template-columns:repeat(3,1fr); }
  .hometile:first-child{ grid-column:1/4; }
  .hometile{ min-height:50px; }
  .homesec button{ flex:1 1 22%; }
  .resultstats{ grid-template-columns:repeat(3,1fr); }
}

/* ---------------- no-JavaScript fallback (§4) ----------------
   The shell is script-driven, so without JS there is no game and no menu to
   offer. Present the identity and say plainly what is required -- never a
   dead control, and never the old hub. */
#nojs{
  position:fixed; inset:0; z-index:70; display:grid; place-items:center;
  padding:28px; text-align:center; color:#fff;
  background:linear-gradient(#16212b 0%,#101922 52%,#070c11 100%);
  font-family:'Trebuchet MS',Verdana,sans-serif;
}
#nojs h1{ font-size:clamp(28px,8vw,56px); letter-spacing:.10em; color:#ffe27a;
          text-shadow:0 4px 0 rgba(0,0,0,.6); margin-bottom:14px; }
#nojs p{ max-width:460px; margin:0 auto; color:#b9c7ce; font-size:14px; line-height:1.65; }
#nojs .nojsnote{ margin-top:18px; padding:10px 16px; display:inline-block;
  border:1px solid #98722b; border-radius:10px; background:#2a2317; color:#ffe27a; font-weight:bold; }

/* ---------------- account surface (§19) ----------------
   Home gets ONE line about saving online -- not an account dashboard. */
.homeacct{
  display:block; width:100%; margin:2px 0 0; padding:8px 10px;
  border:1px solid #3f4e59; border-radius:9px; background:#1b2730;
  color:var(--kw-mute); font:11px inherit; cursor:pointer; letter-spacing:.03em;
}
.homeacct b{ color:var(--kw-gold); letter-spacing:.08em; }
.acctlabel{ display:block; margin:10px 0; font-size:12px; color:var(--kw-mute); }
.acctlabel input{
  display:block; width:100%; margin-top:5px; padding:11px; min-height:44px;
  border:1px solid #566d7a; border-radius:9px; background:#16212a; color:#fff;
  font:14px inherit;
}
.acctlabel input:focus{ outline:2px solid var(--kw-gold); outline-offset:1px; }
.acctmsg{ min-height:16px; color:var(--kw-gold); font-size:11.5px; }
.acctfacts{ list-style:none; margin:8px 0; }
.acctfacts li{
  display:flex; justify-content:space-between; gap:10px; padding:4px 0;
  font-size:11.5px; color:var(--kw-mute); border-bottom:1px solid #2c3a44;
}
.acctfacts li b{ color:#f1f6f9; }

/* §8 touch targets: every interactive control in the shell clears ~44px.
   The battle HUD icon buttons are sized by the game's own stylesheet; these
   raise the shell's own controls, which are the ones used on menus. */
.homesec button, .modecard, .menubtn, .resultacts button, .homeacct{ min-height:44px; }
.shellpanel .shoptabs button{ min-height:40px; }

/* ---------------- §7 portrait handling ----------------
   The battlefield needs landscape, but the MENUS do not. Previously the rotate
   gate covered every portrait screen, so a phone held upright could not reach
   the title, home, shop or settings at all. The gate now applies only while a
   battle is on screen; `kw-shell` marks title/home/panel/results. It clears
   itself on rotation because it is a media query, and it neither reloads the
   page nor touches saved progress. */
body.kw-shell #rotate{ display:none !important; }

/* §8: Settings uses native form controls, which default well under a comfortable
   touch target on phones. Size them up without changing any behaviour. */
.shellpanel input[type="range"]{ width:100%; height:44px; }
.shellpanel input[type="checkbox"]{ width:26px; height:26px; vertical-align:middle; }
.shellpanel select{
  min-height:44px; padding:10px; border:1px solid #566d7a; border-radius:9px;
  background:#16212a; color:#fff; font:13px inherit; max-width:100%;
}
.shellpanel label{ min-height:44px; display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.shellpanel label input[type="range"]{ flex:1 1 100%; }

/* §39 update notice: shown at Home only, acted on by the player. */
.updatenote{
  display:block; width:100%; margin:0 0 8px; padding:10px; min-height:44px;
  border:1px solid var(--kw-gold); border-radius:9px; background:#2a2317;
  color:var(--kw-gold); font:bold 11.5px inherit; cursor:pointer; letter-spacing:.05em;
}

/* ---------------- §2 guest-first title ----------------
   A signed-out visitor sees PLAY and a small SIGN IN. CONTINUE is never the
   front door: it belongs on Home, after the player has chosen to play. */
.titlecorner{
  position:absolute; top:max(10px,env(safe-area-inset-top));
  right:max(10px,env(safe-area-inset-right)); z-index:2; display:flex; gap:8px;
}
.titlecorner button{
  min-height:40px; padding:9px 15px; border:1px solid #4a5b66; border-radius:9px;
  background:rgba(18,26,34,.82); color:#c6d3da; font:bold 11px inherit;
  letter-spacing:.10em; cursor:pointer;
}
.titlecorner button:active{ transform:translateY(1px); }
#titleprofile{
  min-width:40px; border-radius:50%; background:linear-gradient(#c8a23c,#8a6417);
  color:#1c1305; font-weight:bold; letter-spacing:0;
}

/* §3 Save Progress offer, shown inside Results for guests with real progress. */
.saveoffer{
  margin:0 0 14px; padding:11px 12px; text-align:left;
  border:1px solid var(--kw-bronze); border-radius:11px; background:#2a2317;
}
.saveoffer b{ display:block; color:var(--kw-gold); letter-spacing:.10em; font-size:12px; }
.saveoffer small{ display:block; color:var(--kw-mute); font-size:11px; line-height:1.5; margin-top:5px; }
.saveacts{ display:grid; grid-template-columns:1fr 1fr; gap:7px; margin-top:9px; }
.saveacts button{
  min-height:44px; padding:10px 8px; border:1px solid #7f939f; border-radius:9px;
  background:linear-gradient(#516574,#34444f); color:#fff; font:bold 11.5px inherit; cursor:pointer;
}
.saveacts button.primary{ border-color:var(--kw-gold); background:linear-gradient(#c8a23c,#8a6417); color:#1b1204; }

/* §4 branded install guidance */
.installsteps{ margin:10px 0 0; padding-left:20px; color:var(--kw-mute); font-size:12px; line-height:1.65; }
.installsteps li{ margin:7px 0; }
.installsteps b{ color:#f1f6f9; }