/* SHARD MACHINE ART / UI SYSTEM v0.5
   Blacksmith sunset × soft-edged retro-fantasy. Creative UI geometry, not any
   third-party game's textures or logos. Future content must reuse these tokens.
   Gameplay controls remain real HTML nodes over decorative pixel artwork. */
:root{
 --night:#110f21;--ink:#141b2d;--ink-2:#20243a;--ink-3:#30293e;
 --stroke:#65475a;--stroke-hot:#d29c63;--gold:#ffd88d;--gold-2:#f2a75a;
 --cream:#fff0d1;--text:#f4e5d3;--muted:#ccc0cf;--violet:#cf94fa;
 --jade:#93f2d4;--red:#f48d8e;
 --radius:12px;--border:3px solid #ab7551;
 --panel-gradient:linear-gradient(148deg,rgba(29,31,53,.98),rgba(14,19,38,.98));
 --pixel-shadow:0 0 0 2px #0b0c20,0 0 0 4px #714f49,5px 7px 0 #090c1d80;
 --ink-outline:2px 2px #221524;
}
body{font-family:'Pretendard','Apple SD Gothic Neo','Malgun Gothic',system-ui,sans-serif;letter-spacing:-.15px}
.world-shade{background:linear-gradient(95deg,rgba(8,10,29,.80),rgba(13,14,36,.58),rgba(21,13,43,.55))}
.pixel-panel{border-radius:13px;border-width:3px;overflow:visible}
.pixel-panel::before{border-radius:8px;inset:5px;border:2px solid #66536a77}
.scene-header{border-width:3px;border-radius:13px 13px 25px 13px;box-shadow:inset 0 0 0 2px #2a2036,4px 5px #0f0d1f}
.section,.panel-subtitle,.side-title,.auth-logo,.brand-text,.panel-ribbon{font-family:'Pretendard','Apple SD Gothic Neo','Malgun Gothic',sans-serif;letter-spacing:-.75px;font-weight:950}
.section{font-size:clamp(22px,3vw,30px);line-height:1.12;text-shadow:3px 3px #4d243e,0 2px 0 #181323}
.panel-subtitle{font-size:20px;letter-spacing:-.7px;border-bottom:3px solid #a67c60;background:linear-gradient(90deg,#56304340,transparent);padding:7px 10px 10px;margin-top:18px;border-radius:11px 0 0 0}
.btn{border-width:3px;border-radius:11px 11px 14px 10px;box-shadow:inset 0 2px #ffffff23,0 4px #0a0d1dbb;letter-spacing:-.3px;font-size:14px;font-weight:900;text-shadow:none;min-height:45px;transition:filter .13s, transform .09s}
.btn:hover{filter:saturate(1.12) brightness(1.09)}
.btn-gold{background:linear-gradient(170deg,#ffce77,#c47539);color:#28182a;border-color:#ffdb95;border-bottom-color:#814326}
.btn-purple{background:linear-gradient(160deg,#985ac1,#512e8a);border-color:#cca0fa}
.btn-primary{background:linear-gradient(160deg,#34aeb0,#086265);border-color:#83ecd2}
.btn-danger{background:linear-gradient(160deg,#ae435e,#6e2a4f);border-color:#ef8a90}
.auth-box{border-radius:20px 20px 16px 16px}
.auth-switch button{border-width:2px;border-radius:12px 12px 6px 6px}
.auth-seal{border-color:#f6ca85}.auth-logo{letter-spacing:-2.3px;text-shadow:3px 3px #5e2248,5px 6px #1c132a,0 0 20px #a74e72aa}
input,select{border-radius:9px;border-width:2px;min-height:47px}
.nav button{border-radius:10px 14px 12px 10px;border-width:2px;font-weight:900}
.nav button.active{border-width:3px}
.resource-chip{border-radius:10px;border-width:2px;font-family:inherit}
.stat-pill,.stat-tile{border:2px solid #73536b;border-radius:10px;background:linear-gradient(140deg,#302641,#1c2238)}
.dungeon-card{border-width:3px;border-radius:13px;box-shadow:3px 5px #0b0b1d}
.dungeon-card__title{font-family:inherit;font-size:18px}
.dungeon-card__image img,.scene-header__art,.hero-portrait img,.auth-showcase img {image-rendering:pixelated;filter:drop-shadow(2px 3px #110f25)}
.running-card,.active-dungeon-card{border-radius:13px;border-width:2px}
.item-card,.listitem,.empty-state,.progress-card{border-radius:11px;border-width:2px}
.item-card__title,.price{font-family:inherit}
.panel-ribbon{border-radius:12px 12px 7px 7px}
.toast{border-radius:12px;border-width:3px}
.bottom-nav{border-radius:14px}.bottom-nav button{border-radius:10px;font-weight:900}
@media(max-width:570px){.scene-header{border-radius:12px 12px 20px 12px}.bottom-nav{border-radius:13px}.btn{font-size:12px}.section{font-size:23px}.dungeon-card__title{font-size:16px}}
/* Direct combat component, portrait first */
.battle-board{background:linear-gradient(#221d33,#12182d);border:3px solid #b18b68;border-radius:15px;padding:12px;box-shadow:4px 5px #0a0e1c;overflow:hidden}
.battle-banner{display:flex;justify-content:space-between;gap:8px;color:#ffe0a5;font-size:13px;font-weight:950;margin:1px 1px 11px}
.battle-stage{position:relative;isolation:isolate;display:flex;align-items:flex-end;justify-content:space-around;gap:1px;min-height:290px;padding:18px 5px 15px;border:3px solid #a17a64;border-radius:12px 12px 26px 12px;overflow:hidden;background:#1d2340 url('/static/assets/pvp_arena.png') center / cover no-repeat}
.battle-stage::after{content:"";position:absolute;inset:auto 0 0;height:37%;z-index:-1;background:linear-gradient(transparent,#11172bcd)}
.battle-unit{width:45%;display:flex;flex-direction:column;align-items:center;min-width:0;text-align:center;gap:3px}
.battle-name{color:#ffe1ae;font-size:11px;font-weight:900;white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis;text-shadow:2px 2px #17122d}
.battle-unit small{font-size:11px;color:#f7e9d9;font-weight:900;text-shadow:1px 1px #140e27}
.combat-character{height:148px;max-width:100%;width:auto;object-fit:contain;image-rendering:pixelated;filter:drop-shadow(4px 6px 0px #11112388)}
.enemy-art{animation:enemy-bob 1.7s ease-in-out infinite alternate}
@keyframes enemy-bob{to{transform:translateY(-5px)}}
.versus{color:#ffd086;font-size:31px;text-shadow:3px 3px #351b3a;position:absolute;left:50%;top:46%;transform:translate(-50%,-50%);z-index:2}
.battle-meter{height:12px;width:100%;max-width:230px;background:#171427;border:2px solid #d2a979;border-radius:9px;overflow:hidden;box-shadow:inset 0 1px 4px #0007}
.battle-meter>div{height:100%;transition:width .2s ease}
.battle-meter.hero>div{background:linear-gradient(90deg,#4fbca0,#83e6b3)}
.battle-meter.enemy>div{background:linear-gradient(90deg,#bd3556,#ff836c)}
.battle-bottom{padding:10px 2px}
.combat-status{font-size:12px;color:#ffe3a4;font-weight:900;margin:5px 0 8px}
.battle-log{background:#11182c;border:2px solid #665773;border-radius:10px;min-height:125px;max-height:170px;overflow-y:auto;padding:9px 12px;display:flex;flex-direction:column;gap:4px;color:#d9cde0;font-size:12px}
.battle-log>div:first-child{color:#ffce83;font-weight:800}
.combat-actions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.combat-actions>.btn{font-size:13px;min-width:0;padding:8px 4px}
.combat-landing{border:3px solid #ad8269;border-radius:14px;min-height:330px;padding:20px;text-align:center;background:linear-gradient(170deg,#2c1d3c,#151d32);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px}
.combat-landing img{height:160px;image-rendering:pixelated}.combat-landing h3{margin:0;color:#ffe2b7;font-size:19px}.combat-landing p{color:#d1c8d9;font-size:13px;max-width:480px}.combat-landing .btn{min-width:180px}
.combat-fineprint{font-size:11px;line-height:1.6;color:#aea3bd;background:#1a1b30;border-radius:9px;padding:12px;margin:12px 0 0}
@media(max-width:570px){.battle-board{padding:8px}.battle-stage{min-height:240px;padding:10px 1px}.combat-character{height:122px}.battle-unit{width:44%}.battle-name{font-size:10px}.battle-unit small{font-size:10px}.combat-actions{gap:5px}.combat-actions>.btn{min-height:43px;font-size:11px}}
@media(max-width:360px){.combat-character{height:102px}.battle-stage{min-height:210px}.battle-banner{font-size:11px}}
@media(prefers-reduced-motion:reduce){.enemy-art{animation:none}}
@media(max-width:810px){
  .combat-actions{position:sticky;bottom:calc(80px + env(safe-area-inset-bottom));z-index:7;background:#191c32f0;border:2px solid #78566e;border-radius:12px;padding:6px;box-shadow:0 4px 15px #07081788}
}