/* =========================================================
   ARCANIS ULTRA v5.5 – RUNENARENA
   Komplettes Spielfeld-Redesign nach der verbindlichen Vorschau
   ========================================================= */
#game{
  --side-w: clamp(220px,18vw,340px);
  --hud-h: 74px;
  --dock-h: clamp(205px,27vh,310px);
  --game-gold:#d7a84e;
  --game-gold2:#ffe09a;
  --game-red:#e94b3f;
  --game-blue:#58cef6;
  --game-green:#73d95f;
  --game-purple:#b878ff;
  background:#020407;
  overflow:hidden;
  font-family:Inter,system-ui,sans-serif;
}
#game.active{display:grid!important;grid-template-rows:var(--hud-h) 1fr var(--dock-h)}
#game .hud{
  position:relative!important;inset:auto!important;height:var(--hud-h)!important;
  border-radius:0!important;border:0!important;border-bottom:1px solid #9e7838!important;
  background:linear-gradient(180deg,#05080d 0%,#070b10 72%,#020407 100%)!important;
  box-shadow:0 8px 35px #000!important;padding:0 var(--side-w);z-index:100;
}
#game .hud:before{
  content:"ARCANIS";position:absolute;left:28px;top:11px;
  font:900 clamp(21px,2.2vw,38px) Georgia,serif;letter-spacing:.08em;color:var(--game-gold2);
  text-shadow:0 2px #5e3a0d,0 0 22px #bb743855;
}
#game .hud:after{
  content:"ULTRA · RUNENARENA";position:absolute;left:31px;top:47px;
  font-size:8px;letter-spacing:.28em;color:#9e8b63;
}
#game .hud .roundbtn{position:absolute;top:15px;border-radius:10px;border-color:#83652e;background:#090e14}
#game .hud #pauseBtn{right:90px;left:auto}
#game .hud #scoreBtn{right:28px}
#game .hud>div{min-width:130px}
#game .hud small{font-size:9px;color:#8d8065}
#game .hud b{font-size:16px;color:#e7c372}

