/* =========================================================
   PRAY Leiterspiel – Stylesheet
   ========================================================= */
:root{
  --bg:#09060f; --bg2:#0e0918; --card:#130d1f; --card2:#1a1229; --border:#2a1f42;
  --text:#f4eefc; --muted:#a597c0;
  --p:#ff2bd6; --v:#8b5cf6; --c:#22d3ee; --g:#1ed760; --r:#ff4d6d; --y:#facc15; --o:#fb923c;
  --shadow:0 20px 50px rgba(0,0,0,.45);
  --radius:22px;
  --boardbg:#0d0816;
  color-scheme:dark;
}
:root[data-theme="light"]{
  --bg:#f6f2fb; --bg2:#efe7f8; --card:#ffffff; --card2:#f4eefb; --border:#e2d6f1;
  --text:#1b1028; --muted:#6c5a87;
  --p:#e0137f; --v:#6d28d9; --c:#0891b2; --g:#16a34a; --r:#e11d48; --y:#ca8a04; --o:#ea580c;
  --shadow:0 16px 40px rgba(60,20,90,.14);
  --boardbg:#ffffff;
  color-scheme:light;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%}
body{background:var(--bg);color:var(--text);font:16px/1.5 Outfit,system-ui,-apple-system,"Segoe UI",sans-serif;-webkit-tap-highlight-color:transparent;overflow-x:hidden}
[hidden]{display:none!important}
button{font:inherit;color:inherit;cursor:pointer}
input,select{font:inherit;color:inherit}
.muted{color:var(--muted)}
.small{font-size:.88rem}
.center{text-align:center}
.grow{flex:1}

