/* Homeless and Hungry — общий стиль сайта. Палитра снята с эталонного скриншота владельца. */
@font-face{font-family:P;src:url(../fonts/press-start-2p.ttf) format('truetype');font-display:block}
:root{
  --frame:#1e1e1e; --page:#13130f; --hdr:#0c0b09; --chip:#171717;
  --panel:#1c1b19; --panel-brd:#24201f; --outer:#1e1a19; --outer-brd:#231b18;
  --btn:#141311; --console:#0a0907; --strip:#1c1b19;
  --text:#6a6665; --log:#96918e; --title:#6e4529; --gold:#7a603f; --credit:#977d67;
  --ok:#567049; --bad:#6a3637; --player:#3e5d35; --white:#fefefe; --ts:#3b3735;
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{min-height:100%;background:var(--frame);color:var(--text);font:10px/1.6 P,monospace}
body{padding:16px 20px}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
.wrap{background:var(--page);min-height:calc(100vh - 32px);display:flex;flex-direction:column}

/* шапка */
.hdr{display:flex;align-items:center;gap:13px;background:var(--hdr);padding:11px 12px;flex-wrap:wrap}
.logo{color:var(--title);font-size:18px;letter-spacing:.5px;margin-right:auto;white-space:nowrap}
.chip{background:var(--chip);padding:8px 14px;display:inline-flex;align-items:center;gap:8px;white-space:nowrap}
.chip.cr{color:var(--credit)} .chip img{height:18px;image-rendering:pixelated}

/* панели */
.outer{background:var(--outer);box-shadow:inset 0 0 0 3px var(--outer-brd);padding:8px}
.panel{background:var(--panel);box-shadow:inset 0 0 0 3px var(--panel-brd);padding:14px}
.ph{text-align:center;margin-bottom:12px}
.console{background:var(--console);padding:14px 16px;color:var(--log);line-height:2.1}
.btn{display:inline-block;background:var(--btn);border:0;padding:10px 16px;cursor:pointer;text-align:center;color:var(--text)}
.btn:hover,.btn:focus-visible{color:var(--log);outline:2px solid var(--panel-brd)}
.btn.big{padding:16px 24px;font-size:12px}
.btn.gold{color:var(--gold)}
.tabs{display:flex;background:var(--btn)}
.tab{padding:9px 20px;cursor:pointer;background:none;border:0;color:var(--text)}
.tab.act{background:var(--panel)}
.g{color:var(--log)} .y{color:var(--gold)} .ok{color:var(--ok)} .bad{color:var(--bad)} .ts{color:var(--ts)} .pl{color:var(--player)} .w{color:var(--white)}

/* полосы */
.bar{height:9px;background:linear-gradient(90deg,#4d493d,#302a2a);position:relative;flex:1}
.bar>i{position:absolute;inset:0 auto 0 0}
.bar.sleep>i{background:linear-gradient(90deg,#792d2d,#953d3c)}
.bar.thirst>i{background:linear-gradient(90deg,#795731,#9b7745)}
.bar.hp>i{background:linear-gradient(90deg,#3b643a,#638843)}
.bar.hunger>i{background:linear-gradient(90deg,#7a2c2c,#963e3d)}
.bar.timer{height:8px;border-radius:4px;background:linear-gradient(90deg,#46311e,#4f3e2e)}
.bar.timer>i{border-radius:4px;background:linear-gradient(90deg,#7e572c,#b07c43 65%,#8d6534)}

/* формы */
.field{display:block;margin-bottom:14px}
.field span{display:block;margin-bottom:6px}
.field input,.field select{width:100%;background:var(--console);border:0;box-shadow:inset 0 0 0 2px var(--panel-brd);padding:10px;color:var(--log)}
.field input:focus,.field select:focus{outline:2px solid var(--gold)}
.note{color:var(--ts);margin-top:10px}
.msg{min-height:20px;margin-top:10px}

/* страницы-формы и лендинг */
.center{flex:1;display:flex;align-items:center;justify-content:center;padding:24px}
.card{width:min(460px,100%)}
.landing{flex:1;display:grid;grid-template-columns:1fr 1fr;gap:16px;padding:16px}
.landing .console{min-height:260px}
.cta{display:flex;flex-direction:column;gap:12px;margin-top:16px}
.foot{padding:10px 12px;color:var(--ts);display:flex;gap:16px;flex-wrap:wrap}
.foot a:hover{color:var(--text)}
.opts{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.opt{background:var(--btn);padding:10px;cursor:pointer;border:0;text-align:left;color:var(--text)}
.opt[aria-pressed=true]{color:var(--gold);outline:2px solid var(--gold)}
.portrait{image-rendering:pixelated;display:block;margin:10px auto}

/* игра: раскладка эталона (41% | 40% | 10%) */
.game{flex:1;display:grid;grid-template-columns:42fr 40fr 10fr;gap:10px 18px;padding:6px 10px 10px 44px;min-height:0}
.g-left{display:grid;grid-template-rows:1fr auto;gap:28px;min-height:0}
.g-left .outer{display:flex;flex-direction:column;min-height:0}
.g-log{flex:1;overflow:auto;min-height:220px;display:flex;flex-direction:column;justify-content:space-between}
.dec{background:#151010;box-shadow:inset 0 0 0 4px #1a120d;padding:14px 22px 18px;margin:0 30px}
.dec h2{color:#6f5a42;font-size:14px;font-weight:normal;text-align:center}
.dec p{text-align:center;margin:12px 0}
.choices{display:flex;justify-content:space-around;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.choices .btn{background:none;padding:6px}
.g-bottom{display:grid;grid-template-columns:1fr auto;gap:22px;align-items:stretch}
.g-bottom .btn.big{font-size:16px}
.dice{background:none;border:0;cursor:pointer}
.dice img{display:block;image-rendering:pixelated}
.g-right{display:grid;grid-template-columns:195fr 272fr 189fr;grid-template-rows:auto auto 1fr auto;gap:22px 16px;min-height:0}
.g-right .wide{grid-column:1/-1}
.near{display:flex;flex-direction:column;align-items:center;gap:8px}
.near .btn{width:100%;padding:7px 4px}
.who{text-align:center}
.who .w{font-size:20px}
.needs{display:grid;grid-template-columns:auto 1fr auto 1fr;gap:16px 20px;align-items:center}
.menu{background:#000;display:flex;flex-direction:column;gap:17px;padding:75px 24px 70px}
.menu .btn{padding:20px 4px;font-size:12px}
.menu .spacer{flex:1}
.flip{display:none}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
@media (hover:none){.btn:hover{color:inherit;outline:0}}

/* ===== телефон, портрет: одна половина + перевёртыш ===== */
@media (max-width:900px) and (orientation:portrait){
  html,body{font-size:12px;line-height:1.7}
  body{padding:0}
  .wrap{min-height:100dvh}
  .hdr{position:sticky;top:0;z-index:5;gap:6px;padding:8px 10px calc(8px) max(10px,env(safe-area-inset-left))}
  .logo{font-size:14px;width:100%;text-align:center}
  .hdr .chip{flex:1;justify-content:center;padding:8px 4px;font-size:9px;min-height:36px}
  .chip img{height:14px}
  .btn,.tab,.opt{min-height:44px}
  .tabs{overflow-x:auto;scrollbar-width:none}
  .tab{flex:0 0 auto;padding:12px 14px}
  .landing{grid-template-columns:1fr;padding:10px;gap:10px}
  .landing .console{min-height:0}
  .center{padding:10px;align-items:flex-start}
  .field input,.field select{font-size:16px;padding:12px}
  .opts{gap:10px}
  .game{grid-template-columns:minmax(0,1fr);padding:8px 8px calc(76px + env(safe-area-inset-bottom));gap:10px}
  .game>*,.g-left>*,.g-right>*{min-width:0}
  .console p{overflow-wrap:anywhere}
  .game[data-half=world] .g-right,.game[data-half=world] .menu,.game[data-half=hero] .g-left{display:none}
  .g-left{gap:10px}
  .g-log{min-height:0}
  .console{padding:12px;font-size:11px;line-height:1.9}
  .dec{margin:12px 0 0;padding:14px 12px}
  .dec h2{font-size:13px}
  .choices{flex-direction:column;gap:8px}
  .choices .btn{background:var(--btn);padding:12px;width:100%}
  .g-bottom{grid-template-columns:1fr auto;gap:10px}
  .g-bottom .btn.big{font-size:14px}
  .dice img{width:84px;height:auto}
  .g-right{grid-template-columns:minmax(0,1fr);gap:10px}
  .g-right .por{order:-1}
  .g-right .side{display:none}
  .near{display:grid;grid-template-columns:1fr 1fr;gap:8px;align-items:center}
  .near>div{grid-column:1/-1}
  .who .w{font-size:18px}
  .needs{grid-template-columns:auto 1fr;gap:14px 12px}
  .bar{height:12px}
  .menu{display:grid;grid-template-columns:repeat(3,1fr);padding:8px;gap:8px}
  .menu .btn{padding:12px 4px;font-size:10px}
  .menu .spacer,.menu .empty{display:none}
  .flip{display:block;position:fixed;left:0;right:0;bottom:0;z-index:10;width:100%;font-size:14px;
        padding:16px 16px calc(16px + env(safe-area-inset-bottom));background:var(--btn);color:var(--gold);box-shadow:0 -3px 0 var(--panel-brd)}
  .wrap:has(.game) .foot{padding-bottom:calc(80px + env(safe-area-inset-bottom))}
  .foot{justify-content:center;font-size:9px}
}

/* ===== телефон, альбом: обе половины рядом ===== */
@media (max-height:520px) and (orientation:landscape){
  html,body{font-size:9px}
  body{padding:0}
  .hdr{padding:6px 10px}
  .logo{font-size:12px}
  .chip{padding:5px 8px}
  .game{grid-template-columns:minmax(0,1fr) minmax(0,1fr);padding:6px max(8px,env(safe-area-inset-left));gap:8px}
  .game>*,.g-left>*,.g-right>*{min-width:0}
  .console p{overflow-wrap:anywhere}
  .tabs{overflow-x:auto;scrollbar-width:none}.tab{flex:0 0 auto;padding:8px 10px}
  .g-right{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px}
  .g-right .side{display:none}
  .g-right .por{grid-row:1/3}
  .menu{grid-column:1/-1;flex-direction:row;flex-wrap:wrap;padding:6px;gap:6px}
  .menu .btn{flex:1 1 12%;padding:10px 4px;font-size:9px}
  .menu .spacer,.menu .empty{display:none}
  .dec{margin:8px 0 0}
  .portrait{width:90px;height:auto}
  .btn,.tab,.opt,.chip{min-height:40px}
  .choices .btn{background:var(--btn);padding:10px}
}