*{box-sizing:border-box}

html,body{
margin:0;
background:#080a0f;
color:#e9edf5;
font-family:system-ui,-apple-system,Segoe UI,sans-serif;
min-height:100%;
overscroll-behavior:none
}

body{
background:radial-gradient(circle at 50% 0,#192033,#080a0f 45%)
}

#app{
max-width:1100px;
margin:auto;
padding:16px
}

header{
display:flex;
justify-content:space-between;
align-items:center;
padding:12px 4px 22px;
color:#8993a8;
font-size:12px;
letter-spacing:2px
}

header b{
color:#fff;
font-size:18px
}

.screen{display:none}
.screen.active{display:block}

.panel{
background:#10141d;
border:1px solid #242b39;
border-radius:16px;
padding:18px;
margin-bottom:14px;
box-shadow:0 14px 40px #0005
}

.hero{
text-align:center;
padding:28px
}

.hero h1{
font-size:clamp(38px,8vw,72px);
margin:2px;
letter-spacing:5px
}

.hero p{color:#9ca7bb}

.eyebrow{
letter-spacing:4px;
font-size:11px
}

.stats{
display:flex;
gap:10px;
justify-content:center;
flex-wrap:wrap;
margin-top:20px
}

.stats span,#hud span{
background:#181e29;
padding:8px 11px;
border-radius:10px
}

.grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:14px
}

.cards{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:8px
}

.card,.talent{
border:1px solid #2c3547;
background:#151a24;
border-radius:12px;
padding:12px;
cursor:pointer
}

.card.selected,.talent.selected{
outline:2px solid #e9edf5;
background:#202737
}

.card strong{
display:block;
font-size:22px
}

.card small,.talent small,.muted{
color:#8f9aaf
}

.talents{
display:grid;
gap:7px
}

.primary{
width:100%;
padding:18px;
border:0;
border-radius:14px;
font-weight:900;
font-size:17px;
letter-spacing:2px;
cursor:pointer
}

button{
touch-action:manipulation
}

#hud{
display:flex;
gap:7px;
flex-wrap:wrap;
margin-bottom:10px;
font-size:12px
}

#canvas{
display:block;
width:100%;
height:auto;
aspect-ratio:16/9;
background:#090b10;
border:1px solid #293144;
border-radius:14px;
touch-action:none
}

#message{
text-align:center;
height:30px;
padding:7px;
color:#d9dfeb
}

.modal{
position:fixed;
inset:0;
background:#000b;
display:grid;
place-items:center;
padding:20px;
z-index:10
}

.hidden{
display:none
}

.modalBox{
width:min(600px,100%);
background:#111620;
border:1px solid #343e52;
border-radius:18px;
padding:22px
}

.modalBox h2{
margin-top:0
}

.choice{
width:100%;
text-align:left;
margin:6px 0;
padding:14px;
border-radius:12px;
border:1px solid #303a4d;
background:#1a202c;
color:#fff
}

.choice strong{
display:block
}

.choice small{
color:#9da8ba
}

.loot{
display:inline-block;
background:#1b2230;
border:1px solid #303a4d;
border-radius:9px;
padding:7px 10px;
margin:4px
}

.rare{
box-shadow:inset 0 0 0 1px #ddd
}

#touch{
display:none;
justify-content:space-between;
align-items:end;
margin-top:8px
}

#touch button{
border:1px solid #39445a;
background:#181e29;
color:white;
border-radius:10px;
min-width:54px;
min-height:48px;
margin:2px;
font-weight:bold
}

.actions button{
min-width:75px;
min-height:60px
}

.actions{
display:flex;
gap:5px
}

@media(max-width:760px),(pointer:coarse){

.grid{
grid-template-columns:1fr
}

.cards{
grid-template-columns:1fr 1fr 1fr
}

.card{
padding:9px
}

.card strong{
font-size:16px
}

#touch{
display:flex
}

.hero{
padding:18px
}

.panel{
padding:14px
}

#app{
padding:10px
}

}


/* DEPTHBOUND visual upgrade v1 */
#canvas{
  box-shadow:0 20px 60px #0009, inset 0 0 40px #0008;
}
#game{
  position:relative;
}

/* DEPTHBOUND cinematic dark-fantasy direction — concept-aligned foundation */
:root{--db-ink:#080b0f;--db-panel:#10151a;--db-line:#3a3328;--db-gold:#c79a54;--db-ember:#d7773c;--db-ice:#76b8d9;--db-text:#e7e0d2}
body{background:radial-gradient(circle at 50% -10%,#233142 0,#111820 28%,#080b0f 66%);color:var(--db-text)}
#app{max-width:1280px}
.panel{background:linear-gradient(180deg,#151a1f,#0d1115);border-color:var(--db-line);border-radius:5px;box-shadow:0 18px 55px #0009}
.depthbound-cover{position:relative;overflow:hidden;border-top:2px solid #8c6a3e;background:radial-gradient(circle at 50% 120%,#5b321e55,transparent 42%),linear-gradient(180deg,#17202a,#0a0e12)}
.depthbound-cover:after{content:"";position:absolute;inset:auto 8% 0;height:2px;background:linear-gradient(90deg,transparent,var(--db-gold),transparent);opacity:.65}
.hero h1{font-family:Georgia,"Times New Roman",serif;font-weight:700;letter-spacing:.11em;text-shadow:0 3px 20px #000}
.depthbound-motto{color:#d5c3a5!important;letter-spacing:.34em;font-size:11px}
.eyebrow{color:#bfa57b}.town-layout{display:grid;grid-template-columns:1.2fr .8fr;gap:14px}
.cards{grid-template-columns:repeat(6,1fr)}
.card{min-height:132px;background:linear-gradient(180deg,#171d22,#0d1115);border-radius:3px;border-color:#3a3f43;transition:transform .18s,border-color .18s,box-shadow .18s}
.card:hover,.card.selected{transform:translateY(-2px);border-color:var(--db-gold);box-shadow:0 8px 28px #0008,inset 0 0 25px #c79a5410}
.card strong{font-family:Georgia,serif;font-size:18px}.depart-panel{border-left:3px solid var(--db-gold)}
.primary{border-radius:3px;background:linear-gradient(180deg,#d4ad68,#9d7139);color:#100d09;text-shadow:none}
.gear-grid .gear,.loot{border-radius:3px;background:#0c1116;border-color:#3b4148}
#canvas{border-radius:3px;border-color:#4a4032;background:#080b0e}
.run-header{font-family:Georgia,serif;letter-spacing:.08em}.health-track{border-color:#49352e}
@media(max-width:900px){.town-layout{grid-template-columns:1fr}.cards{grid-template-columns:repeat(3,1fr)}}
@media(max-width:560px){.cards{grid-template-columns:repeat(2,1fr)}.depthbound-motto{letter-spacing:.16em}.panel{border-radius:3px}}