/* ASHEN RIFT, playable build stylesheet.
   Inherits the dossier ground, ink and accent rules from styles.css. */

:root{
  --grain-op:0.045;
}
html,body{height:100%}
body{overflow:hidden; background:var(--well); overscroll-behavior:none; -webkit-user-select:none; user-select:none}
#app{position:fixed; inset:0; overflow:hidden}
#arena-holder{position:absolute; inset:0; z-index:1; background:
  radial-gradient(120% 80% at 50% 30%, #1b1714 0%, #100E0C 70%, #0b0908 100%);}
#arena-holder canvas{display:block; width:100% !important; height:100% !important}

.hidden{display:none !important}

/* the pause bar keeps the arena in view: no dimming, a single strip, tap anywhere to resume */
#screen-pause{background:transparent; backdrop-filter:none; align-items:flex-start; justify-content:center; padding-top:6px}
.pause-bar{display:flex; align-items:center; gap:12px; flex-wrap:wrap; justify-content:center; background:rgba(23,20,18,.94); border:1px solid var(--hair-strong); padding:9px 14px; width:min(680px,96%)}
.pause-label{font-family:var(--display); font-size:20px; letter-spacing:0.06em; text-transform:uppercase; color:var(--bone)}
.pause-hint{flex:1 1 170px; color:var(--ash); text-align:left}
.pause-bar .primary, .pause-bar .ghost{padding:9px 16px; font-size:11.5px; margin:0}

#hud-strip{font-family:var(--mono); font-size:9.5px; letter-spacing:0.1em; color:var(--ash-dim); margin-top:4px; max-width:52vw; line-height:1.5; text-transform:uppercase}

/* ---------- HUD ---------- */
#hud{position:absolute; inset:0; z-index:20; pointer-events:none; display:flex; flex-direction:column; justify-content:space-between; padding:max(10px,env(safe-area-inset-top)) 12px max(12px,env(safe-area-inset-bottom));}
#hud > * > *{pointer-events:auto}
.hud-top{display:flex; align-items:flex-start; justify-content:space-between; gap:12px}
.hud-left{min-width:104px}
.hud-timer{font-family:var(--display); font-size:clamp(26px,7vw,40px); font-weight:600; letter-spacing:0.04em; line-height:1; color:var(--bone); text-shadow:0 1px 0 rgba(0,0,0,.8); font-variant-numeric:tabular-nums}
.hud-mid{flex:1; max-width:420px; margin-top:4px}
.meter-line{display:flex; align-items:center; gap:8px}
.mlabel{font-family:var(--mono); font-size:10px; letter-spacing:0.14em; color:var(--ash); white-space:nowrap}
.mtrack{flex:1; height:8px; border:1px solid var(--hair); background:var(--well); position:relative; overflow:hidden}
.mfill{position:absolute; inset:0; width:0%; background:var(--amber); transition:width .18s linear}
.mfill.void{background:var(--corpse)}
.hud-right{display:flex; gap:8px}
.icon-btn{width:40px; height:40px; border:1px solid var(--hair-strong); background:rgba(23,20,18,.72); color:var(--bone); font-family:var(--mono); font-size:13px; letter-spacing:0.08em; cursor:pointer}
.icon-btn:active{background:var(--plate)}

.hud-bottom{display:flex; align-items:flex-end; justify-content:space-between; gap:10px}
.vitals{display:flex; flex-direction:column; gap:7px; width:min(46vw,300px); pointer-events:none}
.vital{display:flex; align-items:center; gap:8px}
.vlabel{font-family:var(--mono); font-size:9.5px; letter-spacing:0.16em; color:var(--ash); width:56px; flex:0 0 auto}
.vtrack{flex:1; height:12px; border:1px solid var(--hair); background:var(--well); position:relative; overflow:hidden}
.vfill{position:absolute; inset:0; width:100%; transition:width .12s linear}
.vfill.hp{background:linear-gradient(90deg,#7c241b,#c2412c)}
.vfill.res{background:var(--amber)}
.vnum{font-family:var(--mono); font-size:10px; color:var(--ash); width:74px; text-align:right; font-variant-numeric:tabular-nums}
.bossbar{margin-top:2px}
.bossbar .vtrack{height:14px}
.vfill.boss{background:linear-gradient(90deg,#3f1a13,#D2492E)}
.bossbar .vnum{width:auto; color:var(--ash)}

.controls{display:flex; align-items:flex-end; gap:10px}
.joy{position:relative; width:112px; height:112px; border-radius:50%; border:1px solid var(--hair); background:radial-gradient(60% 60% at 50% 50%, rgba(32,27,23,.7), rgba(16,14,12,.35)); touch-action:none; flex:0 0 auto}
.joy-ring{position:absolute; inset:16px; border-radius:50%; border:1px dashed rgba(237,228,214,.18)}
.joy-nub{position:absolute; left:50%; top:50%; width:44px; height:44px; margin:-22px 0 0 -22px; border-radius:50%; border:1px solid var(--hair-strong); background:rgba(32,27,23,.9)}
.skill-wheel{display:flex; gap:10px; align-items:flex-end}
.skill-btn{position:relative; width:66px; height:66px; border-radius:50%; border:1px solid var(--hair-strong); background:radial-gradient(60% 60% at 50% 50%, rgba(32,27,23,.95), rgba(16,14,12,.9)); color:var(--bone); cursor:pointer; font-family:var(--mono); display:flex; flex-direction:column; align-items:center; justify-content:center; padding:0}
.skill-btn .sk{font-size:9px; letter-spacing:0.06em; text-transform:uppercase; color:var(--bone); line-height:1.15; padding:0 6px}
.skill-btn .kk{position:absolute; bottom:4px; font-size:8px; color:var(--ash-dim)}
.skill-btn .cd{position:absolute; inset:0; border-radius:50%; background:rgba(10,9,8,.72); display:none; align-items:center; justify-content:center; font-size:16px; color:var(--bone); font-variant-numeric:tabular-nums}
.skill-btn.cooling .cd{display:flex}
.skill-btn.ready{border-color:var(--amber)}
.skill-btn.dodge{width:58px; height:58px; border-color:var(--hair)}
.skill-btn:active{border-color:var(--bone)}

.banner{position:absolute; left:50%; top:6%; transform:translateX(-50%); width:min(88vw,520px); text-align:center; font-family:var(--display); font-size:clamp(16px,4.2vw,26px); letter-spacing:0.06em; text-transform:uppercase; color:var(--bone); text-shadow:0 2px 0 rgba(0,0,0,.85); pointer-events:none; opacity:0; transition:opacity .25s}
.banner.show{opacity:1}
.banner .small{display:block; font-family:var(--mono); font-size:11px; letter-spacing:0.18em; color:var(--ash); margin-top:6px; text-transform:uppercase}

/* ---------- screens ---------- */
#screens{position:absolute; inset:0; z-index:40; overflow-y:auto; -webkit-overflow-scrolling:touch}
#screens.hidden{display:none}
.screen{min-height:100%; display:flex; align-items:flex-start; justify-content:center; padding:clamp(18px,4vw,48px) clamp(14px,4vw,40px); background:
  linear-gradient(180deg, rgba(23,20,18,.86), rgba(16,14,12,.94));
  backdrop-filter:blur(2px); animation:fadein .28s ease both}
@keyframes fadein{from{opacity:0}to{opacity:1}}
.screen-inner{width:min(1120px,100%); margin:auto}
.screen-inner.narrow{width:min(620px,100%)}
.screen-inner.cover-inner{text-align:center; display:flex; flex-direction:column; align-items:center; gap:14px}
.screen-head{max-width:70ch; margin-bottom:26px}
.screen-head .idx{font-family:var(--display); font-size:26px; font-weight:600; color:var(--rubric-live); letter-spacing:0.1em; display:block; margin-bottom:2px}
.screen-head .idx.amber{color:var(--amber)} .screen-head .idx.corpse{color:var(--corpse)}
.screen-head h2{font-family:var(--display); font-size:clamp(30px,6.4vw,52px); font-weight:600; letter-spacing:0.05em; text-transform:uppercase; line-height:0.98; text-shadow:0 1px 0 rgba(0,0,0,.85)}
.dek{color:var(--ash); font-size:clamp(15px,2.3vw,18px); line-height:1.6; margin-top:12px; font-style:italic}
.blurb{color:var(--ash); max-width:60ch; line-height:1.7; font-size:clamp(15px,2.3vw,18px)}
.doc-tag{font-family:var(--mono); font-size:11px; letter-spacing:0.22em; color:var(--rubric-live); text-transform:uppercase}
.game-title{font-family:var(--display); font-size:clamp(52px,15vw,132px); font-weight:600; letter-spacing:0.05em; text-transform:uppercase; line-height:0.9; color:var(--bone); text-shadow:0 1px 0 rgba(0,0,0,.9); margin:2px 0}
.title-sub{color:var(--ash)}
.title-actions{display:flex; gap:14px; flex-wrap:wrap; justify-content:center; margin-top:8px}
.title-actions.col{flex-direction:column; align-items:stretch}
.title-foot{margin-top:18px; color:var(--ash-dim); letter-spacing:0.14em}
.screen-foot{display:flex; justify-content:space-between; gap:12px; margin-top:30px; flex-wrap:wrap}

button.primary,button.ghost,a.ghost{font-family:var(--mono); font-size:13px; letter-spacing:0.16em; text-transform:uppercase; cursor:pointer; padding:14px 26px; border:1px solid var(--hair-strong); background:var(--plate); color:var(--bone); text-decoration:none; display:inline-block; transition:background .18s,border-color .18s,color .18s}
button.primary{background:var(--rubric-live); border-color:var(--rubric-live); color:#fff}
button.primary:hover{background:#b83a24}
button.ghost:hover,a.ghost:hover{border-color:var(--bone)}
button.primary:active,button.ghost:active{transform:translateY(1px)}
button:disabled{opacity:.42; cursor:not-allowed}

/* class grid */
.class-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:14px}
.class-card{position:relative; border:1px solid var(--hair); background:var(--plate); cursor:pointer; text-align:left; padding:0; color:inherit; overflow:hidden; transition:border-color .2s, transform .2s}
.class-card:hover{border-color:var(--hair-strong)}
.class-card.selected{border-color:var(--bone); box-shadow:inset 0 0 0 1px var(--bone)}
.class-card img{width:100%; aspect-ratio:4/3; object-fit:cover; filter:grayscale(.15) contrast(1.05)}
.class-card .cc-body{padding:12px 14px 16px}
.class-card .cc-name{font-family:var(--display); font-size:24px; letter-spacing:0.05em; text-transform:uppercase; color:var(--bone)}
.class-card .cc-role{font-family:var(--mono); font-size:10px; letter-spacing:0.14em; color:var(--ink,var(--amber)); margin:2px 0 8px}
.class-card .cc-res{font-family:var(--mono); font-size:11px; letter-spacing:0.1em; color:var(--ash); line-height:1.7}
.class-card .cc-id{font-family:var(--body); font-size:14px; color:#c6bdb0; margin-top:8px; line-height:1.5}

/* hub */
.hub-top{display:flex; align-items:flex-end; justify-content:space-between; gap:20px; flex-wrap:wrap; border-bottom:1px solid var(--hair); padding-bottom:18px; margin-bottom:22px}
.hub-id h2{font-family:var(--display); font-size:clamp(28px,5.5vw,44px); text-transform:uppercase; letter-spacing:0.05em}
.coin-row{display:flex; gap:10px; flex-wrap:wrap}
.coin{border:1px solid var(--hair); background:var(--plate); padding:8px 12px; min-width:96px}
.coin .cl{font-family:var(--mono); font-size:9px; letter-spacing:0.14em; color:var(--ash)}
.coin .cv{font-family:var(--mono); font-size:18px; color:var(--bone); font-variant-numeric:tabular-nums}
.coin.amber{border-color:rgba(218,140,62,.4)} .coin.amber .cv{color:var(--amber)}
.coin.corpse{border-color:rgba(168,192,180,.35)} .coin.corpse .cv{color:var(--corpse)}

.mode-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:14px}
.mode{border:1px solid var(--hair); background:var(--plate); text-align:left; cursor:pointer; padding:18px; color:inherit; transition:border-color .2s}
.mode:hover{border-color:var(--hair-strong)}
.mode .mk{font-family:var(--mono); font-size:10px; letter-spacing:0.18em; color:var(--rubric-live)}
.mode.amber .mk{color:var(--amber)} .mode.corpse .mk{color:var(--corpse)}
.mode h3{font-family:var(--display); font-size:24px; letter-spacing:0.05em; text-transform:uppercase; margin:4px 0}
.mode p{font-family:var(--body); font-size:14.5px; color:var(--ash); line-height:1.55; margin:0}
.mode .mstat{font-family:var(--mono); font-size:10.5px; letter-spacing:0.08em; color:var(--ash-dim); margin-top:10px; display:flex; gap:14px; flex-wrap:wrap}

.hub-lower{display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:14px; margin-top:18px}
.panel{border:1px solid var(--hair); background:var(--well); padding:18px}
.panel h4{font-family:var(--display); font-size:19px; letter-spacing:0.05em; text-transform:uppercase; margin-bottom:12px}
.plabel{font-family:var(--mono); font-size:10px; letter-spacing:0.14em; color:var(--ash)}
.prow{display:flex; justify-content:space-between; gap:12px; padding:6px 0; border-bottom:1px solid var(--hair); font-family:var(--mono); font-size:11.5px; color:#c6bdb0}
.prow:last-child{border-bottom:0}
.prow .ok{color:var(--corpse)} .prow .wait{color:var(--amber)} .prow .to{color:var(--ash-dim)}

/* crest */
.crest-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:14px}
.crest-card{border:1px solid var(--hair); background:var(--plate); text-align:left; cursor:pointer; padding:18px; color:inherit; transition:border-color .2s}
.crest-card:hover{border-color:rgba(218,140,62,.5)}
.crest-card.selected{border-color:var(--amber); box-shadow:inset 0 0 0 1px var(--amber)}
.crest-card h3{font-family:var(--display); font-size:24px; text-transform:uppercase; letter-spacing:0.04em; margin-bottom:4px}
.crest-card .cg{font-family:var(--mono); font-size:11px; letter-spacing:0.1em; color:var(--amber); margin-bottom:10px}
.crest-card p{font-family:var(--body); font-size:14.5px; color:#c6bdb0; line-height:1.55; margin:0 0 10px}
.chip{display:inline-block; font-family:var(--mono); font-size:9.5px; letter-spacing:0.1em; text-transform:uppercase; color:var(--amber); border:1px solid rgba(218,140,62,.45); padding:3px 7px; margin:0 6px 6px 0}
.chip.bone{color:var(--bone); border-color:var(--hair-strong)}
.chip.corpse{color:var(--corpse); border-color:rgba(168,192,180,.4)}
.chip.off{color:var(--ash-dim); border-color:var(--hair)}

/* generic tables */
.gtable{width:100%; border-collapse:collapse; font-family:var(--mono); font-size:11.5px; margin-top:10px}
.gtable caption{font-family:var(--mono); font-size:10px; letter-spacing:0.14em; text-transform:uppercase; color:var(--ash); text-align:left; padding-bottom:8px}
.gtable th{font-family:var(--mono); font-size:10px; letter-spacing:0.1em; text-transform:uppercase; color:var(--ash); text-align:right; border-bottom:1px solid var(--hair-strong); padding:7px 8px; white-space:nowrap}
.gtable th:first-child{text-align:left}
.gtable td{padding:7px 8px; border-bottom:1px solid var(--hair); color:#c6bdb0; text-align:right; white-space:nowrap}
.gtable td:first-child{text-align:left; color:var(--bone)}
.gtable tr.amber td:first-child,.gtable td.amber{color:var(--amber)}
.gtable td.tbc{color:var(--amber); font-style:italic}
.tbl-scroll{overflow-x:auto; -webkit-overflow-scrolling:touch; border:1px solid var(--hair); background:var(--well); padding:14px}
.tbl-scroll .gtable{margin-top:0}

/* gems */
.gem-top{display:flex; gap:12px; flex-wrap:wrap; margin-bottom:20px}
.gem-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:12px; margin-bottom:22px}
.gem{border:1px solid var(--hair); background:var(--plate); padding:12px}
.gem .gt{font-family:var(--display); font-size:20px; text-transform:uppercase; letter-spacing:0.04em}
.gem .gs{font-family:var(--mono); font-size:10px; letter-spacing:0.12em; color:var(--ash); margin-top:2px}
.gem.star5{border-color:rgba(218,140,62,.5)} .gem.star5 .gt{color:var(--amber)}
.gem.star2{border-color:var(--hair-strong)}
.gem .gact{display:flex; gap:6px; margin-top:10px; flex-wrap:wrap}
.mini{font-family:var(--mono); font-size:10px; letter-spacing:0.08em; text-transform:uppercase; border:1px solid var(--hair-strong); background:transparent; color:var(--bone); padding:6px 9px; cursor:pointer}
.mini:hover{border-color:var(--bone)}
.mini.amber{border-color:rgba(218,140,62,.5); color:var(--amber)}
.mini:disabled{opacity:.4; cursor:not-allowed}
.sect-title{font-family:var(--display); font-size:22px; text-transform:uppercase; letter-spacing:0.05em; margin:26px 0 6px}
.note{border-left:2px solid var(--hair-strong); padding:10px 0 10px 14px; margin:14px 0; font-family:var(--body); font-size:14.5px; color:#c6bdb0; line-height:1.6}
.note.amber{border-color:var(--amber)}
.note.flag{border-color:var(--rubric-live)}

/* result */
.result-inner{width:min(720px,100%); margin:auto; border:1px solid var(--hair-strong); background:var(--plate); padding:clamp(20px,4vw,40px)}
.result-inner h2{font-family:var(--display); font-size:clamp(30px,7vw,54px); text-transform:uppercase; letter-spacing:0.05em; line-height:1}
.result-inner .rsub{font-family:var(--mono); font-size:11px; letter-spacing:0.16em; color:var(--ash); margin-top:8px}
.reward-list{margin:20px 0}
.reward-list .prow{font-size:12.5px; padding:8px 0}
.reward-list .prow .v{color:var(--bone)}
.gem-drop{border:1px solid rgba(218,140,62,.45); background:rgba(218,140,62,.06); padding:12px 14px; margin-top:10px; font-family:var(--mono); font-size:11.5px; color:#c6bdb0; letter-spacing:0.04em}
.gem-drop .big{font-family:var(--display); font-size:22px; color:var(--amber); letter-spacing:0.05em; text-transform:uppercase; display:block; margin-bottom:4px}
.reward-actions{display:flex; gap:12px; flex-wrap:wrap; margin-top:22px}
.void-select label{display:block; font-family:var(--mono); font-size:11px; letter-spacing:0.14em; color:var(--ash); text-transform:uppercase; margin-bottom:8px}
.void-select input[type=range]{width:100%; accent-color:var(--corpse); margin:6px 0 2px}
.void-depth{font-family:var(--display); font-size:44px; color:var(--corpse); letter-spacing:0.05em}
.void-scale{display:flex; gap:12px; flex-wrap:wrap; margin-top:16px}
.help-table{display:grid; grid-template-columns:1fr auto; gap:0; border:1px solid var(--hair); background:var(--well); margin:20px 0}
.help-table .hk,.help-table .hv{padding:10px 14px; border-bottom:1px solid var(--hair); font-family:var(--mono); font-size:11.5px}
.help-table .hk{color:var(--bone)} .help-table .hv{color:var(--ash); text-align:right; letter-spacing:0.08em}
.help-table .last{border-bottom:0}

/* toast */
#toast{position:fixed; left:50%; bottom:max(120px,18vh); transform:translateX(-50%); z-index:60; background:rgba(23,20,18,.95); border:1px solid var(--hair-strong); color:var(--bone); font-family:var(--mono); font-size:11.5px; letter-spacing:0.06em; padding:10px 16px; opacity:0; transition:opacity .2s; pointer-events:none; max-width:86vw; text-align:center}
#toast.show{opacity:1}

@media (max-width:720px){
  .hud-bottom{flex-direction:column; align-items:stretch; gap:10px}
  .vitals{width:100%; max-width:none}
  .controls{justify-content:space-between}
  .vnum{display:none}
  #hud-sub{display:none}
}
@media (max-width:640px){
  .joy{width:100px; height:100px}
  .skill-btn{width:60px; height:60px}
  .skill-btn.dodge{width:54px; height:54px}
  .hud-mid .mlabel{display:none}
}
@media (orientation:landscape) and (max-height:520px){
  .screen{padding-top:12px; padding-bottom:12px}
  .screen-head h2{font-size:clamp(24px,5vh,38px)}
  .joy{width:92px;height:92px}
  .hud-bottom{flex-direction:row; align-items:flex-end}
  .vitals{width:min(40vw,300px)}
}