:root{
  --iron:#1a1410; --iron2:#241c14; --iron3:#2e2418;
  --brass:#c8862f; --brass2:#e0a84e; --copper:#b87333;
  --amber:#ffb84d; --rust:#a23b2b; --verd:#4a7a6a;
  --ink:#f0dcb8;
}
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent;}
html,body{margin:0;height:100%;}
body{
  background:radial-gradient(circle at 50% 0%, #2a2016 0%, #1a1410 60%, #0d0a06 100%);
  background-attachment:fixed;
  color:var(--ink);
  font-family:'Special Elite','Courier New',monospace;
  overflow-x:hidden;
}
.sf-root{min-height:100vh; position:relative; display:flex; flex-direction:column;}
.steam-bg{position:fixed;inset:0;pointer-events:none;z-index:0;
  background:
    radial-gradient(circle at 20% 80%, rgba(255,184,77,.06), transparent 40%),
    radial-gradient(circle at 80% 20%, rgba(184,115,51,.08), transparent 45%);
  animation:steamdrift 12s ease-in-out infinite alternate;
}
@keyframes steamdrift{from{opacity:.6;}to{opacity:1;transform:translateY(-10px);}}

h1,h2,.sf-logo,.panel-title,.card-name,.dial-label{font-family:'Cinzel',serif;}

/* ---- buttons ---- */
.brass-btn{
  font-family:'Cinzel',serif; font-weight:700; letter-spacing:.5px;
  background:linear-gradient(180deg,var(--brass2),var(--copper));
  color:#241206; border:3px double #5a3a12; border-radius:8px;
  padding:10px 18px; cursor:pointer; font-size:15px;
  box-shadow:0 3px 0 #4a2c0e, 0 0 12px rgba(255,184,77,.2), inset 0 1px 2px rgba(255,255,255,.4);
  transition:transform .08s, box-shadow .15s; position:relative;
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
}
.brass-btn:hover:not(:disabled){transform:translateY(-2px); box-shadow:0 5px 0 #4a2c0e, 0 0 20px rgba(255,184,77,.45), inset 0 1px 2px rgba(255,255,255,.4);}
.brass-btn:active:not(:disabled){transform:translateY(1px); box-shadow:0 1px 0 #4a2c0e;}
.brass-btn:disabled{opacity:.4; cursor:not-allowed; filter:grayscale(.5);}
.brass-btn.big{font-size:19px;padding:14px 26px;}
.brass-btn.sm{padding:6px 10px;font-size:13px;}
.brass-btn.danger{background:linear-gradient(180deg,#c8523b,#8a2c1e);color:#fff;}

/* ---- screens ---- */
.screen-center{position:relative;z-index:1;flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px 16px;text-align:center;gap:14px;min-height:100vh;}

/* ---- menu ---- */
.menu .gear-spin{font-size:64px;animation:spin 8s linear infinite;filter:drop-shadow(0 0 12px var(--amber));}
@keyframes spin{to{transform:rotate(360deg);}}
.sf-logo{font-size:clamp(38px,9vw,72px);font-weight:900;letter-spacing:4px;margin:0;
  background:linear-gradient(180deg,#ffe0a0,var(--brass) 60%,#7a4a12);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  text-shadow:0 0 24px rgba(255,184,77,.3);filter:drop-shadow(2px 3px 0 #3a2408);}
.sf-tag{color:var(--copper);font-style:italic;margin:0 0 8px;}
.menu-btns{display:flex;flex-direction:column;gap:12px;width:min(340px,90vw);}
.best-box{margin-top:14px;display:flex;gap:20px;flex-wrap:wrap;justify-content:center;color:var(--brass2);font-size:14px;border-top:2px dotted #5a3a12;padding-top:12px;}

/* ---- topbar ---- */
.topbar{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;
  background:linear-gradient(180deg,var(--iron3),var(--iron));border-bottom:4px double var(--brass);padding:8px 12px;
  box-shadow:0 4px 14px rgba(0,0,0,.6);}
.tb-left{display:flex;align-items:center;gap:14px;flex-wrap:wrap;}
.tb-gold{color:var(--brass2);font-weight:bold;}
.tb-floor{color:var(--copper);font-size:14px;}
.tb-relics{display:flex;gap:5px;flex-wrap:wrap;flex:1;justify-content:center;}
.tb-right{display:flex;gap:6px;}
.relic-chip{font-size:20px;width:34px;height:34px;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(circle,#3a2c18,#241c14);border:2px solid var(--brass);border-radius:50%;
  box-shadow:0 0 8px rgba(255,184,77,.3);cursor:help;}
.relic-chip.sm{width:28px;height:28px;font-size:16px;}

/* ---- gauge ---- */
.gauge{min-width:120px;}
.gauge-label{font-size:11px;color:var(--copper);letter-spacing:1px;min-height:14px;}
.gauge-bar{position:relative;height:18px;background:#0d0a06;border:2px solid #5a3a12;border-radius:4px;overflow:hidden;}
.gauge-fill{height:100%;transition:width .35s;box-shadow:0 0 8px currentColor;}
.gauge-text{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:12px;color:#fff;text-shadow:0 1px 2px #000;}

/* ---- map ---- */
.map-wrap{flex:1;display:flex;flex-direction:column;position:relative;z-index:1;min-height:100vh;height:100vh;}
.map-scroll{flex:1;overflow-y:auto;padding:20px 0;-webkit-overflow-scrolling:touch;}
.map-inner{display:flex;flex-direction:column;gap:26px;align-items:center;padding:20px 10px 40px;}
.map-row{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;position:relative;}
.map-node{width:82px;height:82px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  background:radial-gradient(circle,#2e2418,#1a1410);border:3px solid;border-radius:12px;cursor:default;
  font-family:'Cinzel',serif;transition:transform .15s,box-shadow .2s;opacity:.4;padding:0;}
.map-node .node-e{font-size:26px;}
.map-node .node-lbl{font-size:10px;letter-spacing:.5px;}
.map-node.selectable{opacity:1;cursor:pointer;animation:nodepulse 1.6s ease-in-out infinite;}
@keyframes nodepulse{0%,100%{box-shadow:0 0 6px currentColor;}50%{box-shadow:0 0 20px currentColor,0 0 30px currentColor;}}
.map-node.selectable:hover{transform:scale(1.1);}
.map-node.done{opacity:.65;filter:grayscale(.7);}
.map-node.current{opacity:1;box-shadow:0 0 22px var(--amber);border-color:var(--amber)!important;}
.map-hint{text-align:center;padding:10px;color:var(--brass2);background:var(--iron);border-top:2px solid var(--brass);z-index:2;}

/* ---- combat ---- */
.combat-wrap{flex:1;display:flex;flex-direction:column;position:relative;z-index:1;min-height:100vh;padding-bottom:8px;}
.combat-top{display:flex;justify-content:space-between;padding:8px 12px;}
.c-relics{display:flex;gap:5px;flex-wrap:wrap;}
.enemy-area{flex:1;display:flex;justify-content:center;align-items:flex-start;gap:28px;flex-wrap:wrap;padding:12px;min-height:180px;}
.enemy{display:flex;flex-direction:column;align-items:center;gap:4px;position:relative;padding:10px;border-radius:12px;transition:transform .12s;min-width:130px;}
.enemy.targetable{cursor:crosshair;box-shadow:0 0 0 3px rgba(255,60,40,.5),0 0 20px rgba(255,60,40,.4);background:rgba(200,50,40,.08);}
.enemy.targetable:hover{transform:scale(1.06);}
.enemy-sprite{font-size:52px;filter:drop-shadow(0 4px 6px rgba(0,0,0,.5));animation:bob 3s ease-in-out infinite;}
@keyframes bob{0%,100%{transform:translateY(0);}50%{transform:translateY(-6px);}}
.enemy-name{font-size:12px;color:var(--brass2);letter-spacing:.5px;}
.intent{position:absolute;top:-8px;background:var(--iron3);border:2px solid var(--brass);border-radius:8px;padding:2px 8px;font-size:14px;font-weight:bold;z-index:3;box-shadow:0 0 8px rgba(0,0,0,.6);}
.intent.atk{color:#ff8a5a;border-color:var(--rust);}
.intent.def{color:#6aa;}
.intent.buff{color:var(--verd);}
.intent.debuff{color:#c88;}
.status-chips{display:flex;gap:4px;flex-wrap:wrap;justify-content:center;}
.chip{font-size:11px;padding:1px 6px;border-radius:10px;background:#241c14;border:1px solid var(--brass);}
.chip.rust{color:#9a7;} .chip.str{color:#e88;} .chip.vent{color:#7bd;} .chip.overheat{color:#f96;} .chip.power{color:var(--amber);}

.target-banner{text-align:center;background:rgba(200,50,40,.25);border:2px solid var(--rust);
  padding:8px 12px;margin:0 12px;border-radius:8px;display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;color:#ffb;z-index:3;position:relative;}

/* ---- player area ---- */
.player-area{position:relative;z-index:1;background:linear-gradient(180deg,transparent,rgba(46,36,24,.7));border-top:2px solid #5a3a12;padding:10px 12px;}
.player-info{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;}
.player-sprite{font-size:48px;position:relative;filter:drop-shadow(0 4px 6px rgba(0,0,0,.5));}
.player-stats{flex:1;min-width:160px;display:flex;flex-direction:column;gap:6px;}
.pstat-row{display:flex;gap:6px;flex-wrap:wrap;}
.steam-dial{display:flex;flex-direction:column;align-items:center;gap:4px;}
.dial-ring{width:70px;height:70px;border-radius:50%;border:4px double var(--amber);
  background:radial-gradient(circle,#3a2808,#1a1006);display:flex;align-items:baseline;justify-content:center;
  box-shadow:0 0 16px rgba(255,184,77,.4),inset 0 0 12px rgba(0,0,0,.6);}
.dial-val{font-family:'Cinzel',serif;font-size:32px;font-weight:900;color:var(--amber);text-shadow:0 0 8px var(--amber);}
.dial-max{font-size:14px;color:var(--copper);}
.dial-label{font-size:10px;letter-spacing:2px;color:var(--amber);}

/* ---- hand ---- */
.hand-bar{display:flex;align-items:flex-end;justify-content:center;gap:8px;padding:8px 6px 4px;position:relative;z-index:1;}
.pile{display:flex;flex-direction:column;align-items:center;font-size:13px;color:var(--brass2);
  background:#241c14;border:2px solid var(--brass);border-radius:8px;padding:6px 8px;min-width:52px;text-align:center;}
.pile span{font-size:9px;color:var(--copper);}
.hand{display:flex;justify-content:center;gap:6px;flex-wrap:wrap;flex:1;max-width:720px;}
.hand-slot{transition:transform .15s;}
.hand-slot.lifted{transform:translateY(-16px);}

/* ---- cards ---- */
.card{width:110px;height:158px;border-radius:12px;padding:8px 6px;position:relative;cursor:pointer;
  border:3px double #5a3a12;display:flex;flex-direction:column;align-items:center;gap:3px;
  background:linear-gradient(160deg,#3a2c18,#241c14);box-shadow:0 3px 8px rgba(0,0,0,.5);
  transition:transform .12s,box-shadow .15s;overflow:hidden;}
.card.small{width:96px;height:138px;}
.card.gear{border-color:#8a3428;background:linear-gradient(160deg,#3a2018,#241010);}
.card.piston{border-color:#2a6a8a;background:linear-gradient(160deg,#182838,#101a24);}
.card.boiler{border-color:#7a4a9a;background:linear-gradient(160deg,#2a1838,#1a1024);}
.card.playable:hover{transform:translateY(-10px) scale(1.05);box-shadow:0 8px 20px rgba(0,0,0,.6),0 0 16px rgba(255,184,77,.4);z-index:5;}
.card.unplayable{opacity:.55;filter:grayscale(.4);cursor:not-allowed;}
.card-cost{position:absolute;top:4px;left:4px;width:26px;height:26px;border-radius:50%;
  background:radial-gradient(circle,var(--amber),#8a5a12);color:#241206;font-weight:900;font-family:'Cinzel',serif;
  display:flex;align-items:center;justify-content:center;font-size:15px;border:2px solid #5a3a12;box-shadow:0 0 6px rgba(255,184,77,.5);z-index:2;}
.card-type{font-size:24px;margin-top:2px;}
.card-name{font-size:12px;font-weight:700;line-height:1.1;color:#ffe0a0;text-align:center;padding:0 2px;}
.card-desc{font-size:10px;line-height:1.25;color:var(--ink);text-align:center;flex:1;padding:0 2px;overflow:hidden;}
.card.small .card-name{font-size:11px;}
.card.small .card-desc{font-size:9px;}
.card-rarity{position:absolute;bottom:4px;left:50%;transform:translateX(-50%);width:24px;height:4px;border-radius:2px;}
.card-rarity.r-common{background:#7a6a5a;}
.card-rarity.r-uncommon{background:var(--verd);box-shadow:0 0 6px var(--verd);}
.card-rarity.r-rare{background:var(--amber);box-shadow:0 0 8px var(--amber);}

/* ---- floaters ---- */
.floaters{position:absolute;top:0;left:50%;transform:translateX(-50%);pointer-events:none;z-index:10;}
.floater{font-family:'Cinzel',serif;font-weight:900;font-size:26px;animation:floatup .7s ease-out forwards;text-shadow:0 2px 4px #000;}
.floater.dmg{color:#ff6a4a;} .floater.heal{color:#7ad88a;} .floater.block{color:#7bd;}
@keyframes floatup{from{opacity:1;transform:translateY(0);}to{opacity:0;transform:translateY(-40px);}}

/* ---- end turn ---- */
.end-turn{align-self:center;margin:6px auto 10px;}

/* ---- reward ---- */
.panel-title{font-size:26px;color:var(--amber);text-shadow:0 0 14px rgba(255,184,77,.4);margin:0;letter-spacing:2px;}
.reward-gold{color:var(--brass2);font-size:20px;font-weight:bold;}
.reward-relic{color:var(--verd);font-size:15px;}
.reward-sub{color:var(--copper);}
.reward-cards{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;}
.reward-pick{cursor:pointer;transition:transform .12s;border-radius:12px;}
.reward-pick:hover{transform:translateY(-8px) scale(1.05);}

/* ---- rest ---- */
.fire-glow{font-size:70px;animation:flicker 1.5s ease-in-out infinite;filter:drop-shadow(0 0 18px #ff8a2a);}
@keyframes flicker{0%,100%{transform:scale(1);opacity:1;}50%{transform:scale(1.08);opacity:.85;}}
.rest-opts{display:flex;gap:18px;flex-wrap:wrap;justify-content:center;}
.rest-opt{flex-direction:column;gap:4px;min-width:180px;padding:18px;}
.rest-opt .opt-e{font-size:34px;}
.rest-opt small{font-weight:400;font-size:12px;color:#3a2408;font-family:'Special Elite',monospace;}

/* ---- shop ---- */
.shop-gold{color:var(--brass2);font-size:20px;font-weight:bold;}
.shop-cards{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;max-width:640px;}
.shop-item{position:relative;cursor:pointer;transition:transform .12s;padding-bottom:10px;}
.shop-item:hover:not(.cant){transform:translateY(-6px);}
.shop-item.cant{opacity:.5;cursor:not-allowed;}
.price-tag{margin-top:4px;background:var(--iron3);border:2px solid var(--brass);border-radius:6px;padding:2px 8px;font-size:13px;color:var(--brass2);text-align:center;}
.shop-extras{display:flex;gap:16px;flex-wrap:wrap;justify-content:center;align-items:center;margin-top:8px;}
.relic-item{display:flex;flex-direction:column;align-items:center;gap:4px;background:linear-gradient(160deg,#3a2c18,#241c14);border:3px double var(--brass);border-radius:12px;padding:12px;width:200px;}
.relic-big{font-size:38px;}
.relic-name{font-family:'Cinzel',serif;color:var(--amber);font-size:14px;}
.relic-desc{font-size:11px;color:var(--ink);}

/* ---- event ---- */
.event-icon{font-size:60px;filter:drop-shadow(0 0 14px var(--verd));}
.event-text{max-width:520px;color:var(--ink);line-height:1.5;font-size:15px;}
.event-choices{display:flex;flex-direction:column;gap:12px;width:min(420px,92vw);}
.event-btn{text-align:center;font-size:14px;padding:14px;}

/* ---- deck viewer & modals ---- */
.modal-overlay{position:fixed;inset:0;background:rgba(10,8,4,.85);z-index:50;display:flex;align-items:center;justify-content:center;padding:16px;}
.modal{background:linear-gradient(180deg,var(--iron3),var(--iron));border:4px double var(--brass);border-radius:14px;
  max-width:820px;width:100%;max-height:86vh;display:flex;flex-direction:column;box-shadow:0 0 40px rgba(0,0,0,.8),0 0 30px rgba(255,184,77,.15);}
.modal-head{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:2px solid var(--brass);}
.deck-grid{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;padding:16px;}
.deck-grid.scroll{overflow-y:auto;max-height:70vh;-webkit-overflow-scrolling:touch;}
.help{max-width:560px;}
.help-body{padding:16px;overflow-y:auto;line-height:1.5;font-size:14px;}
.help-body p{margin:0 0 12px;}
.help-body b{color:var(--amber);}

/* ---- end screen ---- */
.end-icon{font-size:80px;filter:drop-shadow(0 0 20px var(--amber));animation:endpop .6s ease-out;}
@keyframes endpop{from{transform:scale(0);}to{transform:scale(1);}}
.end.win .sf-logo{background:linear-gradient(180deg,#fff0c0,var(--amber) 60%,#c8862f);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;}
.end.lose .sf-logo{background:linear-gradient(180deg,#e0a0a0,var(--rust) 60%,#5a1a12);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;}
.end-sub{color:var(--copper);font-style:italic;max-width:440px;}
.end-stats{background:rgba(46,36,24,.6);border:2px solid var(--brass);border-radius:10px;padding:16px 24px;display:flex;flex-direction:column;gap:6px;color:var(--ink);}
.end-stats b{color:var(--brass2);}

/* ---- toast & footer ---- */
.sf-toast{position:fixed;top:16px;left:50%;transform:translateX(-50%);z-index:100;
  background:linear-gradient(180deg,var(--brass2),var(--copper));color:#241206;font-family:'Cinzel',serif;font-weight:700;
  padding:8px 20px;border-radius:20px;border:2px solid #5a3a12;box-shadow:0 4px 16px rgba(0,0,0,.5);animation:toastin .3s ease-out;}
@keyframes toastin{from{opacity:0;transform:translate(-50%,-14px);}to{opacity:1;transform:translate(-50%,0);}}
.sf-footer{position:relative;z-index:1;text-align:center;padding:10px;font-size:12px;}
.sf-footer a{color:var(--copper);text-decoration:none;border-bottom:1px dotted var(--copper);}
.sf-footer a:hover{color:var(--amber);border-color:var(--amber);}

/* ---- mobile ---- */
@media (max-width:640px){
  .card{width:88px;height:130px;padding:6px 4px;}
  .card.small{width:82px;height:120px;}
  .card-name{font-size:10px;}
  .card-desc{font-size:9px;}
  .card-type{font-size:20px;}
  .card-cost{width:22px;height:22px;font-size:13px;}
  .hand{gap:4px;}
  .hand-bar{gap:5px;padding:6px 2px;}
  .pile{min-width:44px;padding:4px 5px;font-size:11px;}
  .enemy-area{gap:12px;padding:8px;min-height:150px;}
  .enemy{min-width:110px;padding:6px;}
  .enemy-sprite{font-size:44px;}
  .steam-dial .dial-ring{width:58px;height:58px;}
  .dial-val{font-size:26px;}
  .map-node{width:70px;height:70px;}
  .map-node .node-e{font-size:22px;}
  .rest-opt{min-width:140px;padding:14px;}
  .relic-item{width:170px;}
  .panel-title{font-size:22px;}
  .player-info{gap:8px;}
  .player-stats{min-width:120px;}
  .player-sprite{font-size:40px;}
  .gauge{min-width:100px;}
}
@media (max-width:380px){
  .card{width:76px;height:118px;}
  .hand{gap:3px;}
  .map-node{width:62px;height:62px;}
}