#game .arena{
  position:relative!important;inset:auto!important;overflow:hidden;
  background:
    linear-gradient(90deg,rgba(3,5,8,.92) 0 var(--side-w),transparent calc(var(--side-w) + 110px),transparent calc(100% - var(--side-w) - 110px),rgba(3,5,8,.92) calc(100% - var(--side-w)) 100%),
    radial-gradient(circle at 50% 50%,transparent 0 28%,rgba(1,3,5,.15) 58%,rgba(0,0,0,.8) 100%),
    url('assets/arcanis-arena-preview.png') center 48%/cover no-repeat!important;
  perspective:none!important;isolation:isolate;
}
#game .arena:before{
  content:"";position:absolute!important;left:50%!important;top:51%!important;
  width:min(68vw,1040px)!important;height:min(68vw,1040px)!important;aspect-ratio:1!important;
  transform:translate(-50%,-50%)!important;rotate:none!important;border-radius:50%!important;
  border:5px solid #a8762e!important;
  background:
   repeating-radial-gradient(circle,transparent 0 9%,rgba(203,153,72,.11) 9.2% 9.8%,transparent 10% 16%),
   repeating-conic-gradient(from 0deg,rgba(78,193,238,.16) 0 1deg,transparent 1deg 22.5deg),
   radial-gradient(circle at 50% 50%,#3b3025 0 17%,#241f1a 18% 38%,#161718 39% 60%,#080b0e 61% 74%,#020407 75%)!important;
  box-shadow:
   0 0 0 8px #241706,0 0 0 12px #ae7732aa,
   0 0 70px #e77d2435,0 0 130px #6333a733,
   inset 0 0 85px #000,inset 0 0 0 2px #e4b85d44!important;
  z-index:0!important;
}
#game .arena:after{
  content:"ᚨ ᚱ ᚲ ᚨ ᚾ ᛁ ᛊ  ✦  ᚹ ᛁ ᛉ ᚨ ᚱ ᛞ";
  position:absolute!important;left:50%!important;top:51%!important;
  width:min(54vw,820px)!important;height:min(54vw,820px)!important;
  transform:translate(-50%,-50%)!important;border-radius:50%!important;
  display:grid!important;place-items:center!important;
  border:2px solid #62d6ff66!important;color:#73dcff55!important;
  font-size:clamp(14px,1.4vw,23px)!important;letter-spacing:1.4em!important;text-indent:1.4em!important;
  animation:v55RunePulse 3.5s ease-in-out infinite!important;z-index:1!important;
}
@keyframes v55RunePulse{50%{filter:brightness(1.7);box-shadow:0 0 55px #45d7ff55,inset 0 0 50px #cc6d3030}}
#game .weather{opacity:.08}
#game .arcane-fog{position:absolute;inset:0;z-index:1;pointer-events:none;background:radial-gradient(ellipse at 50% 80%,#673b8a20,transparent 55%)}
#game .torch{z-index:2}
#game .torch-a{left:calc(var(--side-w) + 10px);top:50%}
#game .torch-b{right:calc(var(--side-w) + 10px);top:50%}
#game .rune-ring{left:50%!important;top:51%!important;inset:auto!important;width:min(62vw,940px)!important;height:min(62vw,940px)!important;transform:translate(-50%,-50%);z-index:2!important;border:1px dashed #d89b4577!important}
#game .table-sigil{left:50%!important;top:51%!important;z-index:2!important;font-size:clamp(24px,3vw,52px)!important;color:#c79445!important;opacity:.2!important}

/* Side dashboard */
.v55-side{
  position:absolute;top:16px;bottom:18px;width:var(--side-w);z-index:18;
  display:flex;flex-direction:column;gap:12px;padding:0 14px;pointer-events:none;
}
.v55-side.left{left:0}.v55-side.right{right:0}
.v55-panel{
  pointer-events:auto;background:linear-gradient(145deg,rgba(6,11,16,.96),rgba(2,5,8,.96));
  border:1px solid #83632e;border-radius:13px;padding:12px;box-shadow:0 12px 30px #000b,inset 0 1px #ffffff0b;
}
.v55-panel h3{margin:0 0 9px;color:#e3bb68;font:700 14px Georgia,serif;letter-spacing:.08em;text-align:center}
.v55-info-row,.v55-history-row{display:flex;align-items:center;justify-content:space-between;padding:7px 4px;border-bottom:1px solid #ffffff12;font-size:12px}
.v55-chat{margin-top:auto;min-height:135px}.v55-chat p{font-size:11px;color:#aab7bf;margin:7px 0}.v55-chat b{color:#e4bc69}
.v55-history-cards{display:flex;gap:4px}.v55-history-cards img{width:27px;height:38px;object-fit:cover;border-radius:3px}

/* Opponents become proper character panels */
#game #opponents{position:absolute;inset:0;z-index:15}
#game .opponent{
  min-width:clamp(190px,16vw,290px)!important;max-width:310px;
  padding:12px 12px 10px 88px!important;text-align:left!important;
  transform:translate(-50%,-50%)!important;
  border:1px solid #8a6731!important;border-radius:13px!important;
  background:linear-gradient(100deg,rgba(9,15,21,.98),rgba(3,7,11,.94))!important;
  box-shadow:0 14px 32px #000c,inset 0 0 22px #63cfff0b!important;
}
#game .opponent.active{border-color:#f3cc74!important;box-shadow:0 0 0 2px #f3cc7444,0 0 30px #f3b85e44!important}
#game .opp-avatar{
  position:absolute!important;left:12px!important;top:12px!important;
  width:62px!important;height:62px!important;font-size:34px!important;margin:0!important;
  background:radial-gradient(circle,#1c3340,#070b0e 70%)!important;
  border:2px solid #c49445!important;box-shadow:0 0 20px #000!important;
}
#game .opp-name{font:700 17px Georgia,serif!important;color:#e8c271!important;margin-bottom:4px}
#game .opp-meta{font-size:10px!important;color:#a9b6bd!important;white-space:normal!important}
#game .opponent .fan{position:absolute;top:-36px;left:50%;transform:translateX(-50%);display:flex;z-index:-1}
#game .opponent .fan img{width:40px!important;height:58px!important;margin-left:-24px!important;border-radius:5px!important;box-shadow:0 5px 10px #000!important}
#game .opponent .dealer{right:8px;top:7px}
#game .opponent:nth-child(1){border-color:#527f3e!important}
#game .opponent:nth-child(2){border-color:#608eb0!important}
#game .opponent:nth-child(3){border-color:#714895!important}
#game .opponent:nth-child(4){border-color:#9b6339!important}
#game .opponent:nth-child(5){border-color:#597986!important}

/* Central cards */
#game #trick{position:absolute;left:50%;top:51%;width:min(34vw,520px);height:min(34vw,520px);transform:translate(-50%,-50%);z-index:12}
#game .played{width:clamp(82px,7vw,125px)!important;height:auto!important;z-index:14!important}
#game .played img{width:100%!important;border-radius:10px!important;border:1px solid #d2ab60!important;box-shadow:0 18px 28px #000d!important}
#game .played label{display:none!important}
#game .trump-card{
  left:50%!important;top:11px!important;right:auto!important;bottom:auto!important;
  transform:translateX(-50%)!important;display:flex!important;align-items:flex-start!important;gap:6px;z-index:20!important;
}
#game .trump-card img{width:clamp(64px,5vw,88px)!important;height:auto!important;box-shadow:0 12px 24px #000;border:1px solid #d8b15c}
#game .trump-card small{color:#c8b78e;font-size:9px}

/* Player dock – cards dominate bottom center */
#game .player-dock{
  position:relative!important;inset:auto!important;height:var(--dock-h)!important;border-radius:0!important;
  padding:0!important;border:0!important;border-top:1px solid #8f6c34!important;
  background:
   linear-gradient(180deg,rgba(1,3,5,.25),rgba(2,5,8,.96) 24%),
   radial-gradient(ellipse at 50% 0,#7b3f2525,transparent 56%)!important;
  box-shadow:0 -18px 45px #000!important;overflow:visible;z-index:50;
}
#game .player-head{
  position:absolute;left:14px;bottom:64px;width:var(--side-w);height:auto!important;
  display:grid!important;grid-template-columns:62px 1fr;gap:10px;align-items:center;
  border:1px solid #936c31;border-radius:13px;padding:10px;background:#050b10ee;
}
#game .hero-avatar{width:58px!important;height:58px!important;font-size:31px!important;margin:0!important;background:#111d24}
#game .player-head>div:nth-child(2) b{font:700 18px Georgia,serif;color:#efc66f}
#game .player-head>div:nth-child(2) small{display:block;color:#aeb8bc;font-size:10px}
#game .stats{grid-column:1/-1;display:grid!important;grid-template-columns:repeat(3,1fr);gap:5px!important}
#game .stats span{padding:6px!important;text-align:center;background:#0b1319;border:1px solid #ffffff12;font-size:9px}
#game .stats b{display:block;font-size:17px;color:#e8c06b}
#game .ability-btn{position:absolute;left:14px;bottom:14px;width:var(--side-w);height:42px;border-radius:10px!important}
#game .hand{
  position:absolute!important;left:50%;bottom:45px;transform:translateX(-50%);
  width:min(68vw,1100px);height:calc(var(--dock-h) - 12px)!important;
  padding:0 30px 0!important;align-items:flex-end!important;overflow:visible!important;
}
#game .card{
  --cardw:clamp(90px,8.2vw,145px)!important;
  --cardh:calc(var(--cardw)*1.397)!important;
  margin-left:calc(var(--cardw)*-.30)!important;transform-origin:50% 145%!important;
}
#game .card:nth-child(1){transform:rotate(-14deg) translateY(17px)}
#game .card:nth-child(2){transform:rotate(-10deg) translateY(9px)}
#game .card:nth-child(3){transform:rotate(-6deg) translateY(4px)}
#game .card:nth-child(4){transform:rotate(-3deg)}
#game .card:nth-last-child(4){transform:rotate(3deg)}
#game .card:nth-last-child(3){transform:rotate(6deg) translateY(4px)}
#game .card:nth-last-child(2){transform:rotate(10deg) translateY(9px)}
#game .card:nth-last-child(1){transform:rotate(14deg) translateY(17px)}
#game .card.playable:hover,#game .card.selected{transform:translateY(-58px) scale(1.13)!important;z-index:100!important}
#game .playbar{
  position:absolute!important;left:calc(50% - min(34vw,550px));right:calc(50% - min(34vw,550px));bottom:7px;height:38px!important;
  display:flex!important;align-items:center!important;justify-content:center!important;gap:18px;
}
#game .playbar #hint{min-width:260px;text-align:center;color:#e0c57f!important;font:700 13px Georgia,serif!important}
#game #sortBtn{position:absolute;left:0}
#game #playBtn{position:absolute;right:0;min-width:180px;font-size:14px;box-shadow:0 0 22px #cf8f3030}

