/* Sopwith DOS Classic pastiche - 172 Games */
/* Layout: one-screen arcade cabinet. 320x200 CGA canvas centred; touch clusters sit below it (portrait) or flank it (landscape). Single CGA-dark look by design. */
:root{
  --bg:#06070c;
  --panel:#0d1019;
  --cyan:#55ffff;
  --magenta:#ff55ff;
  --white:#ffffff;
  --dim:#8a8fa6;
  --pixel:'Press Start 2P', ui-monospace, Menlo, Consolas, monospace;
  color-scheme: dark;
}
*,*::before,*::after{box-sizing:border-box}
html,body{height:100%;margin:0;padding:0}
button{margin:0}
body{background:var(--bg);color:var(--white);font-family:var(--pixel);overflow:hidden;
  touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}
#app{height:100%;box-sizing:border-box;display:flex;flex-direction:column;align-items:center;gap:10px;
  padding:max(10px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left))}
header{width:100%;max-width:1100px;display:flex;align-items:center;justify-content:space-between;gap:12px;flex:none}
h1{margin:0;font-size:14px;line-height:1.4;letter-spacing:3px;color:var(--cyan);text-shadow:2px 2px 0 var(--magenta);font-weight:400}
h1 small{display:block;font-size:7px;color:var(--dim);letter-spacing:1px;text-shadow:none;margin-top:4px}
.tools{display:flex;gap:8px}
.tb{font-family:var(--pixel);font-size:8px;background:var(--panel);color:var(--white);border:2px solid var(--dim);padding:7px 8px;cursor:pointer;display:flex;gap:6px;align-items:center}
.tb kbd{font-family:inherit;color:var(--cyan)}
.tb:focus-visible,.btn:focus-visible{outline:2px solid var(--white);outline-offset:2px}
.tb.on{border-color:var(--cyan)}

#cab{flex:1;min-height:0;width:100%;max-width:1100px;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr);grid-template-areas:"stage";gap:12px}
#stage{grid-area:stage;min-width:0;min-height:0;display:flex;align-items:center;justify-content:center}
canvas{display:block;image-rendering:pixelated;image-rendering:crisp-edges;background:#000;box-shadow:0 0 0 2px #1b2030,0 0 40px rgba(85,255,255,.08)}

.cluster{display:none;gap:10px;min-height:0}
#left{grid-area:left;grid-template-rows:repeat(3,1fr)}
#right{grid-area:right;grid-template-columns:repeat(3,1fr);grid-template-rows:1.4fr 1fr 1fr;grid-template-areas:"fire fire fire" "bomb bomb bomb" "slow fast home"}
.btn{font-family:var(--pixel);background:var(--panel);color:var(--white);border:2px solid var(--cyan);border-radius:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;font-size:8px;letter-spacing:1px;
  min-height:44px;min-width:0;padding:4px;touch-action:none;box-shadow:3px 3px 0 0 rgba(85,255,255,.22)}
.btn kbd{font-family:inherit;font-size:14px;color:var(--cyan)}
.btn.hot{border-color:var(--magenta);box-shadow:3px 3px 0 0 rgba(255,85,255,.22)}
.btn.hot kbd{color:var(--magenta)}
.btn.on{background:var(--cyan);color:#000;transform:translate(2px,2px);box-shadow:none}
.btn.hot.on{background:var(--magenta)}
.btn.on kbd{color:#000}
#b-fire{grid-area:fire}#b-bomb{grid-area:bomb}#b-slow{grid-area:slow}#b-fast{grid-area:fast}#b-home{grid-area:home}

#legend{flex:none;width:100%;max-width:1100px;display:flex;flex-wrap:wrap;justify-content:center;gap:10px 18px;font-size:8px;color:var(--dim);line-height:1.6}
#legend span{white-space:nowrap}
#legend kbd{font-family:inherit;color:var(--cyan);border:1px solid #2a3044;padding:2px 5px;margin-right:6px}
#legend .tip{flex-basis:100%;text-align:center;color:var(--white)}

html.pad .cluster{display:grid}
html.touch #legend{display:none}
@media (orientation:portrait){
  html.pad #cab{grid-template-columns:1fr 1fr;grid-template-rows:auto minmax(0,1fr);grid-template-areas:"stage stage" "left right";align-content:start}
  html.pad #stage{aspect-ratio:320/214;width:100%}
  html.pad .cluster{max-height:48vh}
}
@media (orientation:landscape){
  html.pad #app{gap:6px;padding-block:6px}
  html.pad #cab{grid-template-columns:minmax(92px,150px) minmax(0,1fr) minmax(92px,150px);grid-template-areas:"left stage right";gap:10px}
  html.touch h1 small{display:none}
  html.pad .btn{font-size:7px}
}

.brand{display:flex;align-items:center;gap:12px;min-width:0}
.brand a.logo{display:flex;flex:none;align-items:center}
.brand img{height:34px;width:auto;display:block}
.tools{flex-wrap:wrap;justify-content:flex-end}
.tb:hover{border-color:var(--white)}
canvas{cursor:crosshair}
.btn{cursor:pointer;-webkit-user-select:none;user-select:none}
#credit{flex:none;width:100%;max-width:1100px;display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 16px;font-size:7px;color:var(--dim);line-height:1.6}
#credit a{color:var(--cyan);text-decoration:none}
#credit a:hover,#credit a:focus-visible{text-decoration:underline}
html,body{height:100%;height:100dvh}
@media (max-width:640px){
  header{flex-wrap:wrap}
  .tools{width:100%;justify-content:space-between}
  .tb{flex:1;justify-content:center;padding:7px 4px}
  .brand img{height:28px}
  h1{font-size:12px}
  #credit{justify-content:center;text-align:center}
}
@media (orientation:landscape) and (max-height:500px){
  header{flex-wrap:nowrap}
  .tools{width:auto}
  .tb{flex:none}
  h1 small{display:none}
  .brand img{height:24px}
  #credit{display:none}
}

.brand a.logo{text-decoration:none;color:var(--cyan);font-size:8px}