:root{--bg:#17141a;--panel:#26202a;--panel2:#332936;--line:#6f5361;--cream:#e8d9b5;--gold:#e3ad46;--green:#6fa65b;--red:#c65252;--blue:#557fa6;--purple:#8b62a5;--muted:#a9948e;--ink:#f5ead0}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:radial-gradient(circle at 40% 0,#352532 0,#19151b 45%,#100e12 100%);color:var(--ink);font-family:"Courier New",monospace;image-rendering:pixelated}button,input{font:inherit}.hidden{display:none!important}
body:before{content:"";position:fixed;inset:0;pointer-events:none;opacity:.07;background-image:linear-gradient(#fff 1px,transparent 1px),linear-gradient(90deg,#fff 1px,transparent 1px);background-size:4px 4px;z-index:999}
.auth-screen{min-height:100vh;display:grid;place-items:center;padding:20px}.pixel-panel{background:var(--panel);border:4px solid #120f14;box-shadow:0 0 0 3px var(--line),8px 8px 0 #0e0c10;padding:20px}.auth-card{width:min(460px,94vw);text-align:center}.logo{font-size:34px;font-weight:900;color:var(--gold);letter-spacing:.08em;text-shadow:3px 3px 0 #5d351b}.subtitle{color:var(--muted);margin:12px 0 22px;line-height:1.5}.auth-tabs{display:flex;gap:8px;margin-bottom:12px}.auth-tabs button,.nav button{flex:1;background:#1a171d;color:var(--cream);border:3px solid #100e12;box-shadow:0 0 0 2px #57424f;padding:10px;cursor:pointer}.auth-tabs button.active,.nav button.active{background:#5a3e4e;color:white;box-shadow:0 0 0 2px #9a6d78}.auth-form{display:none;gap:10px}.auth-form.active{display:grid}.auth-form input{background:#151218;border:3px solid #4f3b45;color:white;padding:12px;outline:none}.pixel-btn{background:#4c3b47;color:#fff;border:3px solid #110e12;box-shadow:0 0 0 2px #806170;padding:10px 13px;cursor:pointer;text-transform:uppercase;font-weight:800}.pixel-btn:hover{filter:brightness(1.18)}.pixel-btn:active{transform:translate(2px,2px);box-shadow:none}.pixel-btn.gold{background:#9a6b29;box-shadow:0 0 0 2px #d6a448;color:#fff3cf}.pixel-btn.small{padding:6px 9px;font-size:12px}.pixel-btn.wide{width:100%;margin-top:14px}.msg{min-height:20px;color:#e69175;margin-top:10px;font-size:13px}
.topbar{height:62px;display:flex;align-items:center;justify-content:space-between;padding:0 18px;background:#151219;border-bottom:4px solid #0a090b;box-shadow:0 3px 0 #5a4250;position:sticky;top:0;z-index:20}.brand{font-size:20px;font-weight:900;color:var(--gold)}.brand-gem{color:#e16f63}.top-resources{display:flex;gap:24px;color:var(--muted);font-size:12px}.top-resources b{color:white;font-size:15px}.nav{display:flex;max-width:1000px;margin:16px auto 0;gap:8px;padding:0 12px}.nav button{font-size:12px}
main{max-width:1200px;margin:0 auto;padding:16px 14px 60px}.page{display:none}.page.active{display:block}.section-head{display:flex;justify-content:space-between;align-items:end;margin:8px 0 18px}.section-head h1{margin:0;color:var(--cream);font-size:28px}.section-head p{color:var(--muted);margin:5px 0 0;font-size:13px}.world-list{display:grid;gap:18px}.world-card{background:#241d27;border:4px solid #110e12;box-shadow:0 0 0 2px #634b59;padding:16px}.world-card.locked{opacity:.5}.world-title{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.world-title h2{margin:0;color:var(--gold)}.world-theme{font-size:12px;color:var(--muted)}.stage-grid{display:grid;grid-template-columns:repeat(10,minmax(72px,1fr));gap:6px}.stage{position:relative;background:#332a36;border:3px solid #171219;box-shadow:0 0 0 1px #654e5a;padding:8px 5px;min-height:92px;cursor:pointer;text-align:center}.stage.locked{filter:grayscale(1);opacity:.38;cursor:not-allowed}.stage.done:after{content:"✓";position:absolute;right:4px;top:2px;color:#91d26e;font-weight:bold}.stage.mid{background:#49352f;box-shadow:0 0 0 1px #b36d45}.stage.main{background:#4e2832;box-shadow:0 0 0 2px #c95656}.stage-num{font-size:10px;color:#a7928e}.stage-name{font-size:12px;font-weight:bold;margin:5px 0}.stage-enemy{font-size:9px;color:#c3aca0}.boss-label{font-size:9px;color:#ffc56d;margin-top:4px}.mission-running{color:#77c8df;font-size:9px;margin-top:5px}
.hero-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:14px}.hero-card{background:#29212d;border:4px solid #110e12;box-shadow:0 0 0 2px var(--hero,#765766);padding:14px;cursor:pointer}.hero-head{display:flex;align-items:center;gap:12px}.portrait{width:56px;height:56px;border:4px solid #151017;background:var(--hero);position:relative;box-shadow:0 0 0 2px #a67f8e}.portrait:before{content:"";position:absolute;width:22px;height:22px;background:#e5ba8d;left:13px;top:7px;box-shadow:0 22px 0 #44303e}.portrait:after{content:"";position:absolute;width:7px;height:5px;background:#24151d;left:18px;top:15px;box-shadow:12px 0 0 #24151d}.hero-card h3{margin:0;color:#fff;font-size:20px}.role{font-size:11px;color:var(--gold)}.passive{margin-top:10px;color:#cdbab1;font-size:11px;line-height:1.45}.stat-row{display:flex;gap:5px;flex-wrap:wrap;margin-top:10px}.stat{font-size:9px;background:#181419;padding:4px 6px;border:1px solid #604854}.status{margin-left:auto;font-size:10px;color:#9ccd84}.status.busy{color:#e9ab64}
.two-col{display:grid;grid-template-columns:1.6fr 1fr;gap:18px}.recipe-grid,.inventory-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:10px}.recipe,.item-card,.material{background:#28202b;border:3px solid #110e12;box-shadow:0 0 0 1px #664d59;padding:12px}.recipe strong,.item-card strong{color:var(--gold)}.recipe .cost{font-size:10px;color:#c4ada4;margin:7px 0}.quality-normal{color:#ddd}.quality-gut{color:#79c16d}.quality-selten{color:#62a9dc}.quality-episch{color:#b27bdd}.quality-legendaer{color:#f0b544}.material-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}.material{display:flex;justify-content:space-between;font-size:11px}.log-list{display:grid;gap:7px}.log-entry{background:#251e28;border-left:4px solid #745260;padding:10px;font-size:12px;color:#cdbab1}.log-time{color:#796970;margin-right:10px}.empty{color:#8d7b78;padding:20px;border:2px dashed #59444f;text-align:center}
.modal{position:fixed;inset:0;background:#09070bc9;z-index:50;display:grid;place-items:center;padding:18px}.modal-card{position:relative;width:min(780px,96vw);max-height:90vh;overflow:auto}.x{position:absolute;right:8px;top:5px;border:0;background:none;color:#cbb6ae;font-size:28px;cursor:pointer}.select-heroes{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px}.select-hero{background:#1b171d;border:3px solid #41313b;padding:9px;cursor:pointer}.select-hero.selected{border-color:#e0aa49;background:#40302f}.select-hero.busy{opacity:.4;pointer-events:none}.hero-detail-head{display:flex;align-items:center;gap:16px}.hero-detail-head h2{margin:0;font-size:28px}.big-passive{background:#1c171e;border-left:4px solid var(--gold);padding:12px;margin:14px 0;font-size:12px;line-height:1.5}.stats-table{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}.stats-table div{background:#1b171d;padding:8px;border:1px solid #59424e;font-size:11px}.equipment-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:10px 0}.equip-slot{background:#1a161c;border:2px solid #56414c;padding:8px;font-size:10px;min-height:62px}.talent-tree{display:grid;gap:8px}.talent{background:#1b171d;border:2px solid #59414f;padding:9px;display:flex;justify-content:space-between;gap:12px}.talent.unlocked{border-color:#6b9f55}.talent.locked{opacity:.55}.mission-summary{background:#1c171d;padding:10px;border:2px solid #59444e;margin:10px 0;font-size:11px}.countdown{color:#8cc8d8;font-weight:bold}
@media(max-width:900px){.stage-grid{grid-template-columns:repeat(5,1fr)}.two-col{grid-template-columns:1fr}.nav{flex-wrap:wrap;overflow:visible}.nav button{min-width:0;flex:1 1 calc(33.333% - 8px)}.top-resources{gap:10px}.equipment-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.topbar{padding:0 8px}.brand{font-size:14px}.top-resources{font-size:9px}.top-resources b{font-size:11px}.stage-grid{grid-template-columns:repeat(2,1fr)}.hero-grid{grid-template-columns:1fr}.section-head h1{font-size:22px}.modal{padding:7px}.stats-table{grid-template-columns:repeat(2,1fr)}}

/* 0.2 */
.recruit-counter{background:#1b171d;border:2px solid #59444f;padding:8px 10px;font-size:11px;color:var(--muted)}
.recruit-counter b{color:var(--gold);font-size:15px}.locked-hero{filter:saturate(.55);background:#211c23}.locked-hero .passive{color:#9f8d88}.locked-portrait:after{content:"?";display:grid;place-items:center;position:absolute;inset:0;background:#171319;color:#d9b76a;font-size:28px;font-weight:bold}.locked-hero button:disabled,.recipe button:disabled,.craft-job button:disabled{opacity:.45;cursor:not-allowed}
.starter-card{width:min(1040px,97vw)}.starter-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(245px,1fr));gap:10px;margin-top:14px}.starter-option{background:#251f29;border:3px solid #130f14;box-shadow:0 0 0 2px var(--hero,#684d5b);padding:12px}.starter-option.recommended{box-shadow:0 0 0 3px var(--gold),7px 7px 0 #0e0c10}.starter-option h3{margin:0}.recommendation{display:flex;gap:10px;align-items:center;background:#392e23;border:2px solid #a87a32;padding:10px;color:#f0d291}.recommendation span{color:#d5c3a4;font-size:11px}
.stage{padding:0;overflow:hidden;min-height:142px;display:flex;flex-direction:column}.stage-art{display:block;width:100%;height:72px;object-fit:cover;image-rendering:pixelated;border-bottom:2px solid #171219}.stage-copy{padding:6px 5px 8px;flex:1}.mission-art{width:100%;max-height:260px;object-fit:cover;image-rendering:pixelated;border:4px solid #100e12;box-shadow:0 0 0 2px #6f5361;margin:6px 0 12px}
.result-card{width:min(760px,96vw)}.result-title{font-size:24px;font-weight:900;letter-spacing:.08em;margin-bottom:6px}.result-title.success{color:#8fd16d}.result-title.fail{color:#d46565}.result-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:12px 0}.result-grid>div{background:#19151b;border:2px solid #58434e;padding:10px;display:grid;gap:5px}.result-grid span{font-size:18px;color:var(--gold)}.table-wrap{overflow:auto}.combat-table{width:100%;border-collapse:collapse;background:#19151b}.combat-table th,.combat-table td{border:1px solid #58434e;padding:8px;text-align:right;font-size:11px}.combat-table th:first-child,.combat-table td:first-child{text-align:left}.loot-chips{display:flex;gap:7px;flex-wrap:wrap}.loot-chips span{background:#2a232c;border:2px solid #604954;padding:6px 9px;font-size:11px}.result-loot-item,.recruit-reward{margin-top:10px;padding:10px;border:2px solid #8a6c35;background:#392e22;color:#f1d18b}.recruit-reward{border-color:#5e8d4e;background:#213421;color:#9bd385}
.craft-queue{margin-bottom:14px}.craft-job,.craft-empty{background:#201a22;border:3px solid #100e12;box-shadow:0 0 0 2px #624a58;padding:12px;display:flex;align-items:center;justify-content:space-between;gap:12px}.craft-timer{font-size:18px;color:#81c4d7}.craft-empty{color:#887673}.craft-duration{font-size:10px;color:#88a8b0;margin:6px 0}.item-rule{margin-top:8px;color:#b9a494;font-size:10px}.equipped-tag,.available-tag{font-size:10px;margin-top:8px;padding:4px 6px;display:inline-block}.equipped-tag{background:#423322;color:#e2c47d}.available-tag{background:#233522;color:#8cc67b}
@media(max-width:900px){.stage{min-height:132px}.stage-art{height:64px}.result-grid{grid-template-columns:1fr}.starter-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.starter-grid{grid-template-columns:1fr}.recommendation{display:block}.craft-job{align-items:flex-start;flex-direction:column}.stage-art{height:82px}}

/* 0.3 Händler, Freunde, Handel, Charakterbilder */
.portrait-image{overflow:hidden;background:#151017}.portrait-image img{width:100%;height:100%;object-fit:cover;object-position:50% 18%;display:block;image-rendering:auto}.portrait-large{width:110px;height:130px;flex:0 0 auto}.hero-card .portrait-image img{object-position:50% 16%}.locked-portrait img{filter:grayscale(1) brightness(.35)}.locked-portrait:after{z-index:2}
.merchant-header{display:flex;align-items:center;gap:14px;background:#2b231e;border:3px solid #120f14;box-shadow:0 0 0 2px #8a6638;padding:14px;margin-bottom:16px}.merchant-header h2{margin:0;color:var(--gold)}.merchant-header p{margin:4px 0 0;color:var(--muted);font-size:12px}.merchant-avatar{width:58px;height:58px;display:grid;place-items:center;background:#72532e;color:#f7d57e;border:3px solid #160f0a;box-shadow:0 0 0 2px #c3954a;font-size:28px;font-weight:900}.merchant-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:10px}.merchant-card{background:#28211f;border:3px solid #120f14;box-shadow:0 0 0 1px #765d3c;padding:12px;display:grid;gap:8px}.merchant-card strong{color:#e9c46f}.merchant-price{font-size:13px;color:#f4dfaa}.merchant-sell{display:grid;gap:8px}.sell-row{background:#251f25;border:2px solid #5d4853;padding:9px;display:flex;align-items:center;justify-content:space-between;gap:10px}.sell-row span:first-child{display:grid;gap:2px}.sell-row small{font-size:10px;color:var(--muted)}
.social-top{display:grid;grid-template-columns:1fr 1.5fr;gap:14px;margin-bottom:18px}.pixel-subpanel{background:#241e27;border:3px solid #100e12;box-shadow:0 0 0 2px #604a57;padding:13px}.pixel-subpanel h2{margin-top:0}.inline-form{display:flex;gap:8px}.inline-form input,.trade-compose-grid input,.trade-compose-grid select,#tradeFriend{width:100%;background:#151218;border:2px solid #57434d;color:#f5ead0;padding:8px;outline:none}.friend-request{display:flex;justify-content:space-between;align-items:center;gap:8px;background:#1a161c;border:2px solid #4d3a44;padding:8px;margin-top:7px}.friends-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:10px;margin-bottom:20px}.friend-card{background:#28212b;border:3px solid #100e12;box-shadow:0 0 0 2px #624c58;padding:12px}.friend-head{display:flex;align-items:start;justify-content:space-between;gap:10px}.friend-head h3{margin:0;color:var(--gold)}.friend-party{display:flex;flex-wrap:wrap;gap:5px;margin-top:10px}.friend-char{background:#181419;border:1px solid #604955;padding:5px 7px;font-size:10px}.friend-char small{color:#a9948e}.active-party{margin-top:9px;font-size:10px;color:#91c9d5}.active-party.muted{color:#827275}.trade-compose-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:9px}.trade-compose-grid fieldset{border:2px solid #5c4651;background:#1b171d;padding:9px}.trade-compose-grid legend{color:var(--gold);padding:0 5px}.trade-compose-grid label,.pixel-subpanel>label{display:grid;gap:4px;font-size:10px;color:#cbb8ae;margin-bottom:7px}.trade-list{display:grid;gap:8px}.trade-card{background:#251f28;border:3px solid #100e12;box-shadow:0 0 0 1px #624a57;padding:11px}.trade-card.accepted{box-shadow:0 0 0 1px #5d8c53}.trade-card.rejected,.trade-card.cancelled{opacity:.65}.trade-head{display:flex;justify-content:space-between;gap:10px;color:#d7c4b9}.trade-head span{font-size:10px;color:#d5a957}.trade-sides{display:grid;grid-template-columns:1fr 30px 1fr;gap:8px;align-items:center;margin:9px 0}.trade-sides>div:not(.trade-arrow){background:#181419;border:1px solid #59434e;padding:8px;min-height:65px}.trade-arrow{text-align:center;color:var(--gold);font-size:20px}.trade-lines{display:grid;gap:3px;font-size:11px}.trade-lines span{display:block}.trade-sides small{display:block;color:#9d8984;margin-bottom:4px}
@media(max-width:900px){.social-top{grid-template-columns:1fr}.trade-compose-grid{grid-template-columns:1fr}.merchant-columns{grid-template-columns:1fr}.portrait-large{width:92px;height:112px}}
@media(max-width:560px){.inline-form{flex-direction:column}.sell-row{align-items:flex-start;flex-direction:column}.trade-sides{grid-template-columns:1fr}.trade-arrow{transform:rotate(90deg)}.friend-head{align-items:flex-start}}

@media(max-width:560px){.nav button{flex:1 1 calc(50% - 8px);font-size:10px;padding:8px 5px}.nav{gap:6px}}

/* 0.3.2: echte Charakterbilder dürfen nicht vom alten CSS-Pixelportrait überlagert werden */
.portrait.portrait-image::before{display:none}
.portrait.portrait-image:not(.locked-portrait)::after{display:none}

/* 0.3.3 Loot-Kodex & Drop-Vorschau */
.drop-preview{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin-top:8px}
.drop-preview.compact{gap:4px}.drop-slot{min-width:0;background:#171318;border:2px solid #4f3b46;padding:6px;display:grid;grid-template-columns:auto 1fr;grid-template-areas:"icon rarity" "icon name" "icon chance";column-gap:6px;align-items:center;box-shadow:inset 0 0 0 1px #0f0c10}
.drop-preview.compact .drop-slot{padding:4px;grid-template-columns:auto 1fr}.drop-slot small{grid-area:rarity;font-size:8px;text-transform:uppercase;letter-spacing:.05em;color:#a9958f}.drop-slot b{grid-area:name;font-size:9px;line-height:1.15;overflow:hidden;text-overflow:ellipsis}.drop-slot em{grid-area:chance;font-size:8px;font-style:normal;color:#d8bc7b}.drop-symbol,.drop-shadow{grid-area:icon;width:24px;height:24px;display:grid;place-items:center;background:#211b22;border:2px solid #0e0b0f;font-size:14px}.hidden-drop{filter:saturate(.65)}.hidden-drop .drop-shadow{color:#312831;background:#100d11;text-shadow:0 0 6px #000}.hidden-drop b{color:#75646d}.hidden-drop em{color:#6e6065}
.rarity-normal{border-color:#655c59}.rarity-selten{border-color:#4f85a8}.rarity-legendaer{border-color:#c39438;box-shadow:inset 0 0 0 1px #0f0c10,0 0 8px #b5802630}.rarity-normal small{color:#b9aaa0}.rarity-selten small{color:#81bce0}.rarity-legendaer small{color:#efc865}.rarity-legendaer .drop-symbol{color:#ffd96f}
.world-codex{margin-top:14px;background:#19151b;border:3px solid #100d11;box-shadow:0 0 0 2px #66505b;padding:12px}.codex-head{display:flex;justify-content:space-between;gap:12px;align-items:center;margin-bottom:10px}.codex-head>div{display:grid;gap:2px}.codex-head b{color:var(--gold);letter-spacing:.08em}.codex-head small{color:var(--muted)}.codex-head>span{font-size:18px;color:#e5c477}.codex-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:7px}.codex-item{display:grid;grid-template-columns:30px 1fr;gap:7px;align-items:center;background:#211b22;border:2px solid #55404b;padding:7px}.codex-item>span{width:28px;height:28px;display:grid;place-items:center;background:#120f13;border:2px solid #0b090c}.codex-item>div{display:grid;gap:1px}.codex-item small{font-size:8px;color:#a9948e}.codex-item b{font-size:9px}.codex-item em{font-size:8px;font-style:normal;color:#d1b574}.result-loot-item small{display:block;margin-top:4px;color:#c8b28a;font-size:9px}
@media(max-width:900px){.drop-preview{grid-template-columns:1fr}.drop-preview.compact{grid-template-columns:1fr}.codex-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.codex-grid{grid-template-columns:1fr}.drop-slot b{white-space:normal}}

/* 0.3.4 – Mobile-first Optimierungen */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{overflow-x:hidden}
button,input,select{touch-action:manipulation}

@media(max-width:720px){
  :root{--mobile-nav-h:112px}
  body{padding-bottom:env(safe-area-inset-bottom)}
  .topbar{
    height:auto;min-height:58px;padding:8px 10px;gap:8px;
    align-items:center;position:sticky;top:0;z-index:40
  }
  .brand{font-size:15px;white-space:nowrap}
  .top-resources{margin-left:auto;gap:9px;font-size:9px;align-items:center}
  .top-resources span{display:grid;line-height:1.05;text-align:center}
  .top-resources b{font-size:13px;margin-top:2px}
  #logout{padding:7px 8px;font-size:9px;white-space:nowrap}

  .nav{
    position:fixed;left:0;right:0;bottom:0;z-index:45;
    max-width:none;margin:0;padding:6px 6px calc(6px + env(safe-area-inset-bottom));
    gap:5px;background:#151219f7;border-top:3px solid #5a4250;
    display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
    box-shadow:0 -6px 20px #0008
  }
  .nav button{
    min-width:0;min-height:44px;padding:5px 3px;font-size:9px;line-height:1.1;
    white-space:normal;word-break:normal;display:flex;align-items:center;justify-content:center
  }
  .nav button:nth-child(n+5){min-height:40px}

  main{padding:10px 8px calc(var(--mobile-nav-h) + 20px);max-width:100%;overflow-x:hidden}
  .section-head{display:grid;grid-template-columns:1fr;gap:8px;align-items:start;margin:4px 0 12px}
  .section-head h1{font-size:21px;line-height:1.1}
  .section-head p{font-size:11px;line-height:1.45}
  .recruit-counter{width:100%;font-size:10px}

  .world-list{gap:12px}
  .world-card{padding:10px;border-width:3px}
  .world-title{display:grid;gap:5px;align-items:start;margin-bottom:9px}
  .world-title h2{font-size:19px}
  .stage-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}
  .stage{min-height:154px}
  .stage-art{height:82px}
  .stage-name{font-size:11px}
  .stage-enemy,.boss-label,.mission-running{font-size:8px}
  .drop-preview,.drop-preview.compact{grid-template-columns:1fr;gap:3px}
  .drop-slot{padding:4px;grid-template-columns:20px 1fr;column-gap:5px}
  .drop-symbol,.drop-shadow{width:20px;height:20px;font-size:11px}
  .drop-slot small,.drop-slot em{font-size:7px}.drop-slot b{font-size:8px}

  .hero-grid,.starter-grid,.recipe-grid,.inventory-grid,.merchant-grid,.friends-grid{grid-template-columns:1fr;gap:9px}
  .hero-card,.starter-option,.recipe,.item-card,.merchant-card,.friend-card{padding:11px}
  .hero-head{align-items:flex-start}
  .portrait{flex:0 0 auto}
  .portrait-large{width:88px;height:108px}
  .stat-row{gap:4px}.stat{font-size:8px}
  .passive{font-size:10px}

  .two-col,.merchant-columns,.social-top,.trade-compose-grid{grid-template-columns:1fr!important;gap:12px}
  .material-grid{grid-template-columns:1fr 1fr}
  .material{font-size:10px}

  .pixel-btn,.auth-tabs button,.nav button{min-height:42px}
  .pixel-btn.small{min-height:38px;padding:7px 9px}
  input,select{min-height:44px;font-size:16px!important}
  .inline-form{display:grid!important;grid-template-columns:1fr;gap:7px}

  .modal{padding:0;align-items:stretch;justify-items:stretch}
  .modal-card{
    width:100vw;max-width:none;height:100dvh;max-height:100dvh;
    border-left:0;border-right:0;border-radius:0;padding:16px 12px calc(22px + env(safe-area-inset-bottom));
    overflow-y:auto;overscroll-behavior:contain
  }
  .x{position:sticky;float:right;top:0;z-index:5;width:44px;height:44px;background:#211a22;border:2px solid #5d4552}
  .hero-detail-head{align-items:flex-start;gap:10px;padding-right:42px}
  .hero-detail-head h2{font-size:23px}
  .big-passive{font-size:11px}
  .stats-table{grid-template-columns:repeat(2,minmax(0,1fr))}
  .equipment-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .talent{display:grid;grid-template-columns:1fr;gap:6px}
  .talent .pixel-btn{width:100%}
  .select-heroes{grid-template-columns:1fr 1fr}
  .mission-art{max-height:220px}

  .result-grid{grid-template-columns:1fr 1fr}
  .result-combat{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .result-combat table{min-width:520px}

  .codex-head{display:grid;grid-template-columns:1fr auto;align-items:start}
  .codex-grid{grid-template-columns:1fr}

  .merchant-header{align-items:flex-start}
  .merchant-card{display:grid;grid-template-columns:1fr;gap:7px}
  .merchant-card .pixel-btn{width:100%}
  .sell-row{display:grid!important;grid-template-columns:1fr;gap:7px;align-items:start!important}
  .sell-row>span:last-child{display:flex;flex-wrap:wrap;gap:5px;width:100%}

  .friend-head{display:grid;grid-template-columns:1fr auto;gap:8px;align-items:start}
  .friend-party{display:flex;flex-wrap:wrap;gap:5px}
  .friend-char{flex:1 1 130px}
  .trade-sides{grid-template-columns:1fr!important;gap:7px}
  .trade-arrow{transform:rotate(90deg);height:24px}
  .trade-card{padding:10px}
  .trade-card .pixel-btn{min-width:100px}

  .log-entry{font-size:10px;padding:9px}
  .auth-screen{padding:8px;align-items:center}
  .auth-card{width:100%;max-width:430px;padding:18px 14px}
  .logo{font-size:27px}
}

@media(max-width:390px){
  .brand{font-size:12px}.brand-gem{display:none}
  .top-resources{gap:6px}.top-resources b{font-size:12px}
  #logout{font-size:8px;padding:6px}
  .nav{grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;padding-left:4px;padding-right:4px}
  .nav button{font-size:8px;padding:4px 2px}
  main{padding-left:6px;padding-right:6px}
  .world-card{padding:7px}
  .stage-grid{gap:5px}
  .stage{min-height:145px}
  .stage-art{height:72px}
  .select-heroes{grid-template-columns:1fr}
  .result-grid{grid-template-columns:1fr}
  .material-grid{grid-template-columns:1fr}
  .equipment-grid{grid-template-columns:1fr 1fr}
}