/* announcements */
#game .announcement,#game .combat-text{z-index:70!important}
#game .log{display:none!important}

/* Arena ambient animation */
#game .arena[data-aura="rot"]{box-shadow:inset 0 0 180px #f0442c30}
#game .arena[data-aura="gold"]{box-shadow:inset 0 0 180px #ffd86a25}
#game .arena[data-aura="gruen"]{box-shadow:inset 0 0 180px #4eff7320}
#game .arena[data-aura="blau"]{box-shadow:inset 0 0 180px #40cfff28}

/* Desktop ultra-wide */
@media(min-width:1800px){
  #game{--side-w:360px;--dock-h:330px}
  #game .card{--cardw:155px!important}
  #game .opponent{min-width:310px!important}
}

/* Tablet / mobile landscape */
@media(max-width:1100px){
  #game{--side-w:190px;--hud-h:58px;--dock-h:190px}
  #game .hud:before{font-size:20px;left:12px}.hud:after{display:none}
  #game .hud{padding:0 170px 0 115px!important}
  #game .hud>div{min-width:78px}.hud b{font-size:12px!important}
  .v55-side{display:none}
  #game .opponent{min-width:150px!important;padding-left:60px!important}
  #game .opp-avatar{width:42px!important;height:42px!important;font-size:22px!important}
  #game .opp-name{font-size:13px!important}
  #game .opp-meta{font-size:8px!important}
  #game .card{--cardw:clamp(70px,9.2vw,104px)!important}
  #game .player-head{width:180px;left:8px;bottom:53px;grid-template-columns:42px 1fr;padding:6px}
  #game .hero-avatar{width:38px!important;height:38px!important;font-size:20px!important}
  #game .ability-btn{width:180px;left:8px;height:34px}
  #game .hand{width:74vw;bottom:35px}
  #game .playbar{left:205px;right:8px}
}
@media(orientation:portrait) and (max-width:900px){
 #game:after{content:"Bitte drehe dein Gerät für die vollständige Runenarena";position:fixed;inset:0;z-index:99999;display:grid;place-items:center;background:#020508f4;color:#f1ce7b;font:700 22px Georgia,serif;text-align:center;padding:30px}
}