/* ---------- Hintergrund ---------- */
.bg{position:fixed;inset:0;z-index:-2;overflow:hidden;pointer-events:none;background:radial-gradient(ellipse at 50% -20%,var(--bg2),var(--bg) 60%)}
.blob{position:absolute;width:55vmax;height:55vmax;border-radius:50%;filter:blur(90px);opacity:.28}
:root[data-theme="light"] .blob{opacity:.16}
.b1{background:var(--p);left:-20vmax;top:-25vmax;animation:drift1 26s ease-in-out infinite alternate}
.b2{background:var(--c);right:-25vmax;top:10vh;animation:drift2 31s ease-in-out infinite alternate}
.b3{background:var(--v);left:20vw;bottom:-35vmax;animation:drift3 35s ease-in-out infinite alternate}
@keyframes drift1{to{transform:translate(18vw,12vh) scale(1.15)}}
@keyframes drift2{to{transform:translate(-14vw,20vh) scale(.9)}}
@keyframes drift3{to{transform:translate(-10vw,-14vh) scale(1.1)}}
.grid{position:absolute;inset:-50%;background-image:linear-gradient(rgba(139,92,246,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(139,92,246,.07) 1px,transparent 1px);background-size:44px 44px;transform:perspective(600px) rotateX(55deg) translateY(10%);mask-image:linear-gradient(to bottom,transparent 30%,#000 80%)}
#fx{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:60}

/* ---------- Kopf ---------- */
.top{display:flex;align-items:center;gap:10px;padding:14px max(16px,env(safe-area-inset-left)) 6px;max-width:1280px;margin:0 auto}
.brand{font-family:"Bebas Neue",sans-serif;font-size:1.8rem;letter-spacing:3px;text-decoration:none;line-height:1}
.bl{color:var(--c)}
.bs{color:var(--p)}
.iconbtn{width:42px;height:42px;border-radius:14px;border:1px solid var(--border);background:var(--card);font-size:1.15rem;display:grid;place-items:center;transition:transform .15s,border-color .15s}
.iconbtn:hover{transform:translateY(-2px);border-color:var(--v)}
.announce{max-width:1100px;margin:6px auto 0;padding:10px 16px;border-radius:14px;background:linear-gradient(90deg,rgba(255,43,214,.16),rgba(34,211,238,.16));border:1px solid var(--border);text-align:center;font-weight:600;width:calc(100% - 32px)}

/* ---------- Layout ---------- */
.wrap{max-width:1100px;margin:0 auto;padding:10px 16px 40px}
.panel{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:20px;box-shadow:var(--shadow);margin-bottom:16px}
.panel.tight{padding:14px;margin-bottom:12px}
.panel h2{font-family:"Bebas Neue",sans-serif;font-weight:400;letter-spacing:1.5px;font-size:1.7rem;margin:0 0 8px;line-height:1.1}
.panel h2 small{font-family:Outfit,sans-serif;font-size:.85rem;letter-spacing:0}
.twocol{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.twocol>.panel{margin-bottom:0}
.modes{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px}
.modes>.panel{margin-bottom:0}
.inline{display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap}
.tag0{font-family:"Bebas Neue",sans-serif;letter-spacing:3px;color:var(--muted);margin:0 0 2px;font-size:1rem}
.tag0.cy{color:var(--c)}
.tag0.pk{color:var(--p)}

.rise{animation:rise .6s cubic-bezier(.2,.8,.2,1) both}
.d1{animation-delay:.06s}.d2{animation-delay:.12s}.d3{animation-delay:.18s}.d4{animation-delay:.24s}.d5{animation-delay:.3s}
@keyframes rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}

/* ---------- Titel ---------- */
.hero{text-align:center;padding:18px 0 14px}
.title{font-family:"Bebas Neue",sans-serif;font-weight:400;font-size:clamp(3.4rem,13vw,7.5rem);line-height:.9;margin:0;letter-spacing:4px}
.title .t1{background:linear-gradient(90deg,var(--y),var(--g),var(--c));-webkit-background-clip:text;background-clip:text;color:transparent}
.title .t2{background:linear-gradient(90deg,var(--o),var(--p),var(--v));-webkit-background-clip:text;background-clip:text;color:transparent}
.title.small{font-size:clamp(2.1rem,8vw,4rem);background:linear-gradient(90deg,var(--y),var(--p),var(--c));-webkit-background-clip:text;background-clip:text;color:transparent}
.sub{color:var(--muted);margin:10px 0 0;font-size:1.05rem}

/* ---------- Formulare ---------- */
.fld{display:flex;flex-direction:column;gap:6px;min-width:0}
.fld>span{font-size:.78rem;font-weight:600;letter-spacing:1px;text-transform:uppercase;color:var(--muted)}
input:not([type]),input[type=text],input[type=password],select,#inCode{background:var(--card2);border:1px solid var(--border);border-radius:14px;padding:12px 14px;outline:none;min-height:48px;transition:border-color .15s,box-shadow .15s;width:100%}
input:focus,select:focus{border-color:var(--v);box-shadow:0 0 0 3px rgba(139,92,246,.25)}
#inCode{font-family:"Bebas Neue",sans-serif;font-size:1.5rem;letter-spacing:6px;text-transform:uppercase;width:160px;text-align:center;padding:6px 10px}
.namerow{display:flex;gap:16px;flex-wrap:wrap;align-items:flex-end}
.joinrow{margin-top:12px}
.chk{display:flex;align-items:center;gap:8px;min-height:48px;cursor:pointer;user-select:none}
.chk input{width:20px;height:20px;accent-color:var(--p)}

.colors{display:flex;gap:8px;flex-wrap:wrap}
.cdot{width:40px;height:40px;border-radius:50%;border:3px solid transparent;position:relative;transition:transform .15s;background:none;padding:0}
.cdot::after{content:"";position:absolute;inset:4px;border-radius:50%;background:var(--col);box-shadow:inset 0 -5px 10px rgba(0,0,0,.35),inset 0 4px 6px rgba(255,255,255,.4)}
.cdot:hover{transform:scale(1.08)}
.cdot.on{border-color:var(--text)}
.cdot.taken{opacity:.3;cursor:not-allowed}

/* ---------- Buttons ---------- */
.btn{position:relative;border:none;border-radius:16px;padding:12px 22px;min-height:48px;font-family:"Bebas Neue",sans-serif;font-size:1.3rem;letter-spacing:2px;color:#fff;background:linear-gradient(90deg,var(--p),var(--v));box-shadow:0 8px 26px rgba(255,43,214,.3);transition:transform .15s,box-shadow .15s,filter .15s;white-space:nowrap}
.btn:hover{transform:translateY(-2px);box-shadow:0 12px 32px rgba(255,43,214,.42)}
.btn:active{transform:translateY(1px)}
.btn:disabled{opacity:.45;cursor:not-allowed;transform:none}
.btn.alt{background:linear-gradient(90deg,var(--c),var(--v));box-shadow:0 8px 26px rgba(34,211,238,.25)}
.btn.ghost{background:var(--card2);color:var(--text);border:1px solid var(--border);box-shadow:none}
.btn.ghost:hover{border-color:var(--v)}
.btn.small{font-size:1.05rem;padding:8px 14px;min-height:40px;border-radius:12px}
.btn.tiny{font-size:.95rem;padding:4px 10px;min-height:32px;border-radius:10px;letter-spacing:1.5px}
.btn.big{font-size:1.8rem;padding:16px 46px;border-radius:20px}
.btn.danger{background:linear-gradient(90deg,var(--r),#b91c1c)}

/* ---------- Regeln ---------- */
.rulesbox summary{cursor:pointer;display:flex;align-items:center;gap:12px;list-style:none;font-family:"Bebas Neue",sans-serif;font-size:1.6rem;letter-spacing:1.5px}
.rulesbox summary::-webkit-details-marker{display:none}
.rulesbox summary::after{content:"▾";margin-left:auto;transition:transform .2s;font-family:Outfit}
.rulesbox[open] summary::after{transform:rotate(180deg)}
.rulesbox summary small{font-family:Outfit,sans-serif;font-size:.85rem;letter-spacing:0}
.rules{display:grid;gap:10px;margin-top:10px}
.rule{display:flex;align-items:center;gap:8px 12px;flex-wrap:wrap;justify-content:space-between;padding:10px 12px;border-radius:14px;background:var(--card2);border:1px solid var(--border)}
.rule>div:first-child{flex:1 1 200px;min-width:0}
.rule .rt{font-weight:600}
.rule .rd{font-size:.82rem;color:var(--muted)}
.seg{display:flex;background:var(--bg2);border:1px solid var(--border);border-radius:12px;padding:3px;gap:2px;flex-wrap:wrap}
.seg button{white-space:nowrap;border:none;background:none;border-radius:9px;padding:6px 10px;font-size:.85rem;font-weight:600;color:var(--muted)}
.seg button.on{background:linear-gradient(90deg,var(--p),var(--v));color:#fff}
.seg button:disabled{cursor:default}
.tgl{position:relative;width:52px;height:30px;flex:none;border-radius:20px;border:1px solid var(--border);background:var(--bg2);padding:0;transition:background .2s}
.tgl::after{content:"";position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:var(--muted);transition:transform .2s,background .2s}
.tgl.on{background:linear-gradient(90deg,var(--p),var(--v))}
.tgl.on::after{transform:translateX(22px);background:#fff}
.tgl:disabled{cursor:default}

/* ---------- Listen ---------- */
.lobbylist{display:grid;gap:8px}
.lobbyitem{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:14px;background:var(--card2);border:1px solid var(--border)}
.lobbyitem b{font-family:"Bebas Neue",sans-serif;font-size:1.4rem;letter-spacing:3px;color:var(--c)}
.lb{display:grid;gap:6px}
.lbrow{display:grid;grid-template-columns:30px 1fr auto;gap:10px;align-items:center;padding:8px 12px;border-radius:12px;background:var(--card2)}
.lbrow .rk{font-family:"Bebas Neue",sans-serif;font-size:1.3rem;color:var(--muted)}
.lbrow:nth-child(1) .rk{color:var(--y)}.lbrow:nth-child(2) .rk{color:#c0c0d0}.lbrow:nth-child(3) .rk{color:var(--o)}
.lbrow .nm{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lbrow .wn{font-size:.85rem;color:var(--muted);white-space:nowrap}
.lbrow .wn b{color:var(--text);font-size:1rem}

/* ---------- Lobby ---------- */
.lobbyhead{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.code{font-family:"Bebas Neue",sans-serif;font-size:3.2rem;letter-spacing:10px;line-height:1;background:linear-gradient(90deg,var(--c),var(--p));-webkit-background-clip:text;background-clip:text;color:transparent}
.plist{display:grid;gap:8px}
.pitem{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:14px;background:var(--card2);border:1px solid var(--border);animation:rise .35s both}
.pitem .nm{font-weight:600;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pitem .badge{font-size:.72rem;font-weight:700;letter-spacing:1px;padding:3px 8px;border-radius:8px;background:var(--bg2);color:var(--muted)}
.pitem .badge.host{color:var(--y)}
.pitem .x{border:none;background:none;color:var(--muted);font-size:1.2rem;padding:2px 6px}
.pitem .x:hover{color:var(--r)}
.pawnicon{width:26px;height:30px;flex:none}
.off{opacity:.5}

/* ---------- Spiel ---------- */
.gamewrap{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:16px;max-width:1280px;margin:0 auto;padding:6px 16px 20px;align-items:start}
.boardcol{min-width:0;display:flex;justify-content:center}
.boardbox{position:relative;width:min(100%,calc((100vh - 90px) * 600 / 668));aspect-ratio:600/668}
#board{width:100%;height:100%;display:block;overflow:visible;user-select:none}
.boardbox.shake{animation:shake .5s}
@keyframes shake{10%,90%{transform:translate(-2px,1px)}20%,80%{transform:translate(4px,-2px)}30%,50%,70%{transform:translate(-7px,3px)}40%,60%{transform:translate(7px,-3px)}}
.side{min-width:0}
.sidehead{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.sidehead .tag0{white-space:nowrap;margin:0}
.gplayers{display:grid;gap:6px}
.gp{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:14px;background:var(--card2);border:2px solid transparent;position:relative;transition:border-color .2s,transform .2s}
.gp.turn{border-color:var(--pc);box-shadow:0 0 18px -4px var(--pc);transform:scale(1.02)}
.gp .nm{font-weight:600;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gp .ps{font-family:"Bebas Neue",sans-serif;font-size:1.5rem;line-height:1;min-width:34px;text-align:right}
.gp .st{font-size:.7rem;font-weight:700;letter-spacing:1px;color:var(--muted)}
.gp .bar{position:absolute;left:10px;right:10px;bottom:3px;height:3px;border-radius:2px;background:var(--border);overflow:hidden}
.gp .bar i{display:block;height:100%;background:var(--pc);transition:width .5s}
.gp .bubble{position:absolute;right:-6px;top:-14px;font-size:1.7rem;animation:bub 1.8s forwards;pointer-events:none}
@keyframes bub{0%{transform:scale(0) translateY(10px);opacity:0}15%{transform:scale(1.2);opacity:1}25%{transform:scale(1)}80%{opacity:1}100%{transform:translateY(-24px);opacity:0}}

.dock{text-align:center}
.turnline{font-weight:600;margin-bottom:6px;min-height:24px}
.turnline b{font-family:"Bebas Neue",sans-serif;font-size:1.35rem;letter-spacing:1.5px;font-weight:400}
.dicearea{display:flex;align-items:center;justify-content:center;gap:22px;padding:6px 0}
.scene{width:76px;height:76px;perspective:420px}
.cube{width:100%;height:100%;position:relative;transform-style:preserve-3d;transform:rotateX(-20deg) rotateY(25deg);transition:transform 1s cubic-bezier(.2,.9,.25,1)}
.face{position:absolute;inset:0;border-radius:16px;background:linear-gradient(145deg,#fff,#e6dcf5);border:1px solid #d4c4ec;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);padding:11px;box-shadow:inset 0 0 14px rgba(120,60,180,.25)}
.face i{width:13px;height:13px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#ff5fe0,#a2128a);align-self:center;justify-self:center}
.f1{transform:translateZ(38px)}
.f2{transform:rotateY(90deg) translateZ(38px)}
.f3{transform:rotateX(90deg) translateZ(38px)}
.f4{transform:rotateX(-90deg) translateZ(38px)}
.f5{transform:rotateY(-90deg) translateZ(38px)}
.f6{transform:rotateY(180deg) translateZ(38px)}
.f1 i{grid-area:2/2}
.f2 i:nth-child(1){grid-area:1/1}.f2 i:nth-child(2){grid-area:3/3}
.f3 i:nth-child(1){grid-area:1/1}.f3 i:nth-child(2){grid-area:2/2}.f3 i:nth-child(3){grid-area:3/3}
.f4 i:nth-child(1){grid-area:1/1}.f4 i:nth-child(2){grid-area:1/3}.f4 i:nth-child(3){grid-area:3/1}.f4 i:nth-child(4){grid-area:3/3}
.f5 i:nth-child(1){grid-area:1/1}.f5 i:nth-child(2){grid-area:1/3}.f5 i:nth-child(3){grid-area:2/2}.f5 i:nth-child(4){grid-area:3/1}.f5 i:nth-child(5){grid-area:3/3}
.f6 i:nth-child(1){grid-area:1/1}.f6 i:nth-child(2){grid-area:2/1}.f6 i:nth-child(3){grid-area:3/1}.f6 i:nth-child(4){grid-area:1/3}.f6 i:nth-child(5){grid-area:2/3}.f6 i:nth-child(6){grid-area:3/3}
.scene.hop{animation:hop 1s cubic-bezier(.3,.7,.3,1)}
@keyframes hop{0%{transform:translateY(0)}30%{transform:translateY(-34px) scale(1.08)}60%{transform:translateY(0) scale(.96)}75%{transform:translateY(-8px)}100%{transform:none}}

.rollbtn{position:relative;width:118px;height:118px;border-radius:50%;border:none;background:radial-gradient(circle at 35% 30%,#ff6ae6,var(--p) 45%,var(--v));color:#fff;font-family:"Bebas Neue",sans-serif;font-size:1.45rem;letter-spacing:1px;box-shadow:0 10px 34px rgba(255,43,214,.45),inset 0 -6px 14px rgba(0,0,0,.25),inset 0 6px 10px rgba(255,255,255,.3);transition:transform .15s,filter .2s,box-shadow .2s;flex:none}
.rollbtn span{position:relative;z-index:1}
.rollbtn:not(:disabled){animation:breathe 1.6s ease-in-out infinite}
.rollbtn:not(:disabled):hover{transform:scale(1.06)}
.rollbtn:not(:disabled):active{transform:scale(.95)}
.rollbtn:disabled{filter:grayscale(.8) brightness(.7);box-shadow:none;cursor:default}
@keyframes breathe{0%,100%{box-shadow:0 10px 34px rgba(255,43,214,.45),0 0 0 0 rgba(255,43,214,.45),inset 0 -6px 14px rgba(0,0,0,.25)}50%{box-shadow:0 10px 34px rgba(255,43,214,.45),0 0 0 14px rgba(255,43,214,0),inset 0 -6px 14px rgba(0,0,0,.25)}}
.ring{position:absolute;inset:-6px;width:calc(100% + 12px);height:calc(100% + 12px);transform:rotate(-90deg)}
.ring circle{fill:none;stroke-width:5}
.ring circle:first-child{stroke:transparent}
#ringFg{stroke:var(--y);stroke-linecap:round;stroke-dasharray:339.3;stroke-dashoffset:339.3;transition:stroke-dashoffset .9s linear,stroke .3s}
#ringFg.low{stroke:var(--r)}

.reacts{display:flex;justify-content:center;gap:4px;flex-wrap:wrap;margin-top:8px}
.reacts button{border:none;background:var(--card2);border-radius:10px;font-size:1.25rem;width:40px;height:38px;transition:transform .12s}
.reacts button:hover{transform:scale(1.15)}
.logbox{max-height:240px;overflow:auto}
.log{display:flex;flex-direction:column-reverse;gap:4px;font-size:.86rem}
.log div{padding:4px 8px;border-radius:8px;background:var(--card2);animation:rise .3s both}

/* Banner über dem Brett */
.banner{position:absolute;left:50%;top:44%;transform:translate(-50%,-50%);pointer-events:none;text-align:center;z-index:5}
.banner .bn{font-family:"Bebas Neue",sans-serif;font-size:clamp(2.4rem,9vw,5.2rem);letter-spacing:4px;line-height:1;white-space:nowrap;padding:10px 26px;border-radius:22px;background:rgba(9,6,15,.78);border:2px solid var(--bc);color:var(--bc);text-shadow:0 0 18px var(--bc);box-shadow:0 0 40px -6px var(--bc);animation:bannerIn 1.25s cubic-bezier(.2,.9,.25,1.2) forwards}
.banner .bn small{display:block;font-family:Outfit,sans-serif;font-size:.9rem;letter-spacing:1px;text-shadow:none;color:#fff;margin-top:4px;font-weight:600}
:root[data-theme="light"] .banner .bn{background:rgba(255,255,255,.9)}
:root[data-theme="light"] .banner .bn small{color:var(--text)}
@keyframes bannerIn{0%{transform:scale(.3) rotate(-6deg);opacity:0}18%{transform:scale(1.12) rotate(2deg);opacity:1}30%{transform:scale(1) rotate(0)}80%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(1.15) translateY(-20px)}}
.floaters{position:absolute;inset:0;pointer-events:none;overflow:visible}
.floater{position:absolute;font-size:2.2rem;animation:floatUp 2.2s ease-out forwards}
@keyframes floatUp{0%{transform:translateY(0) scale(.4);opacity:0}15%{transform:translateY(-10px) scale(1.2);opacity:1}100%{transform:translateY(-140px) scale(1);opacity:0}}

/* Brett-SVG */
.tok{transition:filter .2s}
.tok.mine .tokring{display:block}
.tokring{display:none;animation:ringpulse 1.2s ease-in-out infinite}
@keyframes ringpulse{0%,100%{opacity:.9}50%{opacity:.25}}
.cellnum{font-family:"Bebas Neue",sans-serif}

/* ---------- Overlays ---------- */
.overlay{position:fixed;inset:0;z-index:50;background:rgba(5,3,10,.72);backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;padding:16px;overflow:auto}
.resultcard{width:100%;max-width:620px;min-width:0;text-align:center;margin:auto}
.resultcard .title.small{overflow-wrap:anywhere}
.pop{animation:pop .5s cubic-bezier(.2,.9,.25,1.3) both}
@keyframes pop{from{transform:scale(.7);opacity:0}to{transform:none;opacity:1}}
.podium{display:flex;align-items:flex-end;justify-content:center;gap:10px;margin:18px 0 6px}
.pod{display:flex;flex-direction:column;align-items:center;gap:6px;width:150px;max-width:31%}
.pod .nm{font-weight:700;font-size:.95rem;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pod .blk{width:100%;border-radius:14px 14px 4px 4px;display:grid;place-items:center;font-family:"Bebas Neue",sans-serif;font-size:2.4rem;color:#fff;animation:grow .8s cubic-bezier(.2,.9,.25,1.2) both}
.pod.p1 .blk{height:120px;background:linear-gradient(180deg,var(--y),var(--o));animation-delay:.6s}
.pod.p2 .blk{height:86px;background:linear-gradient(180deg,#d4d4e4,#8a8aa5);animation-delay:.3s}
.pod.p3 .blk{height:62px;background:linear-gradient(180deg,var(--o),#9a3412)}
@keyframes grow{from{transform:scaleY(0);transform-origin:bottom}to{transform:scaleY(1);transform-origin:bottom}}
.pod svg{width:44px;height:52px}
.restable{display:grid;gap:4px;margin-top:12px;font-size:.88rem}
.rr{display:grid;grid-template-columns:28px 1fr repeat(4,44px);gap:6px;align-items:center;padding:6px 8px;border-radius:10px;background:var(--card2)}
.rr.hd{background:none;color:var(--muted);font-size:.75rem;font-weight:700}
.rr .nm{text-align:left;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rulelist{text-align:left;padding-left:20px;margin:8px 0}
.rulelist li{margin:4px 0}
.legend{display:grid;grid-template-columns:1fr 1fr;gap:8px;text-align:left;font-size:.9rem;margin-top:10px}
.legend span{display:flex;align-items:center;gap:8px}
.lg{display:inline-grid;place-items:center;min-width:30px;height:24px;border-radius:7px;font-family:"Bebas Neue",sans-serif;font-weight:400;font-size:1rem;border:2px solid}
.lg.cy{border-color:var(--c);background:repeating-linear-gradient(0deg,var(--c) 0 3px,transparent 3px 7px)}
.lg.pk{border-color:var(--p);background:var(--p)}
.lg.gr{border-color:var(--g);color:var(--g)}
.lg.rd{border-color:var(--r);color:var(--r)}
.lg.or{border-color:var(--o);color:var(--o)}
.lg.cy2{border-color:var(--c);color:var(--c)}

/* ---------- Toasts ---------- */
.toasts{position:fixed;left:50%;bottom:18px;transform:translateX(-50%);z-index:70;display:grid;gap:8px;width:min(440px,calc(100% - 32px));pointer-events:none}
.toast{padding:12px 16px;border-radius:14px;background:var(--card);border:1px solid var(--border);box-shadow:var(--shadow);font-weight:600;text-align:center;animation:rise .3s both}
.toast.err{border-color:var(--r);color:var(--r)}
.toast.admin{border-color:var(--y)}

/* ---------- Responsive ---------- */
@media (max-width:980px){
  .gamewrap{grid-template-columns:1fr;padding:4px 8px 190px}
  .boardbox{width:min(100%,calc((100vh - 230px) * 600 / 668));min-width:min(100%,340px)}
  .side{display:contents}
  .side>.panel:first-child{order:-1}
  .gplayers{grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:5px}
  .gp .st{display:none}
  .gp{gap:6px;font-size:.88rem;border-radius:12px}
  .gp .pawnicon{width:18px;height:22px}
  .gp .ps{min-width:24px}
  .gp.turn{transform:none}
  .top{padding-top:8px;padding-bottom:2px}
  .brand{font-size:1.5rem}
  .iconbtn{width:36px;height:36px;font-size:1rem;border-radius:11px}
  .sidehead{margin-bottom:6px}
  .dock{position:fixed;left:8px;right:8px;bottom:max(8px,env(safe-area-inset-bottom));z-index:40;margin:0;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:6px 12px;text-align:left;padding:10px 14px;backdrop-filter:blur(10px);background:color-mix(in srgb,var(--card) 92%,transparent)}
  .dock .turnline{grid-column:1;margin:0;font-size:.9rem}
  .dock .dicearea{grid-column:2;grid-row:1/3;gap:14px;padding:0}
  .dock .reacts{grid-column:1;justify-content:flex-start;margin:0;flex-wrap:nowrap;overflow:hidden;min-width:0}
  .dock .reacts button{width:34px;height:32px;font-size:1.05rem}
  .scene{width:50px;height:50px;perspective:300px}
  .face{padding:7px;border-radius:11px}
  .face i{width:9px;height:9px}
  .f1{transform:translateZ(25px)}.f2{transform:rotateY(90deg) translateZ(25px)}.f3{transform:rotateX(90deg) translateZ(25px)}.f4{transform:rotateX(-90deg) translateZ(25px)}.f5{transform:rotateY(-90deg) translateZ(25px)}.f6{transform:rotateY(180deg) translateZ(25px)}
  .rollbtn{width:84px;height:84px;font-size:1.15rem;letter-spacing:.5px}
  .gp{padding:5px 7px}
  .gp .ps{font-size:1.2rem}
  .logbox{max-height:170px;width:100%}
  .boardcol{width:100%}
}
@media (max-width:760px){
  .twocol,.modes{grid-template-columns:1fr}
  .code{font-size:2.6rem;letter-spacing:7px}
  .panel{padding:16px}
  #inCode{flex:1;width:auto}
  .legend{grid-template-columns:1fr}
  .rr{grid-template-columns:24px 1fr repeat(4,36px);font-size:.8rem}
  .dock .reacts button:nth-child(n+6){display:none}
}
@media (max-width:430px){
  .dock .reacts button:nth-child(n+5){display:none}
  .dock{padding:8px 10px}
  .dock .dicearea{gap:10px}
}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important}}