*{box-sizing:border-box}
:root{
  color-scheme:dark;
  --ink:#efe5c8;
  --muted:#b9ad8f;
  --panel:rgba(24,20,16,.94);
  --line:rgba(230,199,123,.25);
  --gold:#e8c06a
}

html,body{margin:0;min-height:100%}

body{
  min-height:100vh;
  font-family:Georgia,"Times New Roman",serif;
  color:var(--ink);
  background:
    radial-gradient(circle at top,rgba(118,63,32,.35),transparent 38rem),
    linear-gradient(#15130f,#090807)
}

a{color:#e8c06a}

button,.button-link{
  display:inline-block;
  border:1px solid #c49950;
  border-radius:5px;
  padding:.62rem .9rem;
  color:#fff7df;
  background:linear-gradient(#7f3b2b,#4b211c);
  font:inherit;
  text-decoration:none;
  cursor:pointer
}

button:hover,.button-link:hover{filter:brightness(1.15)}
button.secondary{background:#302922}
button:disabled{opacity:.55;cursor:default}

.small-button{
  width:100%;
  padding:.42rem .55rem;
  font-size:.75rem
}

.shell{
  width:min(1040px,96vw);
  margin:0 auto;
  padding:.45rem 0 .7rem
}

.topbar{
  display:flex;
  justify-content:space-between;
  gap:1rem;
  align-items:end;
  padding:.15rem .15rem .55rem
}

.title-block{min-width:0}

.eyebrow{
  margin:0 0 .12rem;
  text-transform:uppercase;
  letter-spacing:.16em;
  font-size:.68rem;
  color:var(--muted)
}

h1,h2,p{margin-top:0}

h1{
  margin-bottom:.15rem;
  font-size:clamp(1.75rem,3.3vw,2.65rem);
  line-height:1
}

.player-line{
  margin:0;
  color:var(--muted);
  font-size:.9rem
}

.wallet{
  display:flex;
  gap:.5rem;
  font-family:system-ui,sans-serif
}

.wallet div{
  min-width:112px;
  padding:.48rem .65rem;
  border:1px solid var(--line);
  background:var(--panel);
  text-align:right
}

.wallet span{
  display:block;
  color:var(--muted);
  font-size:.65rem;
  text-transform:uppercase
}

.wallet strong{
  color:var(--gold);
  font-size:1.05rem
}

.game-card{
  position:relative;
  overflow:hidden;
  border:1px solid rgba(222,188,111,.35);
  box-shadow:0 18px 48px rgba(0,0,0,.5);
  background:#0d0f0b
}

canvas{
  display:block;
  width:100%;
  height:auto;
  background:#26301f
}

.quest-panel,.status-panel,.target-panel{
  position:absolute;
  padding:.62rem .72rem;
  border:1px solid var(--line);
  background:var(--panel);
  box-shadow:0 8px 20px rgba(0,0,0,.33)
}

.quest-panel{
  top:.75rem;
  left:.75rem;
  width:232px
}

.status-panel{
  left:.75rem;
  bottom:.75rem;
  width:232px;
  font-family:system-ui,sans-serif;
  font-size:.74rem
}


.target-panel{
  right:.75rem;
  bottom:.75rem;
  width:185px;
  font-family:system-ui,sans-serif;
  font-size:.72rem
}

.target-heading{
  display:flex;
  justify-content:space-between;
  gap:.45rem;
  margin-bottom:.35rem;
  color:var(--gold)
}

.target-heading strong{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap
}

.target-panel label{
  display:flex;
  justify-content:space-between;
  gap:.4rem;
  margin:.25rem 0 .15rem;
  color:#d9ccad
}

.target-hp-bar span{
  background:linear-gradient(90deg,#6f2723,#c45448)
}

.target-hint{
  min-height:1.8em;
  margin:.38rem 0;
  color:var(--muted);
  font-size:.66rem;
  line-height:1.25
}

.target-panel.is-aggro{
  border-color:rgba(221,111,91,.75);
}

.quest-panel h2{
  margin-bottom:.32rem;
  font-size:.9rem;
  color:var(--gold)
}

.quest-panel p{
  margin-bottom:.4rem;
  font-size:.79rem;
  line-height:1.28
}

.hint{
  margin-bottom:0!important;
  color:var(--muted);
  font-size:.67rem!important
}

.progress,.bar{
  height:7px;
  overflow:hidden;
  border:1px solid #5e5139;
  background:#15130f
}

.progress span,.bar span{
  display:block;
  width:0;
  height:100%;
  transition:width .25s
}

.progress span,.xp-bar span{
  background:linear-gradient(90deg,#8a3a2b,#e3bd68)
}

.hp-bar span{
  background:linear-gradient(90deg,#72352d,#b74b3f)
}

.status-heading{
  display:flex;
  justify-content:space-between;
  margin-bottom:.38rem;
  color:var(--gold)
}

.status-panel label{
  display:flex;
  justify-content:space-between;
  margin:.3rem 0 .15rem;
  color:#d9ccad
}

.status-actions{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:.38rem;
  margin-top:.5rem
}


.dialog{
  position:absolute;
  left:50%;
  bottom:.85rem;
  transform:translateX(-50%);
  width:min(620px,90%);
  display:grid;
  grid-template-columns:62px 1fr;
  gap:.8rem;
  padding:.8rem;
  border:1px solid #b48643;
  background:rgba(24,18,13,.97);
  box-shadow:0 18px 36px rgba(0,0,0,.55);
  z-index:5
}

.dialog p{
  margin:.25rem 0 .6rem;
  line-height:1.35
}

.portrait{
  display:grid;
  place-items:center;
  width:56px;
  height:56px;
  border:1px solid #8e6e39;
  background:#31271e;
  color:var(--gold);
  font-size:1.7rem
}

.hidden{display:none!important}

.toast{
  position:absolute;
  top:.75rem;
  right:205px;
  max-width:330px;
  padding:.65rem .8rem;
  border:1px solid #8e6e39;
  background:rgba(22,18,13,.97);
  box-shadow:0 10px 24px rgba(0,0,0,.4);
  z-index:12
}



.inventory-backdrop{
  position:absolute;
  inset:0;
  z-index:8;
  background:rgba(5,4,3,.64);
  backdrop-filter:blur(2px)
}

.inventory-window{
  position:absolute;
  z-index:9;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  width:min(790px,92%);
  max-height:90%;
  overflow:auto;
  border:1px solid #b48643;
  background:
    linear-gradient(rgba(34,27,19,.98),rgba(18,15,12,.98));
  box-shadow:0 24px 58px rgba(0,0,0,.72);
  font-family:system-ui,sans-serif
}

.inventory-window-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:1rem;
  padding:.85rem 1rem;
  border-bottom:1px solid var(--line);
  background:rgba(76,48,29,.34)
}

.inventory-window-header h2{
  margin:0;
  color:var(--gold);
  font:1.28rem Georgia,"Times New Roman",serif
}

.inventory-window-header .eyebrow{
  margin-bottom:.16rem
}

.inventory-close-button{
  width:38px;
  height:38px;
  padding:0;
  display:grid;
  place-items:center;
  font-size:1.45rem;
  line-height:1;
  background:#302922
}

.inventory-window-body{
  display:grid;
  grid-template-columns:minmax(0,1.2fr) minmax(245px,.8fr);
  gap:.85rem;
  padding:.85rem
}

.equipment-section{
  grid-column:1 / -1
}

.section-heading{
  display:flex;
  justify-content:space-between;
  align-items:end;
  gap:.7rem;
  margin-bottom:.45rem
}

.section-heading h3{
  margin:0;
  color:#e8c06a;
  font:1rem Georgia,"Times New Roman",serif
}

.section-heading span{
  color:var(--muted);
  font-size:.69rem
}

.equipment-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:.45rem
}

.equipment-slot{
  min-height:78px;
  padding:.5rem;
  display:flex;
  flex-direction:column;
  justify-content:center;
  border:1px solid rgba(230,199,123,.19);
  background:rgba(0,0,0,.2)
}

.equipment-slot.equipped{
  border-color:rgba(232,192,106,.55);
  background:rgba(112,65,37,.2)
}

.equipment-slot .slot-label{
  color:var(--muted);
  font-size:.65rem;
  text-transform:uppercase;
  letter-spacing:.08em
}

.equipment-slot strong{
  margin:.16rem 0;
  color:#f3dfaa;
  font-size:.77rem
}

.equipment-slot small{
  color:#8f846d;
  font-size:.62rem;
  line-height:1.2
}

.inventory-items-section,
.inventory-detail-section{
  min-height:255px;
  padding:.65rem;
  border:1px solid rgba(230,199,123,.16);
  background:rgba(0,0,0,.14)
}

.inventory-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:.4rem;
  max-height:225px;
  overflow:auto;
  padding-right:.2rem
}

.inventory-empty{
  grid-column:1 / -1;
  padding:2rem 1rem;
  text-align:center;
  color:var(--muted);
  border:1px dashed rgba(230,199,123,.2)
}

.inventory-item-button{
  min-height:77px;
  padding:.38rem;
  display:grid;
  grid-template-columns:34px 1fr;
  grid-template-rows:auto auto;
  gap:.15rem .36rem;
  text-align:left;
  border:1px solid rgba(230,199,123,.17);
  background:rgba(35,29,22,.9)
}

.inventory-item-button:hover{
  border-color:rgba(232,192,106,.55)
}

.inventory-item-button.selected{
  border-color:#d0a85d;
  background:rgba(99,63,35,.65);
  box-shadow:inset 0 0 0 1px rgba(232,192,106,.2)
}

.inventory-item-button.rare{
  border-color:rgba(214,102,91,.55)
}

.inventory-item-icon{
  grid-row:1 / 3;
  display:grid;
  place-items:center;
  width:34px;
  height:34px;
  align-self:center;
  border:1px solid rgba(230,199,123,.22);
  background:#1b1712;
  color:#e7c779;
  font:1.1rem Georgia,"Times New Roman",serif
}

.inventory-item-name{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:#eee1c2;
  font-size:.69rem
}

.inventory-item-quantity{
  color:var(--muted);
  font-size:.64rem
}

.inventory-detail-section{
  display:grid;
  grid-template-columns:54px 1fr;
  gap:.65rem
}

.item-detail-icon{
  display:grid;
  place-items:center;
  width:54px;
  height:54px;
  border:1px solid rgba(230,199,123,.35);
  background:#191510;
  color:#e8c06a;
  font:1.65rem Georgia,"Times New Roman",serif
}

.item-rarity{
  display:inline-block;
  margin-bottom:.2rem;
  color:var(--muted);
  font-size:.65rem;
  text-transform:uppercase;
  letter-spacing:.08em
}

.item-rarity.uncommon{color:#9ac8a3}
.item-rarity.rare{color:#f09b90}

.inventory-detail-section h3{
  margin:0 0 .35rem;
  color:#f3dfaa;
  font:1.05rem Georgia,"Times New Roman",serif
}

.inventory-detail-section p{
  min-height:4.4rem;
  margin:0 0 .65rem;
  color:#cfc3a5;
  font-size:.73rem;
  line-height:1.4
}

.item-facts{
  margin:0 0 .65rem;
  display:grid;
  gap:.28rem
}

.item-facts div{
  display:flex;
  justify-content:space-between;
  gap:.5rem;
  padding:.27rem 0;
  border-bottom:1px solid rgba(230,199,123,.11)
}

.item-facts dt{
  color:var(--muted);
  font-size:.68rem
}

.item-facts dd{
  margin:0;
  color:#eee1c2;
  font-size:.68rem
}

.inventory-detail-section button{
  width:100%;
  padding:.48rem .6rem;
  font-size:.74rem
}

.inventory-window-footer{
  display:flex;
  justify-content:space-between;
  gap:1rem;
  padding:.55rem 1rem;
  border-top:1px solid var(--line);
  color:var(--muted);
  font-size:.67rem
}

@media(max-width:760px){
  .inventory-window{
    width:94%;
    max-height:92%
  }

  .inventory-window-body{
    grid-template-columns:1fr
  }

  .equipment-section{
    grid-column:auto
  }

  .equipment-grid{
    grid-template-columns:repeat(2,1fr)
  }

  .inventory-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))
  }

  .inventory-window-footer{
    flex-direction:column;
    gap:.18rem
  }
}




.equipment-slot.has-item{
  border-color:rgba(232,192,106,.6);
  background:rgba(105,67,37,.28)
}

.equipment-slot-action{
  width:100%;
  margin-top:.35rem;
  padding:.25rem .35rem;
  font-size:.62rem;
  background:#302922
}

.equipment-fixed{
  margin-top:.3rem;
  color:#8f846d;
  font-size:.59rem
}

.item-rarity.uncommon{
  color:#9ac8a3
}

.shop-dialog{
  width:min(720px,92%);
  grid-template-columns:72px 1fr
}

.shop-intro{
  color:#cfc3a5
}

.shop-offers{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:.45rem;
  margin:.55rem 0 .65rem
}

.shop-offer{
  display:grid;
  grid-template-columns:1fr auto;
  gap:.12rem .55rem;
  align-items:center;
  padding:.5rem;
  border:1px solid rgba(230,199,123,.18);
  background:rgba(0,0,0,.16)
}

.shop-offer span{
  color:#f3dfaa;
  font-size:.76rem
}

.shop-offer small{
  color:var(--muted);
  font-size:.63rem
}

.shop-offer button{
  grid-column:2;
  grid-row:1 / 3;
  min-width:110px;
  padding:.4rem .5rem;
  font-size:.68rem
}

.shop-close{
  width:100%
}

@media(max-width:650px){
  .shop-offers{
    grid-template-columns:1fr
  }

  .shop-offer button{
    min-width:100px
  }
}



.combat-stats{margin:-.08rem 0 .25rem;color:#d9ccad;font-size:.68rem;text-align:right}
.skill-button{width:100%;margin-top:.42rem;padding:.42rem .5rem;display:grid;grid-template-columns:28px 1fr;align-items:center;gap:.45rem;text-align:left;background:linear-gradient(#51406c,#302541)}
.skill-button>span:first-child{display:grid;place-items:center;width:28px;height:28px;border:1px solid rgba(232,192,106,.35);background:rgba(0,0,0,.2);font-size:1rem}
.skill-button strong,.skill-button small{display:block}.skill-button strong{color:#f3dfaa;font-size:.69rem}.skill-button small{margin-top:.08rem;color:#c8bda5;font-size:.59rem}.skill-button.ready{border-color:rgba(185,144,229,.8);box-shadow:inset 0 0 0 1px rgba(185,144,229,.18)}
.class-choice-backdrop{position:fixed;inset:0;z-index:60;background:rgba(5,4,3,.82);backdrop-filter:blur(3px)}
.class-choice-window{position:fixed;z-index:61;left:50%;top:50%;transform:translate(-50%,-50%);width:min(920px,calc(100% - 1rem));max-height:calc(100dvh - 1rem);overflow:auto;padding:1.1rem;border:1px solid #b48643;background:linear-gradient(rgba(37,29,21,.99),rgba(17,14,11,.99));box-shadow:0 30px 80px rgba(0,0,0,.78)}
.class-choice-window h2{margin:0 0 .35rem;color:#f0d387;font:1.55rem Georgia,"Times New Roman",serif}.class-choice-intro{max-width:760px;margin-bottom:.85rem;color:#cfc3a5;line-height:1.45}.class-choice-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.65rem}
.class-card{display:flex;flex-direction:column;min-height:330px;padding:.85rem;border:1px solid rgba(230,199,123,.22);background:rgba(0,0,0,.18)}.class-card.guardian{border-top:3px solid #6f9fbb}.class-card.hunter{border-top:3px solid #7eaa68}.class-card.mystic{border-top:3px solid #9872b5}.class-symbol{display:grid;place-items:center;width:54px;height:54px;margin-bottom:.55rem;border:1px solid rgba(230,199,123,.3);background:rgba(0,0,0,.22);color:#f0d387;font-size:1.8rem}.class-card h3{margin:0 0 .35rem;color:#f3dfaa;font:1.15rem Georgia,"Times New Roman",serif}.class-card p{color:#cfc3a5;font-size:.79rem;line-height:1.4}.class-card ul{flex:1;margin:.2rem 0 .75rem;padding-left:1.15rem;color:#d9ccad;font-size:.74rem;line-height:1.55}.class-card button{width:100%}
@media(max-width:760px){.class-choice-grid{grid-template-columns:1fr}.class-card{min-height:0}.mobile-controls{grid-template-columns:repeat(5,1fr)}.mobile-controls button{font-size:.58rem}.mobile-controls button b{font-weight:normal}}



.inventory-item-icon img{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain
}

.item-detail-icon{
  background-position:center;
  background-repeat:no-repeat;
  background-size:contain
}

/* Anmeldung und Installation */
.auth-body{display:grid;place-items:center;padding:1rem}

.auth-card{
  width:min(520px,96vw);
  padding:1.5rem;
  border:1px solid var(--line);
  background:var(--panel);
  box-shadow:0 25px 70px rgba(0,0,0,.55)
}

.intro,.auth-link{color:var(--muted)}

.auth-form{
  display:grid;
  gap:1rem;
  margin:1.2rem 0
}

.auth-form label{
  display:grid;
  gap:.35rem;
  color:#d9ccad
}

.auth-form input{
  width:100%;
  border:1px solid #6f5c3a;
  border-radius:4px;
  padding:.72rem .8rem;
  color:#fff4d5;
  background:#17130f;
  font:1rem system-ui,sans-serif
}

.message{
  margin:1rem 0;
  padding:.8rem 1rem;
  border:1px solid #796641;
  background:#211b14;
  line-height:1.45
}

.message.error{border-color:#9b514d;background:#361c1a}
.message.success{border-color:#66835c;background:#1e2c1b}

code{
  padding:.12rem .28rem;
  border-radius:3px;
  background:#0d0b09;
  color:#f0cf85
}

/* Bei niedrigen Desktop-Fenstern nochmals etwas kompakter */
@media (min-width:761px) and (max-height:900px){
  .shell{width:min(960px,94vw);padding:.3rem 0 .45rem}
  .topbar{padding:0 .1rem .4rem}
  h1{font-size:2.15rem}
  .eyebrow{font-size:.62rem}
  .player-line{font-size:.82rem}
  .wallet div{min-width:104px;padding:.4rem .55rem}
  .quest-panel{width:220px}
  .status-panel{width:220px}
  .target-panel{width:176px}
}

/* Kleine Bildschirme */
@media(max-width:760px){
  .shell{width:98vw}
  .topbar{align-items:stretch;flex-direction:column}
  .wallet{width:100%}
  .wallet div{flex:1;min-width:0}
  .quest-panel{width:205px}
  .target-panel{width:165px}
  .status-panel{width:205px}
  .toast{right:.75rem;top:9rem}
}


/* Version 0.7: Gebiete und mobile Bedienung */
canvas{
  touch-action:none;
  user-select:none;
  -webkit-user-select:none;
  -webkit-tap-highlight-color:transparent
}

.area-badge{
  position:absolute;
  top:.72rem;
  left:50%;
  z-index:4;
  transform:translateX(-50%);
  min-width:210px;
  padding:.42rem .72rem;
  border:1px solid rgba(230,199,123,.3);
  background:rgba(18,15,11,.86);
  text-align:center;
  pointer-events:none
}

.area-badge strong{
  display:block;
  color:#f0d387;
  font-size:.86rem
}

.area-badge span{
  display:block;
  margin-top:.08rem;
  color:var(--muted);
  font: .63rem system-ui,sans-serif
}



.area-badge .online-here{
  margin-top:.24rem;
  padding-top:.2rem;
  border-top:1px solid rgba(230,199,123,.14);
  color:#a9d8bd;
  font-size:.6rem
}

.orientation-hint{
  display:none
}

.mobile-controls{
  display:none
}

.portal-near .area-badge{
  border-color:rgba(133,185,224,.68)
}

@media (hover:none), (pointer:coarse){
  button{
    min-height:44px
  }
}

@media(max-width:760px){
  body{
    overscroll-behavior-y:contain
  }

  .shell{
    width:100%;
    padding:.25rem .35rem .7rem
  }

  .topbar{
    gap:.42rem;
    padding:.1rem .1rem .38rem
  }

  h1{
    font-size:1.65rem
  }

  .eyebrow{
    font-size:.58rem
  }

  .player-line{
    font-size:.76rem
  }

  .wallet div{
    padding:.38rem .5rem
  }

  .game-card{
    display:grid;
    grid-template-columns:1fr 1fr;
    overflow:visible
  }

  canvas{
    grid-column:1 / -1;
    width:100%;
    border-bottom:1px solid var(--line)
  }

  .area-badge{
    top:.4rem;
    min-width:170px;
    padding:.3rem .55rem
  }

  .area-badge strong{
    font-size:.75rem
  }

  .quest-panel,
  .status-panel,
  .target-panel{
    position:static;
    width:auto;
    min-width:0;
    box-shadow:none;
    border-width:0 1px 1px 0
  }

  .quest-panel{
    grid-column:1;
    grid-row:2
  }

  .status-panel{
    grid-column:2;
    grid-row:2
  }

  .target-panel{
    grid-column:1 / -1;
    grid-row:3;
    border-right:0
  }

  .mobile-controls{
    grid-column:1 / -1;
    grid-row:4;
    display:grid;
    grid-template-columns:repeat(5,1fr);
    gap:.3rem;
    padding:.4rem;
    border-top:1px solid var(--line);
    background:rgba(18,15,11,.96)
  }

  .mobile-controls button{
    min-width:0;
    min-height:52px;
    padding:.32rem .2rem;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:.1rem;
    font-size:.65rem
  }

  .mobile-controls button span{
    font-size:1.05rem;
    line-height:1
  }

  .dialog{
    position:fixed;
    left:50%;
    bottom:max(.65rem,env(safe-area-inset-bottom));
    width:calc(100% - 1rem);
    max-height:55vh;
    overflow:auto;
    z-index:20
  }

  .inventory-backdrop{
    position:fixed;
    z-index:30
  }

  .inventory-window{
    position:fixed;
    width:calc(100% - .7rem);
    max-height:calc(100dvh - .7rem);
    z-index:31
  }

  .toast{
    position:fixed;
    top:auto;
    right:.5rem;
    bottom:calc(4.2rem + env(safe-area-inset-bottom));
    left:.5rem;
    max-width:none;
    z-index:40
  }
}

@media(max-width:520px) and (orientation:portrait){
  .orientation-hint{
    position:absolute;
    z-index:5;
    right:.35rem;
    bottom:.35rem;
    display:block;
    max-width:145px;
    padding:.28rem .4rem;
    border:1px solid rgba(230,199,123,.2);
    background:rgba(18,15,11,.78);
    color:#cbbd9b;
    font:.58rem system-ui,sans-serif;
    pointer-events:none
  }

  .quest-panel p,
  .status-panel,
  .target-panel{
    font-size:.68rem
  }
}

canvas{cursor:crosshair}
canvas.is-interactive{cursor:pointer}


/* Version 1.2 – gewöhnliche weiße Beute */
.item-rarity.white{
  color:#ffffff
}

.inventory-item-button.white{
  border-color:rgba(255,255,255,.32)
}

.inventory-item-button.white .inventory-item-name{
  color:#ffffff
}

.inventory-item-button.white .inventory-item-icon{
  border-color:rgba(255,255,255,.42)
}


/* Version 1.3: Sprachwahl und fünf Elemente */
.topbar-actions{display:flex;align-items:end;gap:.65rem}
.language-switch{display:flex;align-items:center;gap:.28rem;padding:.3rem .4rem;border:1px solid var(--line);background:var(--panel);font-family:system-ui,sans-serif}
.language-switch>span{margin-right:.2rem;color:var(--muted);font-size:.62rem;text-transform:uppercase}
.language-button{min-height:0;padding:.28rem .42rem;background:#302922;font-size:.65rem}
.language-button.active{border-color:#e8c06a;background:#6d3a28;color:#fff4d5}
.element-badge{display:inline-flex;align-items:center;justify-content:center;min-width:1.45rem;height:1.45rem;padding:0 .28rem;border:1px solid currentColor;border-radius:999px;background:var(--element-soft,rgba(255,255,255,.08));color:var(--element-color,#ddd);font:bold .78rem Georgia,"Times New Roman",serif;line-height:1;vertical-align:middle}
.inventory-item-name .element-badge{min-width:1.18rem;height:1.18rem;margin-left:.28rem;padding:0 .2rem;font-size:.64rem}
.item-element-line{display:inline-flex;align-items:center;gap:.35rem;color:#eee1c2}
.target-name-wrap{display:flex;min-width:0;align-items:center;gap:.35rem}.target-name-wrap strong{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.target-name-wrap .element-badge{min-width:1.2rem;height:1.2rem;font-size:.62rem}
.inventory-item-name{display:flex;align-items:center;min-width:0;color:#fff}
.inventory-item-button.white .inventory-item-name{color:#fff}
.element-fire{--element-color:#ef5a50;--element-soft:rgba(239,90,80,.16)}
.element-metal{--element-color:#d6dce3;--element-soft:rgba(214,220,227,.14)}
.element-water{--element-color:#62a8e5;--element-soft:rgba(98,168,229,.15)}
.element-wood{--element-color:#68bd73;--element-soft:rgba(104,189,115,.15)}
.element-earth{--element-color:#d29b50;--element-soft:rgba(210,155,80,.15)}
@media(max-width:760px){.topbar-actions{align-items:stretch;flex-direction:column}.language-switch{justify-content:flex-end}.language-switch>span{margin-right:auto}}


/* Version 1.6 – laufende Questketten */
.quest-title{
  display:block;
  margin:.05rem 0 .28rem;
  color:#f0d387;
  font:1rem Georgia,"Times New Roman",serif
}
.quest-panel #questText{
  min-height:2.8rem;
  line-height:1.35
}
.quest-panel .progress{
  margin-top:.45rem
}


/* Version 2.0 – große Gebietskarte */
.status-actions .map-open-button{
  grid-column:1 / -1;
  background:linear-gradient(#365f51,#203c34)
}

.world-map-backdrop{
  position:fixed;
  inset:0;
  z-index:70;
  background:rgba(4,5,4,.82);
  backdrop-filter:blur(4px)
}

.world-map-window{
  position:fixed;
  z-index:71;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  display:flex;
  flex-direction:column;
  width:min(1180px,calc(100% - 1rem));
  height:min(850px,calc(100dvh - 1rem));
  overflow:hidden;
  border:1px solid #b48643;
  background:
    linear-gradient(rgba(34,28,21,.995),rgba(14,15,12,.995));
  box-shadow:0 30px 90px rgba(0,0,0,.82);
  font-family:system-ui,sans-serif
}

.world-map-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  padding:.75rem .9rem;
  border-bottom:1px solid var(--line);
  background:rgba(77,50,30,.34)
}

.world-map-header h2{
  margin:0;
  color:#efd488;
  font:1.35rem Georgia,"Times New Roman",serif
}

.world-map-subtitle{
  margin:.18rem 0 0;
  color:var(--muted);
  font-size:.72rem
}

.world-map-header-actions{
  display:flex;
  align-items:center;
  gap:.6rem
}

.world-map-coordinates{
  min-width:138px;
  padding:.35rem .5rem;
  border:1px solid var(--line);
  background:#191612;
  color:#d9cda9;
  font-size:.7rem;
  text-align:center
}

.world-map-close{
  display:grid;
  place-items:center;
  width:40px;
  height:40px;
  padding:0;
  background:#302922;
  font-size:1.45rem;
  line-height:1
}

.world-map-body{
  display:grid;
  grid-template-columns:205px minmax(0,1fr) 220px;
  min-height:0;
  flex:1
}

.world-map-sidebar,
.world-map-info{
  min-width:0;
  overflow:auto;
  padding:.75rem;
  background:rgba(24,20,16,.96)
}

.world-map-sidebar{
  border-right:1px solid var(--line)
}

.world-map-info{
  border-left:1px solid var(--line)
}

.world-map-sidebar section + section,
.world-map-info>* + *{
  margin-top:.8rem
}

.world-map-sidebar h3,
.world-map-info h3{
  margin:0 0 .5rem;
  color:#e9c975;
  font:.95rem Georgia,"Times New Roman",serif
}

.world-map-filter,
.world-map-legend>div{
  display:grid;
  grid-template-columns:auto auto minmax(0,1fr);
  align-items:center;
  gap:.42rem;
  min-height:30px;
  color:#ddd1b3;
  font-size:.72rem
}

.world-map-filter{
  cursor:pointer
}

.world-map-filter input{
  margin:0
}

.world-map-legend>div{
  grid-template-columns:auto minmax(0,1fr)
}

.world-map-dot{
  display:inline-block;
  width:11px;
  height:11px;
  border:1px solid rgba(255,255,255,.75);
  border-radius:999px;
  box-shadow:0 0 0 2px rgba(0,0,0,.28)
}

.world-map-dot.player-self{background:#43d36e}
.world-map-dot.player-other{background:#f1d35f}
.world-map-dot.monster{background:#e1524a}
.world-map-dot.npc{background:#4baee8}
.world-map-dot.portal{
  border-radius:2px;
  background:#a979e6;
  transform:rotate(45deg)
}

.world-map-quest-symbol{
  display:inline-grid;
  place-items:center;
  width:17px;
  height:19px;
  color:#f1c75b;
  font:bold 1rem Georgia;
  text-shadow:0 2px 2px #000
}

.world-map-quest-symbol.ready{
  color:#75d38a
}

.world-map-zoom>div{
  display:grid;
  grid-template-columns:38px minmax(0,1fr) 38px;
  gap:.35rem
}

.world-map-zoom button{
  min-width:0;
  padding:.4rem
}

.world-map-zoom>span{
  display:block;
  margin-top:.4rem;
  color:#d8cda9;
  font-size:.72rem;
  text-align:center
}

.world-map-canvas-column{
  min-width:0;
  min-height:0;
  padding:.55rem;
  background:#0d100c
}

.world-map-canvas-wrap{
  position:relative;
  width:100%;
  height:100%;
  min-height:440px;
  overflow:hidden;
  border:1px solid #675334;
  background:#10140f;
  touch-action:none
}

#worldMapCanvas{
  display:block;
  width:100%;
  height:100%;
  background:#10140f;
  cursor:grab;
  touch-action:none;
  user-select:none
}

#worldMapCanvas:active{
  cursor:grabbing
}

.world-map-canvas-tip{
  position:absolute;
  left:.5rem;
  bottom:.5rem;
  max-width:calc(100% - 1rem);
  padding:.3rem .48rem;
  border:1px solid rgba(230,199,123,.28);
  background:rgba(16,14,11,.82);
  color:#cfc2a2;
  font-size:.62rem;
  pointer-events:none
}

.world-map-info>strong{
  display:block;
  color:#f0d387;
  font:1rem Georgia,"Times New Roman",serif
}

.world-map-info>p{
  min-height:4.5rem;
  margin:.35rem 0 0;
  color:#cfc3a5;
  font-size:.72rem;
  line-height:1.55;
  white-space:pre-line
}

.world-map-counts{
  display:grid;
  gap:.3rem;
  padding-top:.75rem;
  border-top:1px solid var(--line)
}

.world-map-counts>div{
  display:flex;
  justify-content:space-between;
  gap:.8rem;
  padding:.25rem 0;
  border-bottom:1px solid rgba(230,199,123,.11);
  color:var(--muted);
  font-size:.7rem
}

.world-map-counts strong{
  color:#f1d98f
}

.world-map-info button{
  width:100%
}

.world-map-footer{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  padding:.5rem .8rem;
  border-top:1px solid var(--line);
  background:#17140f;
  color:#bdb092;
  font-size:.66rem
}

body.world-map-open{
  overflow:hidden
}

@media(max-width:900px){
  .world-map-body{
    grid-template-columns:180px minmax(0,1fr)
  }

  .world-map-info{
    grid-column:1 / -1;
    display:grid;
    grid-template-columns:minmax(180px,.6fr) minmax(0,1fr) auto;
    align-items:start;
    gap:.7rem;
    border-top:1px solid var(--line);
    border-left:0
  }

  .world-map-info h3{
    display:none
  }

  .world-map-info>p{
    min-height:0;
    margin:0
  }

  .world-map-info>* + *{
    margin-top:0
  }

  .world-map-counts{
    grid-template-columns:repeat(4,minmax(0,1fr));
    grid-column:1 / -1
  }
}

@media(max-width:680px){
  .world-map-window{
    width:100%;
    height:100dvh;
    border-width:0
  }

  .world-map-header{
    padding:.55rem .6rem
  }

  .world-map-header-actions{
    gap:.3rem
  }

  .world-map-coordinates{
    display:none
  }

  .world-map-body{
    display:flex;
    flex-direction:column;
    overflow:auto
  }

  .world-map-sidebar{
    display:grid;
    grid-template-columns:1fr auto;
    gap:.55rem;
    overflow:visible;
    padding:.5rem .6rem;
    border-right:0;
    border-bottom:1px solid var(--line)
  }

  .world-map-sidebar section:first-child{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:.25rem .45rem
  }

  .world-map-sidebar section:first-child h3{
    grid-column:1 / -1
  }

  .world-map-filter{
    grid-template-columns:auto auto minmax(0,1fr);
    min-height:28px;
    font-size:.63rem
  }

  .world-map-legend{
    display:none
  }

  .world-map-zoom{
    min-width:185px
  }

  .world-map-canvas-column{
    flex:1 0 420px;
    min-height:420px;
    padding:.35rem
  }

  .world-map-canvas-wrap{
    min-height:410px
  }

  .world-map-info{
    display:block;
    padding:.55rem .65rem;
    border-top:1px solid var(--line)
  }

  .world-map-info>p{
    min-height:0
  }

  .world-map-counts{
    grid-template-columns:repeat(2,minmax(0,1fr));
    margin-top:.55rem!important
  }

  .world-map-info button{
    margin-top:.55rem!important
  }

  .world-map-footer{
    display:none
  }

  .mobile-controls{
    grid-template-columns:repeat(6,1fr)!important
  }

  .mobile-controls button{
    padding:.28rem .1rem!important;
    font-size:.52rem!important
  }
}


/* Version 2.1 – Chat-System */
.status-actions .chat-open-button{
  position:relative;
  grid-column:1 / -1;
  background:linear-gradient(#594a36,#342a20)
}

.chat-unread-total,
.chat-tab-unread{
  display:inline-grid;
  place-items:center;
  min-width:18px;
  height:18px;
  padding:0 4px;
  border-radius:999px;
  background:#b7473e;
  color:#fff;
  font:bold 10px system-ui;
  line-height:1
}

.chat-open-button .chat-unread-total{
  position:absolute;
  right:5px;
  top:4px
}

.chat-panel{
  position:fixed;
  z-index:48;
  left:max(10px,env(safe-area-inset-left));
  bottom:max(10px,env(safe-area-inset-bottom));
  display:flex;
  flex-direction:column;
  width:min(640px,calc(100vw - 20px));
  height:220px;
  min-height:220px;
  overflow:hidden;
  border:1px solid #84653c;
  background:rgba(17,15,12,.97);
  box-shadow:0 18px 55px rgba(0,0,0,.72);
  font-family:system-ui,sans-serif;
  transition:height .18s ease,opacity .18s ease
}

.chat-panel.collapsed{
  width:min(640px,calc(100vw - 20px));
  height:42px;
  min-height:42px
}

.chat-panel.collapsed .chat-body{
  display:none
}

.chat-panel.chat-hidden{
  display:none
}

.chat-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.6rem;
  min-height:42px;
  padding:.38rem .48rem .38rem .62rem;
  border-bottom:1px solid var(--line);
  background:
    linear-gradient(90deg,rgba(105,74,39,.50),rgba(31,26,20,.96))
}

.chat-header>div:first-child{
  display:flex;
  align-items:center;
  min-width:0;
  gap:.5rem
}

.chat-header strong{
  color:#f0d48a;
  font:1rem Georgia,"Times New Roman",serif
}

.chat-connection{
  display:inline-flex;
  align-items:center;
  gap:.3rem;
  color:#b9ad92;
  font-size:.63rem
}

.chat-connection::before{
  content:"";
  width:7px;
  height:7px;
  border-radius:50%;
  background:#9b8a6b
}

.chat-connection.online::before{background:#56c879}
.chat-connection.offline::before{background:#dc655b}
.chat-connection.connecting::before{
  background:#d5ac53;
  animation:chatPulse 1s infinite alternate
}

@keyframes chatPulse{
  from{opacity:.35}
  to{opacity:1}
}

.chat-header-actions{
  display:flex;
  gap:.3rem
}

.chat-header-button{
  display:grid;
  place-items:center;
  width:30px;
  height:29px;
  min-height:0;
  padding:0;
  border-color:#64543d;
  background:#29231c;
  color:#e8d6a7;
  font-weight:bold
}

.chat-body{
  display:grid;
  grid-template-rows:auto auto auto minmax(0,1fr) auto;
  min-height:0;
  flex:1
}

.chat-tabs{
  display:flex;
  min-width:0;
  overflow-x:auto;
  border-bottom:1px solid var(--line);
  background:#181510;
  scrollbar-width:thin
}

.chat-tabs button{
  position:relative;
  flex:0 0 auto;
  min-height:32px;
  padding:.35rem .58rem;
  border:0;
  border-right:1px solid rgba(232,202,126,.13);
  border-radius:0;
  background:transparent;
  color:#bcae8d;
  font-size:.66rem
}

.chat-tabs button:hover:not(:disabled){
  background:rgba(230,195,112,.08)
}

.chat-tabs button.active{
  background:#30271c;
  color:#f3d98f;
  box-shadow:inset 0 -2px #c99c4e
}

.chat-tabs button:disabled{
  opacity:.38;
  cursor:not-allowed
}

.chat-tabs .chat-tab-unread{
  margin-left:.22rem;
  min-width:15px;
  height:15px;
  font-size:8px
}

.chat-tabs [data-chat-channel="region"].active{
  box-shadow:inset 0 -2px #78bd83
}
.chat-tabs [data-chat-channel="private"].active{
  box-shadow:inset 0 -2px #c78de1
}
.chat-tabs [data-chat-channel="world"].active{
  box-shadow:inset 0 -2px #e5b553
}
.chat-tabs [data-chat-channel="system"].active{
  box-shadow:inset 0 -2px #8ba5bb
}
.chat-tabs [data-chat-channel="gm"].active{
  box-shadow:inset 0 -2px #e65b55
}

.chat-channel-notice{
  min-height:24px;
  padding:.3rem .55rem;
  border-bottom:1px solid rgba(232,202,126,.11);
  background:#211c16;
  color:#aa9d81;
  font-size:.61rem;
  line-height:1.35
}

.chat-channel-notice.warning{
  background:#2c2018;
  color:#e0ad79
}

.chat-private-target{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  align-items:center;
  gap:.4rem;
  padding:.34rem .5rem;
  border-bottom:1px solid rgba(232,202,126,.13);
  background:#1c1814
}

.chat-private-target label{
  color:#cab98e;
  font-size:.67rem
}

.chat-private-target input{
  min-width:0;
  height:30px;
  padding:.28rem .45rem
}

.chat-messages{
  min-height:0;
  overflow-y:auto;
  padding:.35rem .45rem .5rem;
  background:
    linear-gradient(rgba(16,15,12,.96),rgba(11,12,10,.98));
  scrollbar-width:thin
}

.chat-message{
  margin:.22rem 0;
  padding:.32rem .4rem;
  border-left:2px solid #827052;
  background:rgba(255,255,255,.022)
}

.chat-message.own{
  background:rgba(213,181,104,.045)
}

.chat-message.channel-region{border-left-color:#70b27c}
.chat-message.channel-nation{border-left-color:#d18d55}
.chat-message.channel-private{border-left-color:#b77bd2}
.chat-message.channel-group{border-left-color:#56a7b8}
.chat-message.channel-guild{border-left-color:#7794d6}
.chat-message.channel-world{border-left-color:#dfad45}
.chat-message.channel-system{border-left-color:#8199ad}
.chat-message.channel-gm{border-left-color:#df554f}

.chat-message-meta{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:.3rem;
  min-width:0;
  color:#817965;
  font-size:.56rem
}

.chat-message-channel{
  padding:.08rem .24rem;
  border:1px solid rgba(232,202,126,.17);
  color:#bbaa87
}

.chat-message-sender{
  min-height:0;
  padding:0;
  border:0;
  background:transparent;
  color:#e8cf8d;
  font:bold .65rem system-ui;
  text-align:left
}

button.chat-message-sender{
  cursor:pointer
}

button.chat-message-sender:hover{
  color:#fff0ba;
  text-decoration:underline
}

.chat-message-target{
  color:#b991ca
}

.chat-message p{
  margin:.18rem 0 0;
  color:#ddd4bd;
  font-size:.72rem;
  line-height:1.35;
  overflow-wrap:anywhere
}

.chat-message.system-message p{
  color:#bfcbd5;
  font-style:italic
}

.chat-message.gm-message p{
  color:#ffd0cb
}

.chat-message-cost{
  display:block;
  margin-top:.18rem;
  color:#d0a953;
  font-size:.54rem
}

.chat-empty{
  display:grid;
  place-items:center;
  min-height:100%;
  margin:0;
  color:#746d5e;
  font-size:.7rem;
  text-align:center
}

.chat-composer{
  padding:.4rem;
  border-top:1px solid var(--line);
  background:#181510
}

.chat-composer textarea{
  display:block;
  width:100%;
  min-height:36px;
  max-height:84px;
  resize:vertical;
  padding:.43rem .5rem;
  border:1px solid #67543a;
  background:#100f0d;
  color:#efe6ce;
  font:inherit
}

.chat-composer textarea:disabled{
  opacity:.48;
  resize:none
}

.chat-composer-bottom{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto auto;
  align-items:center;
  gap:.4rem;
  margin-top:.32rem
}

.chat-cost-hint{
  min-width:0;
  color:#c5a55d;
  font-size:.56rem;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis
}

#chatCharacterCount{
  color:#857c69;
  font-size:.56rem
}

.chat-composer button{
  min-height:30px;
  padding:.3rem .65rem
}

@media(max-width:760px){
  .chat-panel{
    left:4px;
    bottom:124px;
    width:calc(100vw - 8px);
    height:min(390px,55dvh);
    min-height:220px
  }

  .chat-panel.collapsed{
    left:4px;
    bottom:124px;
    width:min(300px,calc(100vw - 8px))
  }

  .chat-tabs button{
    padding:.38rem .5rem
  }

  .chat-message p{
    font-size:.75rem
  }

  .mobile-controls{
    grid-template-columns:repeat(4,1fr)!important
  }
}

@media(max-width:420px){
  .chat-panel{
    height:min(360px,52dvh)
  }

  .chat-channel-notice{
    font-size:.58rem
  }

  .chat-composer-bottom{
    grid-template-columns:minmax(0,1fr) auto
  }

  #chatCharacterCount{
    display:none
  }
}


/* Fix 2.1.4 – Chat in linker Freispalte */
@media(min-width:761px){
  .chat-panel{
    left:12px;
    top:120px;
    bottom:16px;
    width:320px;
    height:auto;
    min-height:240px;
    max-height:none;
    transform:none
  }

  .chat-panel.collapsed{
    left:12px;
    top:auto;
    bottom:16px;
    width:320px;
    height:42px;
    min-height:42px;
    transform:none
  }

  .chat-tabs button{
    padding:.34rem .38rem;
    font-size:.62rem
  }

  .chat-messages{
    padding:.3rem .42rem
  }

  .chat-composer textarea{
    min-height:60px;
    max-height:120px
  }

  .chat-composer-bottom{
    grid-template-columns:minmax(0,1fr) auto auto
  }
}


/* Kleine Nachjustierung für das Dock-Layout */
@media(min-width:761px){
  .chat-header{
    min-height:40px
  }

  .chat-channel-notice{
    min-height:22px;
    padding:.24rem .5rem
  }

  .chat-private-target{
    padding:.28rem .45rem
  }

  .chat-message p{
    font-size:.69rem
  }

  .chat-composer{
    padding:.32rem .4rem
  }
}


/* Kleine Nachjustierung für linkes Layout */
@media(min-width:761px){
  .chat-header{
    min-height:40px
  }

  .chat-channel-notice{
    min-height:22px;
    padding:.24rem .45rem
  }

  .chat-private-target{
    padding:.28rem .4rem
  }

  .chat-message p{
    font-size:.69rem
  }

  .chat-composer{
    padding:.34rem .4rem
  }

  .chat-tabs button{
    padding:.35rem .42rem;
    font-size:.63rem
  }

  #chatCharacterCount{
    font-size:.54rem
  }
}


/* Feintuning für linke Chatspalte */
@media(min-width:761px){
  .chat-header{
    min-height:40px
  }

  .chat-channel-notice{
    min-height:22px;
    padding:.24rem .45rem
  }

  .chat-private-target{
    padding:.28rem .4rem
  }

  .chat-message p{
    font-size:.69rem
  }

  .chat-composer{
    padding:.34rem .4rem
  }

  #chatCharacterCount{
    font-size:.54rem
  }
}


/* =========================================================
   Version 2.3 – Gruppensystem
   ========================================================= */

.status-actions .group-open-button{
  position:relative;
  grid-column:1 / -1;
  background:linear-gradient(#315d58,#203d3a)
}

.group-button-badge{
  position:absolute;
  top:-6px;
  right:-6px;
  min-width:19px;
  height:19px;
  display:grid;
  place-items:center;
  padding:0 .25rem;
  border:1px solid #d8fff9;
  border-radius:999px;
  background:#318f84;
  color:#f2fffd;
  font:bold .62rem system-ui,sans-serif;
  box-shadow:0 2px 7px rgba(0,0,0,.5)
}

.group-button-badge.invite{
  background:#a66c2d;
  border-color:#ffe0a7;
  color:#fff4d5
}

.group-hud{
  position:absolute;
  top:5.35rem;
  right:.75rem;
  width:205px;
  z-index:4;
  border:1px solid rgba(112,218,204,.48);
  background:rgba(16,24,22,.94);
  box-shadow:0 8px 22px rgba(0,0,0,.42);
  font-family:system-ui,sans-serif
}

.group-hud>header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.4rem;
  padding:.42rem .5rem;
  border-bottom:1px solid rgba(112,218,204,.25);
  background:linear-gradient(
    90deg,
    rgba(47,105,98,.6),
    rgba(24,42,39,.75)
  )
}

.group-hud>header div{
  display:flex;
  align-items:baseline;
  gap:.4rem
}

.group-hud>header strong{
  color:#b9fff5;
  font:1rem Georgia,serif
}

.group-hud>header small{
  color:#89cfc6;
  font-size:.57rem
}

.group-hud>header button{
  width:28px;
  min-height:28px;
  padding:0;
  border:1px solid #527d76;
  background:#202e2b;
  color:#d9fff9
}

.group-hud-members{
  display:grid;
  gap:1px
}

.group-hud-member{
  display:grid;
  gap:.22rem;
  width:100%;
  min-height:0;
  padding:.38rem .45rem;
  border:0;
  border-bottom:1px solid rgba(117,169,160,.14);
  background:rgba(12,18,17,.82);
  color:#e8f8f4;
  text-align:left
}

.group-hud-member:hover{
  background:rgba(39,72,67,.85)
}

.group-hud-member.offline{
  opacity:.58
}

.group-hud-member-heading{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.35rem
}

.group-hud-member-heading strong{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:#dffdf8;
  font-size:.68rem
}

.group-hud-member-heading small{
  color:#80d7ca;
  font-size:.52rem
}

.group-hud-member.offline .group-hud-member-heading small{
  color:#9a9a93
}

.group-member-hp{
  height:5px;
  overflow:hidden;
  border:1px solid rgba(0,0,0,.55);
  background:#191916
}

.group-member-hp i{
  display:block;
  height:100%;
  background:linear-gradient(90deg,#2e7d58,#70d59e)
}

.group-hud-member-details{
  color:#9fbcb6;
  font-size:.53rem
}

.group-backdrop{
  position:fixed;
  inset:0;
  z-index:58;
  background:rgba(5,7,6,.77);
  backdrop-filter:blur(2px)
}

.group-window{
  position:fixed;
  top:50%;
  left:50%;
  z-index:59;
  width:min(760px,calc(100% - 1.4rem));
  max-height:min(86vh,820px);
  overflow:auto;
  transform:translate(-50%,-50%);
  border:1px solid #6aafa5;
  background:
    linear-gradient(
      180deg,
      rgba(33,52,48,.98),
      rgba(18,18,15,.99) 170px
    );
  color:#e7e1ce;
  box-shadow:0 24px 70px rgba(0,0,0,.72);
  font-family:system-ui,sans-serif
}

.group-window-header{
  position:sticky;
  top:0;
  z-index:2;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:1rem;
  padding:.8rem .9rem;
  border-bottom:1px solid rgba(115,204,191,.32);
  background:rgba(24,39,36,.98)
}

.group-window-header h2{
  margin:.08rem 0;
  color:#cbfff7;
  font:1.55rem Georgia,serif
}

.group-window-header p{
  margin:.15rem 0 0;
  color:#a5c7c1;
  font-size:.72rem
}

.group-window-header>button{
  width:34px;
  min-height:34px;
  padding:0;
  border:1px solid #668d86;
  background:#1b2927;
  color:#e8fffb;
  font-size:1.15rem
}

.group-notice{
  margin:.7rem .9rem 0;
  padding:.55rem .65rem;
  border:1px solid #4e8c6c;
  background:#193327;
  color:#c9f7dd;
  font-size:.75rem
}

.group-notice.error{
  border-color:#8d4941;
  background:#351c19;
  color:#ffd6cf
}

.group-section{
  margin:.75rem .9rem;
  padding:.75rem;
  border:1px solid rgba(138,174,166,.28);
  background:rgba(18,23,21,.72)
}

.group-section h3{
  margin:0 0 .45rem;
  color:#d1eee8;
  font:1.08rem Georgia,serif
}

.group-section>p{
  margin:.2rem 0 .7rem;
  color:#b9b6a9;
  font-size:.75rem;
  line-height:1.45
}

.group-summary{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.7rem;
  margin-bottom:.65rem
}

.group-summary h3{
  margin:0
}

.group-summary p{
  margin:.12rem 0 0;
  color:#9ec9c0;
  font-size:.67rem
}

.group-summary button{
  flex:0 0 auto;
  background:linear-gradient(#356c65,#234943)
}

.group-invite-form{
  display:grid;
  gap:.35rem;
  margin-top:.65rem
}

.group-invite-form label{
  color:#c5d7d2;
  font-size:.68rem
}

.group-invite-form>div{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:.45rem
}

.group-invite-form input{
  min-width:0;
  padding:.52rem .58rem;
  border:1px solid #526b65;
  background:#101513;
  color:#f3eee0
}

.group-member-list,
.group-invite-list{
  display:grid;
  gap:.45rem
}

.group-member-card{
  display:grid;
  gap:.5rem;
  padding:.58rem;
  border:1px solid #445d57;
  background:#141a18
}

.group-member-card.self{
  border-color:#65baac;
  background:#182824
}

.group-member-card.offline{
  opacity:.64
}

.group-member-main{
  display:grid;
  grid-template-columns:36px minmax(0,1fr);
  gap:.55rem;
  align-items:start
}

.group-member-symbol{
  width:34px;
  height:34px;
  display:grid;
  place-items:center;
  border:1px solid color-mix(
    in srgb,
    var(--member-color,#53657a) 75%,
    white
  );
  border-radius:50%;
  background:color-mix(
    in srgb,
    var(--member-color,#53657a) 65%,
    #111
  );
  color:#f8fff9;
  box-shadow:0 0 10px rgba(82,213,198,.18)
}

.group-member-info{
  min-width:0
}

.group-member-info>div:first-child{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:.5rem
}

.group-member-info strong{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:#e9fff9
}

.group-member-info>div:first-child span{
  color:#79dccc;
  font-size:.61rem
}

.group-member-info>small{
  display:block;
  margin-top:.12rem;
  color:#a7bdb7;
  font-size:.64rem
}

.group-member-health{
  display:grid;
  grid-template-columns:auto minmax(90px,1fr);
  gap:.5rem;
  align-items:center;
  margin-top:.35rem
}

.group-member-health>span:first-child{
  color:#c7ddd7;
  font-size:.61rem
}

.group-member-health>span:last-child{
  height:7px;
  overflow:hidden;
  border:1px solid #26322f;
  background:#0a0d0c
}

.group-member-health i{
  display:block;
  height:100%;
  background:linear-gradient(90deg,#2d855d,#72d89f)
}

.group-member-info em{
  display:block;
  margin-top:.22rem;
  color:#70d7c7;
  font-size:.57rem;
  font-style:normal
}

.group-member-card.offline .group-member-info em{
  color:#99978d
}

.group-member-actions{
  display:flex;
  justify-content:flex-end;
  gap:.4rem;
  padding-top:.45rem;
  border-top:1px solid rgba(117,169,160,.15)
}

.group-member-actions button{
  min-height:32px;
  padding:.35rem .55rem;
  font-size:.64rem
}

.group-invite-card{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.65rem;
  padding:.55rem .6rem;
  border:1px solid #475d58;
  background:#141a18
}

.group-invite-card strong,
.group-invite-card small{
  display:block
}

.group-invite-card strong{
  color:#e5f5f1;
  font-size:.75rem
}

.group-invite-card small{
  margin-top:.14rem;
  color:#9baea9;
  font-size:.61rem
}

.group-inline-actions{
  display:flex;
  gap:.35rem
}

.group-invite-card button{
  min-height:32px;
  padding:.34rem .52rem;
  font-size:.63rem
}

.group-outgoing{
  margin-top:.8rem;
  padding-top:.7rem;
  border-top:1px solid rgba(117,169,160,.2)
}

.group-outgoing h3{
  font-size:.95rem
}

.group-window-actions{
  display:flex;
  justify-content:space-between;
  gap:.55rem;
  margin-top:.85rem;
  padding-top:.7rem;
  border-top:1px solid rgba(117,169,160,.2)
}

.group-window button.secondary,
.group-member-actions button.secondary,
.group-invite-card button.secondary{
  background:linear-gradient(#49473f,#2d2b27)
}

.group-window button.danger,
.group-member-actions button.danger{
  border-color:#874a42;
  background:linear-gradient(#713e36,#3f2420)
}

body.group-window-open{
  overflow:hidden
}

.world-map-dot.group-member{
  background:#54d8ca
}

@media(max-width:760px){
  .group-hud{
    display:none!important
  }

  .group-window{
    top:auto;
    left:.35rem;
    right:.35rem;
    bottom:max(.35rem,env(safe-area-inset-bottom));
    width:auto;
    max-height:88vh;
    transform:none
  }

  .group-window-header{
    padding:.65rem .7rem
  }

  .group-section{
    margin:.55rem .6rem;
    padding:.6rem
  }

  .group-summary{
    align-items:flex-start;
    flex-direction:column
  }

  .group-summary button{
    width:100%
  }

  .group-invite-form>div{
    grid-template-columns:1fr
  }

  .group-member-main{
    grid-template-columns:30px minmax(0,1fr)
  }

  .group-member-symbol{
    width:29px;
    height:29px
  }

  .group-member-health{
    grid-template-columns:1fr
  }

  .group-member-actions,
  .group-inline-actions,
  .group-window-actions{
    flex-wrap:wrap
  }

  .group-member-actions button,
  .group-inline-actions button,
  .group-window-actions button{
    flex:1 1 130px
  }

  .group-invite-card{
    align-items:stretch;
    flex-direction:column
  }

  .mobile-controls{
    grid-template-columns:repeat(4,1fr)!important
  }
}


/* =========================================================
   Version 2.4 – Gildensystem
   ========================================================= */

.status-actions .guild-open-button{
  position:relative;
  grid-column:1 / -1;
  background:linear-gradient(#66502b,#3d301c)
}

.guild-button-badge{
  position:absolute;
  top:-6px;
  right:-6px;
  min-width:19px;
  height:19px;
  display:grid;
  place-items:center;
  padding:0 .25rem;
  border:1px solid #fff0bd;
  border-radius:999px;
  background:#a77b2d;
  color:#fff7d8;
  box-shadow:0 2px 7px rgba(0,0,0,.5);
  font:bold .62rem system-ui,sans-serif
}

.guild-button-badge.invite{
  background:#8e4b30;
  border-color:#ffd0b4
}

.guild-backdrop{
  position:fixed;
  inset:0;
  z-index:60;
  background:rgba(6,5,3,.8);
  backdrop-filter:blur(2px)
}

.guild-window{
  position:fixed;
  top:50%;
  left:50%;
  z-index:61;
  width:min(820px,calc(100% - 1.4rem));
  max-height:min(88vh,860px);
  overflow:auto;
  transform:translate(-50%,-50%);
  border:1px solid #98753a;
  background:
    linear-gradient(
      180deg,
      rgba(69,49,24,.98),
      rgba(22,18,13,.99) 190px
    );
  color:#eee4ca;
  box-shadow:0 25px 75px rgba(0,0,0,.75);
  font-family:system-ui,sans-serif
}

.guild-window-header{
  position:sticky;
  top:0;
  z-index:2;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:1rem;
  padding:.82rem .92rem;
  border-bottom:1px solid rgba(220,177,91,.35);
  background:rgba(48,35,18,.98)
}

.guild-window-header h2{
  margin:.08rem 0;
  color:#ffe7a4;
  font:1.6rem Georgia,serif
}

.guild-window-header p{
  margin:.15rem 0 0;
  color:#cdbd96;
  font-size:.72rem
}

.guild-window-header>button{
  width:34px;
  min-height:34px;
  padding:0;
  border:1px solid #8e7447;
  background:#30261a;
  color:#fff0c5;
  font-size:1.15rem
}

.guild-notice{
  margin:.7rem .9rem 0;
  padding:.55rem .65rem;
  border:1px solid #638557;
  background:#20321d;
  color:#d6f4ca;
  font-size:.75rem
}

.guild-notice.error{
  border-color:#914d42;
  background:#371d19;
  color:#ffd8cf
}

.guild-section{
  margin:.75rem .9rem;
  padding:.78rem;
  border:1px solid rgba(178,143,76,.3);
  background:rgba(24,20,14,.78)
}

.guild-section h3{
  margin:0 0 .45rem;
  color:#f5d98d;
  font:1.1rem Georgia,serif
}

.guild-section p{
  color:#bfb49a;
  font-size:.74rem;
  line-height:1.45
}

.guild-creation-heading{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:.8rem;
  margin-bottom:.75rem
}

.guild-creation-heading p{
  margin:.2rem 0 0
}

.guild-creation-cost{
  flex:0 0 auto;
  min-width:180px;
  padding:.55rem .65rem;
  border:1px solid #8c713d;
  background:#2b2418;
  text-align:right
}

.guild-creation-cost small,
.guild-creation-cost strong{
  display:block
}

.guild-creation-cost small{
  color:#b9a983;
  font-size:.6rem;
  text-transform:uppercase;
  letter-spacing:.06em
}

.guild-creation-cost strong{
  margin-top:.2rem;
  color:#ffe099;
  font-size:.78rem
}

.guild-create-form{
  display:grid;
  grid-template-columns:minmax(0,1fr) 150px;
  gap:.6rem
}

.guild-create-form label{
  display:grid;
  gap:.28rem
}

.guild-create-form input,
.guild-create-form textarea,
.guild-invite-form input,
.guild-description-form textarea{
  width:100%;
  padding:.54rem .58rem;
  border:1px solid #67583d;
  background:#11100d;
  color:#f4ecd9
}

.guild-description-field{
  grid-column:1 / -1
}

.guild-create-form>button{
  grid-column:1 / -1
}

.guild-disabled{
  padding:.6rem;
  border:1px solid #8e5047;
  background:#351f1a;
  color:#ffd4c8
}

.guild-banner{
  display:grid;
  grid-template-columns:62px minmax(0,1fr) auto;
  gap:.7rem;
  align-items:center;
  margin-bottom:.7rem;
  padding:.65rem;
  border:1px solid #80683a;
  background:linear-gradient(90deg,#332719,#211b13)
}

.guild-banner-tag{
  width:58px;
  height:58px;
  display:grid;
  place-items:center;
  border:2px solid #e0b85c;
  border-radius:8px 8px 18px 18px;
  background:
    linear-gradient(135deg,#50371f,#241912);
  color:#ffe7a3;
  font:bold .82rem Georgia,serif;
  box-shadow:
    inset 0 0 14px rgba(255,207,95,.12),
    0 0 13px rgba(194,143,47,.16)
}

.guild-banner h3{
  margin:0
}

.guild-banner p{
  margin:.15rem 0 0;
  color:#baa982;
  font-size:.65rem
}

.guild-description-display{
  margin-bottom:.7rem;
  padding:.6rem;
  border-left:3px solid #a57c35;
  background:#18150f;
  color:#d7ccb4;
  white-space:pre-wrap;
  font-size:.73rem
}

.guild-description-form{
  display:grid;
  gap:.45rem;
  margin-bottom:.8rem
}

.guild-member-heading{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:.5rem
}

.guild-member-heading h3{
  margin:0
}

.guild-member-heading span{
  color:#c5aa6b;
  font-size:.65rem
}

.guild-member-list,
.guild-invite-list{
  display:grid;
  gap:.45rem
}

.guild-member-card{
  display:grid;
  grid-template-columns:38px minmax(0,1fr) auto;
  gap:.55rem;
  align-items:center;
  padding:.58rem;
  border:1px solid #55472f;
  background:#17140f
}

.guild-member-card.self{
  border-color:#a68037;
  background:#211b11
}

.guild-member-card.offline{
  opacity:.62
}

.guild-rank-symbol{
  width:36px;
  height:36px;
  display:grid;
  place-items:center;
  border:1px solid #75613b;
  border-radius:50%;
  background:#2b2318;
  color:#e1c278
}

.guild-rank-symbol.leader{
  border-color:#e0b854;
  color:#ffe391
}

.guild-rank-symbol.officer{
  border-color:#b88f52;
  color:#e8bd72
}

.guild-member-info{
  min-width:0
}

.guild-member-info>div{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:.5rem
}

.guild-member-info strong{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:#fff0bf
}

.guild-member-info span{
  color:#c9aa68;
  font-size:.61rem
}

.guild-member-info small{
  display:block;
  margin-top:.15rem;
  color:#aaa087;
  font-size:.64rem
}

.guild-member-info em{
  display:block;
  margin-top:.2rem;
  color:#8fc77c;
  font-size:.58rem;
  font-style:normal
}

.guild-member-card.offline .guild-member-info em{
  color:#8f8a7d
}

.guild-member-actions{
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-end;
  gap:.35rem
}

.guild-member-actions button,
.guild-invite-card button{
  min-height:31px;
  padding:.32rem .5rem;
  font-size:.62rem
}

.guild-invite-form{
  display:grid;
  gap:.35rem;
  margin-top:.75rem;
  padding-top:.7rem;
  border-top:1px solid rgba(171,138,73,.22)
}

.guild-invite-form>div{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:.45rem
}

.guild-outgoing{
  margin-top:.8rem;
  padding-top:.7rem;
  border-top:1px solid rgba(171,138,73,.22)
}

.guild-invite-card{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.65rem;
  padding:.55rem .6rem;
  border:1px solid #5b4b31;
  background:#17140f
}

.guild-invite-card strong,
.guild-invite-card small{
  display:block
}

.guild-invite-card strong{
  color:#f2dfac;
  font-size:.74rem
}

.guild-invite-card small{
  margin-top:.14rem;
  color:#a89c83;
  font-size:.61rem
}

.guild-inline-actions{
  display:flex;
  gap:.35rem
}

.guild-window-actions{
  display:flex;
  justify-content:space-between;
  gap:.55rem;
  margin-top:.85rem;
  padding-top:.7rem;
  border-top:1px solid rgba(171,138,73,.22)
}

.guild-window button.secondary,
.guild-member-actions button.secondary,
.guild-invite-card button.secondary{
  background:linear-gradient(#494338,#2e2921)
}

.guild-window button.danger,
.guild-member-actions button.danger{
  border-color:#8d4c42;
  background:linear-gradient(#733c34,#40221e)
}

body.guild-window-open{
  overflow:hidden
}

.world-map-dot.guild-member{
  background:#d7a84b
}

@media(max-width:760px){
  .guild-window{
    top:auto;
    left:.35rem;
    right:.35rem;
    bottom:max(.35rem,env(safe-area-inset-bottom));
    width:auto;
    max-height:89vh;
    transform:none
  }

  .guild-window-header{
    padding:.65rem .7rem
  }

  .guild-section{
    margin:.55rem .6rem;
    padding:.62rem
  }

  .guild-creation-heading{
    flex-direction:column
  }

  .guild-creation-cost{
    width:100%;
    text-align:left
  }

  .guild-create-form{
    grid-template-columns:1fr
  }

  .guild-description-field,
  .guild-create-form>button{
    grid-column:auto
  }

  .guild-banner{
    grid-template-columns:52px minmax(0,1fr)
  }

  .guild-banner-tag{
    width:48px;
    height:48px
  }

  .guild-banner>button{
    grid-column:1 / -1;
    width:100%
  }

  .guild-member-card{
    grid-template-columns:32px minmax(0,1fr)
  }

  .guild-rank-symbol{
    width:30px;
    height:30px
  }

  .guild-member-actions{
    grid-column:1 / -1
  }

  .guild-member-actions button{
    flex:1 1 130px
  }

  .guild-invite-form>div{
    grid-template-columns:1fr
  }

  .guild-invite-card{
    align-items:stretch;
    flex-direction:column
  }

  .guild-inline-actions,
  .guild-window-actions{
    flex-wrap:wrap
  }

  .guild-inline-actions button,
  .guild-window-actions button{
    flex:1 1 130px
  }

  .mobile-controls{
    grid-template-columns:repeat(3,1fr)!important
  }
}


/* =========================================================
   Version 2.5 – Nationenwahl
   ========================================================= */

.status-actions .nation-open-button{
  position:relative;
  grid-column:1 / -1;
  background:linear-gradient(#4c3b67,#2d243d)
}

.nation-button-badge{
  position:absolute;
  top:-6px;
  right:-6px;
  min-width:20px;
  height:20px;
  display:grid;
  place-items:center;
  padding:0 .26rem;
  border:1px solid #ead9ff;
  border-radius:999px;
  background:#6e4e91;
  color:#fff5ff;
  box-shadow:0 2px 8px rgba(0,0,0,.52);
  font:bold .62rem system-ui,sans-serif
}

.nation-button-badge.ready{
  background:#b07630;
  border-color:#ffe0a9;
  animation:nationBadgePulse 1.35s ease-in-out infinite
}

.nation-button-badge.chosen{
  background:#51416d;
  border-color:#e5d1ff
}

.nation-button-badge.locked{
  background:#38343c;
  border-color:#8e8794;
  color:#d0cad4
}

@keyframes nationBadgePulse{
  0%,100%{box-shadow:0 2px 8px rgba(0,0,0,.52)}
  50%{box-shadow:0 0 15px rgba(233,185,91,.62)}
}

.nation-backdrop{
  position:fixed;
  inset:0;
  z-index:62;
  background:rgba(5,4,8,.82);
  backdrop-filter:blur(2px)
}

.nation-window{
  position:fixed;
  top:50%;
  left:50%;
  z-index:63;
  width:min(920px,calc(100% - 1.4rem));
  max-height:min(90vh,900px);
  overflow:auto;
  transform:translate(-50%,-50%);
  border:1px solid #8266a3;
  background:
    radial-gradient(
      circle at 50% -20%,
      rgba(137,97,174,.22),
      transparent 46%
    ),
    linear-gradient(
      180deg,
      rgba(47,35,61,.99),
      rgba(18,15,22,.995) 210px
    );
  color:#eee8f2;
  box-shadow:0 28px 82px rgba(0,0,0,.78);
  font-family:system-ui,sans-serif
}

.nation-window-header{
  position:sticky;
  top:0;
  z-index:3;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:1rem;
  padding:.85rem .95rem;
  border-bottom:1px solid rgba(191,151,226,.32);
  background:rgba(38,28,48,.98)
}

.nation-window-header h2{
  margin:.08rem 0;
  color:#efd8ff;
  font:1.65rem Georgia,serif
}

.nation-window-header p{
  margin:.15rem 0 0;
  color:#c3b2ce;
  font-size:.73rem
}

.nation-window-header>button{
  width:35px;
  min-height:35px;
  padding:0;
  border:1px solid #806c91;
  background:#2a2330;
  color:#f7eaff;
  font-size:1.18rem
}

.nation-notice{
  margin:.72rem .92rem 0;
  padding:.58rem .68rem;
  border:1px solid #5b8966;
  background:#1d3423;
  color:#d8f5df;
  font-size:.76rem
}

.nation-notice.error{
  border-color:#914f46;
  background:#371e1b;
  color:#ffd9d1
}

.nation-section{
  margin:.78rem .92rem;
  padding:.85rem;
  border:1px solid rgba(166,134,190,.3);
  background:rgba(22,18,27,.8)
}

#nationLockedSection,
#nationReferralSection{
  display:grid;
  grid-template-columns:72px minmax(0,1fr);
  gap:.8rem;
  align-items:start
}

.nation-status-symbol{
  width:68px;
  height:68px;
  display:grid;
  place-items:center;
  border:2px solid #c49b52;
  border-radius:50%;
  background:
    radial-gradient(circle,#5b4525,#211a12 72%);
  color:#ffe4a3;
  box-shadow:
    inset 0 0 18px rgba(255,213,120,.12),
    0 0 18px rgba(198,146,65,.18);
  font:2rem Georgia,serif
}

.nation-status-symbol.advisor{
  border-color:#aa7dce;
  background:
    radial-gradient(circle,#4b345f,#211829 72%);
  color:#ebd0ff;
  box-shadow:
    inset 0 0 18px rgba(225,177,255,.12),
    0 0 18px rgba(161,101,204,.2)
}

.nation-section h3{
  margin:0 0 .38rem;
  color:#f0dcff;
  font:1.18rem Georgia,serif
}

.nation-section p{
  margin:.15rem 0;
  color:#c4bac9;
  font-size:.75rem;
  line-height:1.5
}

.nation-requirements{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:.48rem;
  margin-top:.7rem
}

.nation-requirements>div{
  padding:.52rem .58rem;
  border:1px solid #574b60;
  background:#17141b
}

.nation-requirements span,
.nation-requirements strong{
  display:block
}

.nation-requirements span{
  color:#aaa0af;
  font-size:.59rem;
  text-transform:uppercase;
  letter-spacing:.05em
}

.nation-requirements strong{
  margin-top:.2rem;
  color:#e5c58a;
  font-size:.76rem
}

.nation-requirements strong.complete{
  color:#81d99a
}

.nation-choice-intro{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:1rem;
  margin-bottom:.75rem
}

.nation-choice-intro span{
  flex:0 0 auto;
  padding:.45rem .58rem;
  border:1px solid #9a684f;
  background:#3a241d;
  color:#ffd4be;
  font-size:.65rem;
  font-weight:700
}

.nation-card-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:.58rem
}

.nation-card{
  position:relative;
  display:grid;
  grid-template-columns:58px minmax(0,1fr);
  gap:.55rem .7rem;
  align-items:start;
  overflow:hidden;
  padding:.65rem;
  border:1px solid color-mix(
    in srgb,
    var(--nation-color,#d2ad52) 65%,
    #5b5361
  );
  background:
    linear-gradient(
      135deg,
      color-mix(
        in srgb,
        var(--nation-dark,#2a2417) 88%,
        #17131c
      ),
      #151219
    )
}

.nation-card::after{
  content:"";
  position:absolute;
  inset:auto -25px -45px auto;
  width:115px;
  height:115px;
  border-radius:50%;
  background:var(--nation-color,#d2ad52);
  opacity:.055;
  pointer-events:none
}

.nation-card-symbol{
  grid-row:1 / 3;
  width:56px;
  height:56px;
  display:grid;
  place-items:center;
  border:2px solid var(--nation-color,#d2ad52);
  border-radius:50%;
  background:var(--nation-dark,#2a2417);
  color:var(--nation-color,#d2ad52);
  box-shadow:0 0 14px color-mix(
    in srgb,
    var(--nation-color,#d2ad52) 28%,
    transparent
  );
  font:1.65rem Georgia,serif
}

.nation-card-heading{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:.45rem
}

.nation-card h4{
  margin:0;
  color:color-mix(
    in srgb,
    var(--nation-color,#d2ad52) 80%,
    white
  );
  font:1.15rem Georgia,serif
}

.nation-card-heading small{
  color:#a99fae;
  font-size:.57rem;
  letter-spacing:.08em
}

.nation-card p{
  grid-column:2;
  min-height:3.3em;
  margin:0;
  color:#bbb1c0;
  font-size:.68rem;
  line-height:1.43
}

.nation-card button{
  grid-column:1 / -1;
  margin-top:.1rem;
  border-color:var(--nation-color,#d2ad52);
  background:
    linear-gradient(
      color-mix(
        in srgb,
        var(--nation-color,#d2ad52) 42%,
        #333
      ),
      var(--nation-dark,#2a2417)
    )
}

.nation-chosen-banner{
  display:grid;
  grid-template-columns:86px minmax(0,1fr);
  gap:.85rem;
  align-items:center;
  padding:.9rem;
  border:1px solid var(--nation-color,#d2ad52);
  background:
    linear-gradient(
      110deg,
      var(--nation-dark,#2a2417),
      #17131b
    )
}

.nation-chosen-banner>span{
  width:82px;
  height:82px;
  display:grid;
  place-items:center;
  border:3px solid var(--nation-color,#d2ad52);
  border-radius:50%;
  color:var(--nation-color,#d2ad52);
  box-shadow:0 0 20px color-mix(
    in srgb,
    var(--nation-color,#d2ad52) 35%,
    transparent
  );
  font:2.35rem Georgia,serif
}

.nation-chosen-banner small{
  color:#aaa0af;
  font-size:.61rem;
  text-transform:uppercase;
  letter-spacing:.07em
}

.nation-chosen-banner h3{
  margin:.12rem 0 .25rem;
  color:color-mix(
    in srgb,
    var(--nation-color,#d2ad52) 78%,
    white
  );
  font-size:1.65rem
}

.nation-chosen-banner p{
  margin:0;
  max-width:650px
}

.nation-chosen-actions{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.75rem;
  margin-top:.75rem
}

.nation-chosen-actions p{
  margin:0;
  color:#9f96a5;
  font-size:.65rem
}

body.nation-window-open{
  overflow:hidden
}

@media(max-width:760px){
  .nation-window{
    top:auto;
    left:.35rem;
    right:.35rem;
    bottom:max(.35rem,env(safe-area-inset-bottom));
    width:auto;
    max-height:90vh;
    transform:none
  }

  .nation-window-header{
    padding:.67rem .72rem
  }

  .nation-section{
    margin:.56rem .62rem;
    padding:.65rem
  }

  #nationLockedSection,
  #nationReferralSection{
    grid-template-columns:52px minmax(0,1fr)
  }

  .nation-status-symbol{
    width:50px;
    height:50px;
    font-size:1.45rem
  }

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

  .nation-choice-intro{
    flex-direction:column
  }

  .nation-choice-intro span{
    width:100%
  }

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

  .nation-card{
    grid-template-columns:50px minmax(0,1fr)
  }

  .nation-card-symbol{
    width:48px;
    height:48px;
    font-size:1.35rem
  }

  .nation-chosen-banner{
    grid-template-columns:64px minmax(0,1fr)
  }

  .nation-chosen-banner>span{
    width:62px;
    height:62px;
    font-size:1.8rem
  }

  .nation-chosen-actions{
    align-items:stretch;
    flex-direction:column
  }

  .nation-chosen-actions button{
    width:100%
  }

  .mobile-controls{
    grid-template-columns:repeat(4,1fr)!important
  }
}


/* =========================================================
   Fix 2.5.2 – getrennte Charakter- und Spielmenüleiste
   ========================================================= */

.game-layout{
  position:relative
}

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

.desktop-command-dock{
  margin-top:.55rem;
  border:1px solid rgba(222,188,111,.35);
  background:
    linear-gradient(
      180deg,
      rgba(37,30,22,.98),
      rgba(17,15,12,.98)
    );
  box-shadow:0 12px 30px rgba(0,0,0,.4);
  font-family:system-ui,sans-serif
}

.desktop-command-dock-header{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:.6rem;
  padding:.5rem .62rem;
  border-bottom:1px solid rgba(230,199,123,.2);
  background:rgba(52,40,27,.74)
}

.desktop-command-dock-header span{
  color:#f0d387;
  font:1rem Georgia,"Times New Roman",serif
}

.desktop-command-dock-header small{
  color:#a99d82;
  font-size:.58rem
}

.desktop-command-dock-buttons{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:.42rem;
  padding:.55rem
}

.desktop-command-dock .small-button{
  position:relative;
  min-height:38px
}

.desktop-command-dock .map-open-button{
  background:linear-gradient(#365f51,#203c34)
}

.desktop-command-dock .chat-open-button{
  background:linear-gradient(#594a36,#342a20)
}

.desktop-command-dock .group-open-button{
  background:linear-gradient(#315d58,#203d3a)
}

.desktop-command-dock .guild-open-button{
  background:linear-gradient(#66502b,#3d301c)
}

.desktop-command-dock .nation-open-button{
  background:linear-gradient(#4c3b67,#2d243d)
}

/*
 * Auf breiten Desktop-Bildschirmen sitzt das Menü im freien Bereich
 * rechts neben dem Spiel. Die Spielkarte selbst behält ihre Größe.
 */
@media(min-width:1320px){
  .desktop-command-dock{
    position:absolute;
    top:0;
    left:calc(100% + 16px);
    width:176px;
    margin-top:0
  }

  .desktop-command-dock-header{
    display:block;
    padding:.6rem .65rem
  }

  .desktop-command-dock-header span,
  .desktop-command-dock-header small{
    display:block
  }

  .desktop-command-dock-header small{
    margin-top:.15rem
  }

  .desktop-command-dock-buttons{
    grid-template-columns:1fr;
    gap:.48rem;
    padding:.6rem
  }

  .desktop-command-dock .small-button{
    min-height:41px
  }
}

/*
 * Auf mittleren Desktop-Bildschirmen wird die Leiste platzsparend
 * unter dem Spielfeld angeordnet. So ragt nichts aus dem Bildschirm.
 */
@media(min-width:761px) and (max-width:1319px){
  .desktop-command-dock{
    width:100%
  }
}

/*
 * Auf Handy und Tablet bleiben die bereits vorhandenen mobilen
 * Steuerknöpfe zuständig.
 */
@media(max-width:760px){
  .desktop-command-dock{
    display:none
  }
}


/* =========================================================
   Version 2.6 – Rasterinventar mit 5 × 6 Feldern
   ========================================================= */

.inventory-window-v26{
  width:min(900px,94%);
  max-height:94%
}

.inventory-window-body-v26{
  grid-template-columns:minmax(360px,1.12fr) minmax(260px,.88fr)
}

.inventory-items-section-v26{
  min-height:0
}

.inventory-items-heading{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:.75rem;
  margin-bottom:.55rem
}

.inventory-items-heading h3{
  margin:0;
  color:#e8c06a;
  font:1rem Georgia,"Times New Roman",serif
}

.inventory-items-heading>div>span{
  display:block;
  margin-top:.12rem;
  color:var(--muted);
  font-size:.64rem
}

.inventory-page-tabs{
  display:grid;
  grid-template-columns:repeat(4,38px);
  gap:.32rem
}

.inventory-page-button{
  position:relative;
  min-width:38px;
  width:38px;
  min-height:34px;
  padding:0;
  border:1px solid #8c7040;
  background:#3b2e1e;
  color:#f0d387;
  font:bold .78rem system-ui,sans-serif
}

.inventory-page-button.active{
  border-color:#f0c968;
  background:#68472b;
  box-shadow:
    inset 0 0 0 1px rgba(255,225,148,.2),
    0 0 9px rgba(224,172,71,.2)
}

.inventory-page-button.locked{
  border-color:#8b3e39;
  background:#351b19;
  color:#ef625c;
  text-shadow:0 1px 2px #000
}

.inventory-grid-v26{
  display:grid;
  grid-template-columns:repeat(5,60px);
  grid-template-rows:repeat(6,60px);
  justify-content:center;
  gap:.42rem;
  max-height:none;
  overflow:visible;
  padding:0
}

.inventory-slot-button{
  position:relative;
  min-width:0;
  min-height:0;
  padding:.22rem;
  overflow:hidden;
  border:2px solid var(--quality-color,rgba(230,199,123,.18));
  border-radius:3px;
  background:
    radial-gradient(
      circle at 50% 42%,
      rgba(78,64,45,.34),
      rgba(18,15,11,.96) 72%
    );
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.025),
    inset 0 0 15px rgba(0,0,0,.42);
  color:#e9dcc0;
  text-align:left;
  touch-action:manipulation
}

.inventory-slot-button:hover{
  border-color:var(--quality-color,#d0a85d);
  transform:translateY(-1px);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.04),
    0 4px 12px rgba(0,0,0,.35)
}

.inventory-slot-button.empty{
  border:1px solid rgba(230,199,123,.14);
  background:
    linear-gradient(
      135deg,
      rgba(34,29,22,.66),
      rgba(12,11,9,.82)
    )
}

.inventory-slot-button.selected{
  outline:2px solid #f1d080;
  outline-offset:1px;
  box-shadow:
    inset 0 0 14px color-mix(
      in srgb,
      var(--quality-color,#d0a85d) 24%,
      transparent
    ),
    0 0 13px rgba(234,190,94,.35)
}

.inventory-slot-button.move-source{
  animation:inventoryMovePulse 1.05s ease-in-out infinite
}

.inventory-slot-button.drop-target{
  outline:2px dashed #fff0ae;
  outline-offset:2px;
  background:
    radial-gradient(
      circle,
      rgba(224,190,105,.23),
      rgba(18,15,11,.96) 72%
    )
}

.inventory-slot-button.dragging{
  opacity:.48
}

@keyframes inventoryMovePulse{
  0%,100%{
    box-shadow:0 0 5px rgba(224,190,105,.22)
  }
  50%{
    box-shadow:0 0 17px rgba(224,190,105,.62)
  }
}

.inventory-slot-icon{
  position:absolute;
  inset:7px 7px 9px;
  display:grid;
  place-items:center;
  color:var(--quality-color,#e7c779);
  font:1.35rem Georgia,"Times New Roman",serif;
  pointer-events:none
}

.inventory-slot-icon img{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
  filter:drop-shadow(0 2px 2px rgba(0,0,0,.68))
}

.inventory-slot-quantity{
  position:absolute;
  right:3px;
  bottom:2px;
  z-index:2;
  min-width:17px;
  padding:0 2px;
  color:var(--quality-color,#f4f4f4);
  font:bold .72rem system-ui,sans-serif;
  line-height:1.1;
  text-align:right;
  text-shadow:
    -1px -1px 0 #000,
    1px -1px 0 #000,
    -1px 1px 0 #000,
    1px 1px 0 #000,
    0 2px 3px #000;
  pointer-events:none
}

.inventory-slot-level{
  position:absolute;
  top:2px;
  left:3px;
  z-index:2;
  color:#d7caaa;
  font:bold .49rem system-ui,sans-serif;
  text-shadow:0 1px 2px #000;
  pointer-events:none
}

.inventory-slot-number{
  position:absolute;
  right:4px;
  bottom:2px;
  color:rgba(191,174,139,.18);
  font:.52rem system-ui,sans-serif;
  pointer-events:none
}

.inventory-grid-hint{
  margin:.52rem 0 0;
  color:#978b73;
  font-size:.61rem;
  line-height:1.35
}

.inventory-detail-section-v26{
  min-height:0;
  align-content:start
}

.inventory-detail-section-v26 .item-detail-icon{
  border:2px solid var(--quality-color,rgba(230,199,123,.35));
  background-color:#191510;
  background-position:center;
  background-repeat:no-repeat;
  background-size:82%
}

.inventory-detail-section-v26 .item-rarity{
  color:var(--quality-color,var(--muted))
}

.inventory-detail-actions{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:.4rem
}

.inventory-detail-actions #itemUseButton{
  grid-column:1 / -1
}

.inventory-detail-actions button{
  min-height:36px
}

.inventory-detail-actions button.secondary{
  background:linear-gradient(#49443a,#2d2922)
}

.inventory-window-footer-v26{
  align-items:center
}

.inventory-window-footer-v26 #inventoryMoveStatus{
  color:#c9b98f
}

.inventory-slot-button.quality-white{
  --quality-color:#f4f4f4
}

.inventory-slot-button.quality-blue{
  --quality-color:#5ca4ff
}

.inventory-slot-button.quality-green{
  --quality-color:#68cf78
}

.inventory-slot-button.quality-yellow{
  --quality-color:#f0cf52
}

.inventory-slot-button.quality-red{
  --quality-color:#ef655c
}

.item-rarity.quality-white{--quality-color:#f4f4f4}
.item-rarity.quality-blue{--quality-color:#5ca4ff}
.item-rarity.quality-green{--quality-color:#68cf78}
.item-rarity.quality-yellow{--quality-color:#f0cf52}
.item-rarity.quality-red{--quality-color:#ef655c}

@media(max-width:760px){
  .inventory-window-v26{
    width:96%;
    max-height:94%
  }

  .inventory-window-body-v26{
    grid-template-columns:1fr
  }

  .inventory-items-heading{
    align-items:flex-start;
    flex-direction:column
  }

  .inventory-page-tabs{
    width:100%;
    grid-template-columns:repeat(4,1fr)
  }

  .inventory-page-button{
    width:100%
  }

  .inventory-grid-v26{
    grid-template-columns:repeat(5,52px);
    grid-template-rows:repeat(6,52px);
    justify-content:center;
    gap:.3rem
  }

  .inventory-slot-icon{
    inset:6px 6px 8px
  }

  .inventory-window-footer-v26{
    flex-direction:column;
    align-items:flex-start
  }
}

@media(max-width:390px){
  .inventory-window-body-v26{
    padding:.55rem
  }

  .inventory-items-section-v26,
  .inventory-detail-section-v26{
    padding:.5rem
  }

  .inventory-grid-v26{
    grid-template-columns:repeat(5,47px);
    grid-template-rows:repeat(6,47px)
  }
}