/* ARCANIS v5.5.1 – Rundenintro, Mischen und Austeilen */
.round-intro-overlay{position:fixed;inset:0;z-index:20000;display:grid;place-items:center;background:rgba(1,3,6,.78);backdrop-filter:blur(8px);overflow:hidden}
.round-intro-overlay.hidden{display:none}
.round-intro-vignette{position:absolute;inset:-20%;background:radial-gradient(circle at 50% 48%,rgba(76,41,102,.5),rgba(2,5,8,.92) 56%,#000 82%);animation:introPulse 2.3s ease-in-out infinite}
.round-intro-content{position:relative;z-index:2;text-align:center;width:min(900px,94vw);height:min(650px,88vh);display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding-top:5vh}
.round-intro-content small{letter-spacing:.4em;color:#79ddff;font-weight:800}
.round-intro-content h2{margin:8px 0 2px;font:900 clamp(32px,5vw,68px) Georgia,serif;color:#f2cf7b;text-shadow:0 3px #5c390d,0 0 35px #cf8c4255}
.round-intro-countdown{font:900 clamp(80px,15vw,180px) Georgia,serif;color:#fff0ae;line-height:1;text-shadow:0 0 28px #f4bd58,0 0 80px #7d43bb}
.round-intro-countdown.tick{animation:countTick .7s ease}
.round-intro-content p{margin:8px 0 18px;color:#c7d2d8;font-size:clamp(14px,1.6vw,22px)}
.round-intro-deck{position:relative;width:150px;height:210px;margin-top:5px;perspective:900px}
.round-intro-deck .deck-card{position:absolute;inset:0;width:100%;height:100%;border-radius:13px;border:1px solid #ddb45d;box-shadow:0 20px 40px #000;transform-origin:50% 130%}
.round-intro-deck .d1{transform:rotate(-5deg) translate(-5px,2px)}.round-intro-deck .d2{transform:rotate(4deg) translate(5px,0)}.round-intro-deck .d3{transform:rotate(0)}
.round-intro-deck.shuffle .d1{animation:shuffleLeft .42s ease-in-out infinite alternate}.round-intro-deck.shuffle .d2{animation:shuffleRight .38s ease-in-out infinite alternate}.round-intro-deck.shuffle .d3{animation:shuffleCenter .31s ease-in-out infinite alternate}
.round-intro-deal-layer{position:fixed;left:50%;top:52%;width:1px;height:1px;pointer-events:none}
.round-dealt-card{position:absolute;width:72px;height:102px;left:-36px;top:-51px;border-radius:7px;border:1px solid #dcb45d;box-shadow:0 12px 22px #000;animation:dealFly .78s cubic-bezier(.2,.85,.2,1) forwards}
.round-intro-active #game .hand .card,.round-intro-active #game .opponent .fan img,.round-intro-active #game .trump-card{opacity:0!important}
@keyframes introPulse{50%{transform:scale(1.05);filter:brightness(1.25)}}@keyframes countTick{0%{opacity:0;transform:scale(.3)}35%{opacity:1;transform:scale(1.18)}100%{transform:scale(1)}}@keyframes shuffleLeft{to{transform:translateX(-105px) rotate(-19deg) rotateY(25deg)}}@keyframes shuffleRight{to{transform:translateX(105px) rotate(19deg) rotateY(-25deg)}}@keyframes shuffleCenter{to{transform:translateY(-18px) rotate(3deg)}}@keyframes dealFly{0%{opacity:1;transform:translate(0,0) rotate(0) scale(1)}80%{opacity:1}100%{opacity:0;transform:translate(var(--tx),var(--ty)) rotate(var(--rot)) scale(.74)}}
@media(max-width:800px){.round-intro-content{padding-top:2vh}.round-intro-deck{width:100px;height:140px}.round-dealt-card{width:48px;height:68px;left:-24px;top:-34px}}

/* v5.5.2 – Handkarten vor der Prophezeiung ansehen */
.hand-review-panel{position:fixed;left:50%;bottom:18px;z-index:19000;transform:translateX(-50%);width:min(760px,calc(100vw - 32px));display:flex;align-items:center;justify-content:space-between;gap:18px;padding:15px 18px;border:1px solid #c49445;border-radius:16px;background:linear-gradient(145deg,rgba(6,11,17,.97),rgba(19,10,26,.96));box-shadow:0 18px 55px #000,0 0 28px #7541a733;backdrop-filter:blur(12px)}
.hand-review-panel.hidden{display:none}.hand-review-copy{text-align:left}.hand-review-copy small{color:#72ddff;letter-spacing:.28em;font-weight:800}.hand-review-copy h3{margin:4px 0;color:#f1cd78;font:800 21px Georgia,serif}.hand-review-copy p{margin:0;color:#c1ccd2;font-size:12px;max-width:500px}.hand-review-actions{display:grid;gap:7px;min-width:220px;text-align:center}.hand-review-actions span{font-size:10px;color:#97a7af}.hand-review-actions .btn{white-space:nowrap}
.hand-review-active #game .hand{z-index:19001!important}.hand-review-active #game .card{pointer-events:auto!important;filter:none!important}.hand-review-active #game .card:hover{transform:translateY(-48px) scale(1.1)!important;z-index:19002!important}.hand-review-active #game #playBtn,.hand-review-active #game #abilityBtn{pointer-events:none;opacity:.45}
@media(max-width:800px){.hand-review-panel{bottom:7px;padding:9px 11px;gap:8px}.hand-review-copy h3{font-size:15px}.hand-review-copy p{display:none}.hand-review-actions{min-width:180px}.hand-review-actions .btn{padding:10px;font-size:11px}}