@font-face { font-family: Satyr; src: url(fonts/SatyrSP.otf) format('opentype'); font-display: block; }
:root { --bg: #d8763b; --far: #c8652f; --fig: #17110d; --line: #d8763b; --red: #8e2b1c; --white: #efe2c8; --fz: 15px; }
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--bg); color: var(--fig); font-family: Philosopher, 'PT Serif', Georgia, serif; font-size: var(--fz); user-select: none; -webkit-user-select: none; overscroll-behavior: none; }
canvas { position: fixed; inset: 0; width: 100vw; height: 100vh; height: 100dvh; display: block; touch-action: none; }
button { font: inherit; color: inherit; cursor: pointer; }
.hide { display: none !important; }

#hud { position: fixed; left: 0; right: 0; top: calc(env(safe-area-inset-top) + 18px); padding: 0 14px; pointer-events: none; }
#hud .row { display: flex; align-items: flex-start; gap: 10px; }
.hgt { flex: 1; font-family: Satyr, serif; line-height: 1; }
.hgt b { font-family: Philosopher, serif; font-size: 32px; font-weight: 700; display: block; }
.hgt small { font-family: Philosopher, serif; font-size: 13px; opacity: .75; }
.dr { font-family: Philosopher, serif; font-weight: 700; font-size: 24px; display: flex; align-items: center; gap: 6px; padding-top: 4px; }
.coin { width: 20px; height: 20px; border-radius: 50%; background: var(--fig); box-shadow: inset 0 0 0 2px var(--fig), inset 0 0 0 3.5px var(--line); display: inline-block; }
.icon { pointer-events: auto; width: 40px; height: 40px; border: 3px solid var(--fig); border-radius: 10px; background: var(--bg); display: grid; place-items: center; padding: 0; }
.icon svg { width: 22px; height: 22px; fill: var(--fig); }
.bar { position: relative; height: 16px; margin-top: 8px; border: 3px solid var(--fig); border-radius: 10px; background: var(--bg); overflow: hidden; max-width: 520px; }
.bar i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: var(--fig); }
.bar #st2 { background: var(--red); left: auto; }
.bar svg { position: absolute; left: 50%; top: 50%; width: 14px; height: 14px; transform: translate(-50%, -50%); fill: var(--white); mix-blend-mode: normal; }
#map { position: relative; height: 18px; margin-top: 8px; max-width: 520px; }
#map .ln { position: absolute; left: 6px; right: 6px; top: 8px; height: 2px; background: var(--fig); opacity: .5; }
#map .dot { position: absolute; top: 4px; width: 10px; height: 10px; margin-left: -5px; border-radius: 50%; border: 2px solid var(--fig); background: var(--bg); }
#map .dot.met { background: var(--fig); }
#map .dot.top { width: 12px; height: 12px; margin-left: -6px; top: 3px; border-radius: 2px; transform: rotate(45deg); }
#map .me { position: absolute; top: 1px; width: 16px; height: 16px; margin-left: -8px; border-radius: 50%; background: var(--red); border: 2px solid var(--fig); transition: left .15s linear; }
#map .rec { position: absolute; top: -2px; width: 2px; height: 22px; background: var(--red); }

#hint { position: fixed; left: 0; right: 0; top: calc(env(safe-area-inset-top) + 150px); text-align: center; font-size: 17px; pointer-events: none; opacity: 0; transition: opacity .5s; text-shadow: 0 0 6px var(--bg), 0 0 2px var(--bg); }
#hint.on { opacity: .9; }
#toast { position: fixed; left: 50%; top: 34%; transform: translate(-50%, -50%); font-family: Philosopher, serif; font-weight: 700; font-size: 24px; text-align: center; pointer-events: none; opacity: 0; transition: opacity .4s, top .4s; text-shadow: 0 0 8px var(--bg), 0 0 3px var(--bg); width: 90vw; line-height: 1.15; }
#toast.on { opacity: 1; top: 30%; }

