/* GANG WAR KFS – app mode (home screen) and «nothing slips». Loaded after ui.css.
   Own classes only (.gw-install*, .gw-app-chip) plus locks for zoom, rubber band, text selection and safe areas. */

/* ---------- Nothing slips: no zoom, no rubber band / pull-to-refresh, no selection or long-press menu ---------- */
:root{--gw-app-css:1}   /* app.js shows the hint only when this file is loaded */
html{height:100%;overflow:hidden;overscroll-behavior:none;-webkit-text-size-adjust:100%;text-size-adjust:100%;touch-action:manipulation;touch-action:pan-x pan-y}
body{position:fixed;inset:0;width:100%;height:100%;overflow:hidden;overscroll-behavior:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
*,*::before,*::after{-webkit-tap-highlight-color:transparent}
img,a,svg,canvas,video{-webkit-user-drag:none}
input:not([type=range]),textarea,[contenteditable]{-webkit-user-select:text;user-select:text;-webkit-touch-callout:default}
/* scroll panels keep their scroll to themselves (no chaining into the page) */
.overlay,.gw-overlay,.gw-main,.gw-main-panel,.gw-room,.gw-score-panel,.gw-pause,.gw-end-tables,.gw-install{overscroll-behavior:contain}

/* ---------- Safe areas: notch / Dynamic Island on the side in landscape, home indicator below ---------- */
.gw-overlay{--gw-pad:clamp(8px,3vh,24px);padding:max(var(--gw-pad),var(--gw-sat,env(safe-area-inset-top))) max(var(--gw-pad),var(--gw-sar,env(safe-area-inset-right))) max(var(--gw-pad),var(--gw-sab,env(safe-area-inset-bottom))) max(var(--gw-pad),var(--gw-sal,env(safe-area-inset-left)))}
.gw-overlay>.gw-score-panel,.gw-overlay>.gw-pause{max-height:100%}
#rotate-hint{padding:max(24px,var(--gw-sat,env(safe-area-inset-top))) max(24px,var(--gw-sar,env(safe-area-inset-right))) max(24px,var(--gw-sab,env(safe-area-inset-bottom))) max(24px,var(--gw-sal,env(safe-area-inset-left)))}
@media (max-height:500px){.gw-overlay{--gw-pad:6px}}

/* ---------- Rotate hint: a phone that turns to landscape ---------- */
#rotate-hint>span{position:relative;width:32px;height:54px;margin-bottom:28px;border:2px solid var(--gw-text);border-radius:8px;transform:none;animation:gw-turn 2.8s cubic-bezier(.65,0,.35,1) infinite}
#rotate-hint>span::before{content:"";position:absolute;left:50%;bottom:4px;width:10px;height:2px;margin-left:-5px;border-radius:1px;background:currentColor;opacity:.75}
#rotate-hint>span{color:var(--gw-text)}
#rotate-hint strong{margin-bottom:6px}
#rotate-hint p{max-width:340px;margin:4px 0 0}
@keyframes gw-turn{0%,16%{transform:rotate(0);border-color:var(--gw-text);color:var(--gw-text)}44%,80%{transform:rotate(-90deg);border-color:var(--gw-accent);color:var(--gw-accent)}100%{transform:rotate(0);border-color:var(--gw-text);color:var(--gw-text)}}

/* ---------- App mode: no fullscreen button needed ---------- */
html.gw-app #fullscreen-button{display:none}
/* Pause menu Ton / Vollbild / Touch: the old light-theme rule in style.css (dark text, 9 px) still won over .gw-btn */
.gw-pause .setting-buttons button{color:var(--gw-text);border-color:var(--gw-line-2);font-size:13px}

/* ---------- Button «App installieren» / «Als App spielen» ---------- */
.gw-app-chip{display:inline-flex;align-items:center;gap:9px;height:34px;padding:0 15px 0 11px;border:1px solid var(--gw-line-2);border-radius:1px;background:rgba(9,10,12,.5);color:var(--gw-dim);font:700 13px/1 var(--gw-ui);letter-spacing:.2em;text-transform:uppercase;white-space:nowrap;cursor:pointer;transition:background .15s,border-color .15s,color .15s}
.gw-app-chip i{display:block;width:16px;height:16px;flex:none}
.gw-app-chip svg{display:block;width:100%;height:100%;fill:none;stroke:var(--gw-accent);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.gw-app-chip:hover,.gw-app-chip:focus-visible{background:rgba(233,182,74,.1);border-color:rgba(233,182,74,.7);color:var(--gw-text);outline:0}
.gw-main-head .gw-app-chip{color:var(--gw-text);background:rgba(13,14,17,.7)}
.gw-app-chip[hidden]{display:none}
.gw-title-center .gw-app-chip{margin-top:2px;animation:gw-fade-in .6s .5s ease-out both}
.gw-main-head .gw-app-chip{height:38px}
@media (max-height:500px){.gw-main-head .gw-app-chip{height:30px;padding:0 11px 0 9px;font-size:12px}}
@media (max-width:649px){.gw-main-head .gw-app-chip{padding:0 10px}.gw-main-head .gw-app-chip span{display:none}}

/* ---------- «Als App spielen»: three steps for iPhone / iPad (Safari) ---------- */
.gw-install{position:absolute;inset:0;z-index:20;display:flex;overflow:auto;padding:max(14px,var(--gw-sat,env(safe-area-inset-top))) max(16px,var(--gw-sar,env(safe-area-inset-right))) max(14px,var(--gw-sab,env(safe-area-inset-bottom))) max(16px,var(--gw-sal,env(safe-area-inset-left)));background:radial-gradient(ellipse 75% 85% at 50% 50%,rgba(5,6,8,.3),rgba(5,6,8,.74));cursor:default;animation:gw-install-in .35s ease-out both}
/* while the steps are open the title text steps back (the key art stays) */
.gw-title.is-install .gw-title-center{visibility:hidden}
.gw-install-card{position:relative;display:grid;gap:clamp(12px,2.6vh,20px);width:min(780px,100%);margin:auto;padding:clamp(16px,3.2vh,26px) clamp(16px,3vw,30px);border:1px solid var(--gw-line-2);background:#0c0d10;box-shadow:0 30px 90px rgba(0,0,0,.65);text-align:left;animation:gw-install-card .5s .05s cubic-bezier(.2,.8,.2,1) both}
/* amber corner ticks: the frame of a game prompt */
.gw-install-card::before{content:"";position:absolute;inset:-1px;pointer-events:none;background:linear-gradient(var(--gw-accent),var(--gw-accent)) top left/16px 2px,linear-gradient(var(--gw-accent),var(--gw-accent)) top left/2px 16px,linear-gradient(var(--gw-accent),var(--gw-accent)) top right/16px 2px,linear-gradient(var(--gw-accent),var(--gw-accent)) top right/2px 16px,linear-gradient(var(--gw-accent),var(--gw-accent)) bottom left/16px 2px,linear-gradient(var(--gw-accent),var(--gw-accent)) bottom left/2px 16px,linear-gradient(var(--gw-accent),var(--gw-accent)) bottom right/16px 2px,linear-gradient(var(--gw-accent),var(--gw-accent)) bottom right/2px 16px;background-repeat:no-repeat}
.gw-install-head{display:grid;gap:9px}
.gw-install-kicker{display:flex;align-items:center;gap:12px;font:600 12px/1 var(--gw-ui);letter-spacing:.34em;text-transform:uppercase;color:var(--gw-dim)}
.gw-install-kicker i{flex:none;width:6px;height:6px;border-radius:50%;background:var(--gw-accent);box-shadow:0 0 10px var(--gw-accent-glow)}
.gw-install-kicker::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,var(--gw-line-2),transparent)}
.gw-install h2{margin:0;font:700 clamp(28px,4.6vw,42px)/1 var(--gw-ui);letter-spacing:.2em;text-transform:uppercase;color:#f6f3ec}
.gw-install-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin:0;padding:0;list-style:none;border:1px solid var(--gw-line)}
.gw-install-steps li{position:relative;display:grid;justify-items:start;align-content:start;gap:9px;padding:14px 16px 16px;background:rgba(236,232,224,.025)}
.gw-install-steps li+li{border-left:1px solid var(--gw-line)}
.gw-install-steps li+li::before{content:"";position:absolute;left:-6px;top:50%;width:9px;height:9px;margin-top:-5px;border-top:1px solid var(--gw-line-3);border-right:1px solid var(--gw-line-3);background:#101113;transform:rotate(45deg)}
.gw-install-steps small{font:500 12px/1 var(--gw-mono);letter-spacing:.06em;color:var(--gw-accent)}
.gw-install-icon{display:grid;place-items:center;width:48px;height:48px;border:1px solid var(--gw-line-2);background:rgba(0,0,0,.35);color:var(--gw-text)}
.gw-install-icon svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.gw-install-app{border-color:transparent;background:none}
.gw-install-app img{display:block;width:44px;height:44px;border-radius:10px;box-shadow:0 0 0 1px rgba(236,232,224,.18),0 6px 18px rgba(0,0,0,.5)}
.gw-install-steps strong{font:700 17px/1.15 var(--gw-ui);letter-spacing:.07em;text-transform:uppercase;color:var(--gw-text)}
.gw-install-steps em{font:600 12px/1.3 var(--gw-ui);font-style:normal;letter-spacing:.13em;text-transform:uppercase;color:var(--gw-mute)}
.gw-install-dots{display:inline-block;padding:0 5px;border:1px solid var(--gw-line-2);border-radius:9px;color:var(--gw-dim);font-weight:700;letter-spacing:.06em}
.gw-install-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 18px}
.gw-install-foot p{margin:0;color:var(--gw-dim);font:600 13px/1.3 var(--gw-ui);letter-spacing:.14em;text-transform:uppercase}
.gw-install-later{color:var(--gw-dim)}
.gw-install-later:hover,.gw-install-later:focus-visible{color:var(--gw-text)}
@keyframes gw-install-in{from{opacity:0}to{opacity:1}}
@keyframes gw-install-card{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
/* phone upright: steps one below the other */
@media (max-width:620px){
  .gw-install-steps{grid-template-columns:minmax(0,1fr)}
  .gw-install-steps li{grid-template-columns:22px 48px minmax(0,1fr);grid-template-rows:auto auto;align-items:center;column-gap:12px;row-gap:4px;padding:11px 14px}
  .gw-install-steps li>small,.gw-install-steps li>.gw-install-icon{grid-row:1/3}
  .gw-install-steps strong{align-self:end}
  .gw-install-steps em{align-self:start}
  .gw-install-steps li+li{border-left:0;border-top:1px solid var(--gw-line)}
  .gw-install-steps li+li::before{left:47px;top:-6px;margin-top:0;transform:rotate(135deg)}
  .gw-install-foot{justify-content:center;text-align:center}
}
/* phone sideways in Safari (330-430 px high) */
@media (max-height:430px){
  .gw-install-card{gap:11px;padding:13px 20px 14px}
  .gw-install-head{gap:7px}
  .gw-install-kicker{font-size:11px}
  .gw-install h2{font-size:25px}
  .gw-install-steps li{gap:6px;padding:10px 13px 12px}
  .gw-install-icon{width:40px;height:40px}
  .gw-install-icon svg{width:22px;height:22px}
  .gw-install-app img{width:38px;height:38px;border-radius:9px}
  .gw-install-steps strong{font-size:15px}
  .gw-install-steps em{font-size:11px}
  .gw-install-foot p{font-size:12px}
}
@media (prefers-reduced-motion:reduce){
  .gw-install,.gw-install-card,.gw-title-center .gw-app-chip{animation:none!important}
  #rotate-hint>span{animation:none;transform:rotate(-90deg);border-color:var(--gw-accent);color:var(--gw-accent)}
}
/* [2.5.6] why the app: this iPhone lost its graphics in a Safari tab */
.gw-install-why{margin:2px 0 0;max-width:64ch;color:var(--gw-text);font:600 15px/1.45 var(--gw-ui);letter-spacing:.03em}