/* лавка: снизу на телефоне, справа на широком экране */
#panel { position: fixed; left: 0; right: 0; bottom: 0; max-height: 56vh; max-height: 56dvh; overflow-y: auto; background: var(--bg); border-top: 4px solid var(--fig); padding: 12px 14px calc(env(safe-area-inset-bottom) + 12px); z-index: 5; -webkit-overflow-scrolling: touch; }
#panel::before { content: ''; display: block; height: 10px; margin: -4px -14px 10px; background: repeating-linear-gradient(90deg, var(--fig) 0 10px, transparent 10px 14px, var(--fig) 14px 16px, transparent 16px 20px); opacity: .85; -webkit-mask: linear-gradient(#000 0 3px, transparent 3px 7px, #000 7px); mask: linear-gradient(#000 0 3px, transparent 3px 7px, #000 7px); }
@media (min-width: 900px) and (min-aspect-ratio: 1/1) {
  #panel { left: auto; top: 0; width: 400px; max-height: none; border-top: 0; border-left: 4px solid var(--fig); padding-top: 22px; }
  #panel::before { display: none; }
  #hud { right: 400px; }
  #hint { right: 400px; }
  body.nopanel #hud, body.nopanel #hint { right: 0; }
}
.who { display: flex; gap: 12px; align-items: center; margin-bottom: 8px; }
.who canvas { position: static; width: 84px; height: 112px; border: 3px solid var(--fig); border-radius: 10px; flex: none; }
.who h2 { font-family: Satyr, serif; font-weight: normal; font-size: 26px; margin: 0; line-height: 1.05; }
.who .ep { font-style: italic; opacity: .8; font-size: 14px; }
.say { margin: 0 0 6px; line-height: 1.35; }
.say + .say { opacity: .85; }
.cards { display: grid; gap: 8px; margin: 10px 0; }
.card { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; align-items: center; border: 3px solid var(--fig); border-radius: 10px; padding: 8px 10px; }
.card b { font-size: 17px; }
.card .lv { opacity: .7; font-size: 13px; margin-left: 6px; }
.card .d { font-size: 13px; opacity: .85; grid-column: 1; }
.card .fx { font-size: 13px; grid-column: 1; font-weight: bold; }
.card .buy { grid-row: 1 / span 3; grid-column: 2; min-width: 86px; padding: 8px 10px; border-radius: 8px; border: 3px solid var(--fig); background: var(--fig); color: var(--bg); font-family: Philosopher, serif; font-weight: 700; font-size: 17px; display: flex; align-items: center; justify-content: center; gap: 5px; }
.card .buy .coin { width: 14px; height: 14px; background: var(--bg); box-shadow: inset 0 0 0 2px var(--bg), inset 0 0 0 3px var(--fig); }
.card .buy:disabled { background: transparent; color: var(--fig); opacity: .55; cursor: default; }
.card .buy:disabled .coin { background: var(--fig); box-shadow: inset 0 0 0 2px var(--fig), inset 0 0 0 3px var(--bg); }
.card.maxed .buy { opacity: .4; }
.go { display: flex; gap: 10px; align-items: center; margin-top: 6px; position: sticky; bottom: -12px; background: var(--bg); padding: 8px 0 4px; }
.big { flex: 1; font-family: Satyr, serif; font-size: 28px; padding: 10px; border: 4px solid var(--fig); border-radius: 12px; background: var(--bg); letter-spacing: 1px; position: relative; overflow: hidden; }
.big:active { transform: translateY(1px); }
.big .fillbar { position: absolute; left: 0; top: 0; bottom: 0; background: var(--fig); opacity: .18; }
.chk { display: flex; align-items: center; gap: 6px; font-size: 14px; max-width: 130px; line-height: 1.1; }
.chk input { width: 22px; height: 22px; accent-color: var(--fig); }
h3 { font-family: Satyr, serif; font-weight: normal; font-size: 21px; margin: 14px 0 4px; }
.stones { display: flex; flex-wrap: wrap; gap: 6px; }
.stones button { border: 3px solid var(--fig); border-radius: 8px; background: var(--bg); padding: 5px 9px; font-size: 14px; }
.stones button.on { background: var(--fig); color: var(--bg); }
.sub { font-size: 13px; opacity: .8; margin: 2px 0 6px; }

#modal { position: fixed; inset: 0; background: rgba(0,0,0,.45); display: grid; place-items: center; z-index: 10; padding: 16px; }
#modal .box { background: var(--bg); border: 4px solid var(--fig); border-radius: 14px; max-width: 560px; width: 100%; max-height: 90vh; max-height: 90dvh; overflow-y: auto; padding: 16px; }
#modal h2 { font-family: Satyr, serif; font-weight: normal; font-size: 30px; margin: 0 0 8px; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 10px; }
.grid .g { border: 3px solid var(--fig); border-radius: 10px; padding: 6px; text-align: center; font-size: 13px; line-height: 1.2; }
.grid .g canvas { position: static; width: 100%; height: auto; aspect-ratio: 3/4; border-radius: 6px; display: block; margin-bottom: 4px; }
.grid .g b { display: block; font-size: 15px; }
.grid .g .u { opacity: .8; font-size: 12px; }
.opts { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.opts button { border: 3px solid var(--fig); border-radius: 8px; background: var(--bg); padding: 6px 12px; }
.opts button.on { background: var(--fig); color: var(--bg); }
.quote { font-style: italic; margin: 14px 0 4px; opacity: .9; }
@media (max-width: 380px) { .hgt b { font-size: 28px; } .dr { font-size: 20px; } }