:root {
  --bg-0:#020712;
  --bg-1:#061222;
  --panel:#07182a;
  --panel-2:#0a2139;
  --line:rgba(125,193,255,.22);
  --text:#f5f8ff;
  --muted:#8fa8c5;
  --blue:#1787ff;
  --blue2:#58c8ff;
  --coral:#ff5c5f;
  --coral2:#ff9a83;
  --mint:#18c994;
  --mint2:#68f0c2;
  --gold:#f2b52e;
  --gold2:#ffe17c;
  --danger:#ff5577;
  --cream:#f3eadb;
  --board-dark:#0b1726;
  --shadow:0 24px 80px rgba(0,0,0,.42);
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:var(--bg-0);color:var(--text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
body{min-height:100vh;overflow-x:hidden;background:
  radial-gradient(circle at 15% 15%,rgba(0,113,255,.22),transparent 28%),
  radial-gradient(circle at 85% 75%,rgba(22,201,148,.12),transparent 30%),
  linear-gradient(145deg,#020610,#06111f 55%,#03101b)}
button,input{font:inherit}
button{color:inherit}
button:focus-visible,input:focus-visible{outline:2px solid #57c7ff;outline-offset:2px}
.nebula{position:fixed;inset:auto;filter:blur(60px);opacity:.5;pointer-events:none;z-index:0}
.nebula-a{width:360px;height:360px;border-radius:50%;background:#006bff;left:-150px;top:15%}
.nebula-b{width:420px;height:420px;border-radius:50%;background:#094b6b;right:-220px;bottom:-60px}
.stars{position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.55;background-image:
 radial-gradient(circle at 10% 20%,#fff 0 1px,transparent 1.3px),
 radial-gradient(circle at 20% 82%,#fff 0 1px,transparent 1.2px),
 radial-gradient(circle at 35% 17%,#fff 0 1px,transparent 1.2px),
 radial-gradient(circle at 51% 75%,#fff 0 1px,transparent 1.1px),
 radial-gradient(circle at 67% 14%,#fff 0 1px,transparent 1.2px),
 radial-gradient(circle at 78% 52%,#fff 0 1px,transparent 1.1px),
 radial-gradient(circle at 91% 24%,#fff 0 1px,transparent 1.2px);
 background-size:330px 330px,260px 260px,400px 400px,300px 300px,470px 470px,280px 280px,350px 350px}
.glass,.glass-strong{background:linear-gradient(180deg,rgba(11,32,55,.88),rgba(4,17,31,.88));border:1px solid rgba(92,170,235,.23);box-shadow:inset 0 1px 0 rgba(255,255,255,.035),var(--shadow);backdrop-filter:blur(18px)}
.glass-strong{background:linear-gradient(160deg,rgba(10,28,49,.98),rgba(3,12,23,.98));border-color:rgba(93,190,255,.3)}
.app-shell{position:relative;z-index:1;min-height:100vh;padding:18px}
.topbar{min-height:72px;border-radius:24px;padding:10px 14px 10px 18px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;position:sticky;top:12px;z-index:20}
.brand{display:flex;align-items:center;gap:12px;background:none;border:0;padding:0;cursor:pointer;text-align:left;min-width:0}
.brand-text{font-size:25px;letter-spacing:-.7px;white-space:nowrap}.brand-text b{font-weight:800}.brand-text strong{font-weight:850;color:#ffd982}
.tagline{font-size:12px;color:var(--muted);margin-left:8px;white-space:nowrap}
.brand-orbit{width:52px;height:42px;position:relative;display:inline-grid;place-items:center;flex:0 0 auto}.brand-orbit.large{width:84px;height:68px}
.brand-orbit .planet{width:30px;height:30px;border-radius:50%;display:block;background:radial-gradient(circle at 35% 28%,#8de8ff,#167cea 44%,#083a76 78%);box-shadow:0 0 22px rgba(35,151,255,.65);position:relative}.brand-orbit.large .planet{width:48px;height:48px}
.brand-orbit:after{content:"";position:absolute;width:54px;height:15px;border:4px solid #ffd27b;border-top-color:transparent;border-radius:50%;transform:rotate(-14deg);filter:drop-shadow(0 0 5px rgba(255,196,72,.45))}.brand-orbit.large:after{width:84px;height:22px;border-width:5px}
.topbar-center{display:flex;justify-content:center}.room-chip{border:1px solid rgba(86,174,255,.25);background:rgba(4,21,38,.84);border-radius:16px;padding:8px 14px;min-width:150px;color:var(--text);cursor:pointer;display:grid;grid-template-columns:1fr auto;grid-template-areas:"label copy" "code copy";column-gap:12px;text-align:left}.room-chip-label{grid-area:label;color:var(--muted);font-size:9px;text-transform:uppercase;letter-spacing:.14em}.room-chip strong{grid-area:code;letter-spacing:.18em;font-size:16px}.copy-icon{grid-area:copy;align-self:center;color:#bddbff;font-size:18px}
.topbar-actions{display:flex;justify-content:flex-end;align-items:center;gap:8px}.status-pill{height:42px;padding:0 13px;border:1px solid rgba(88,164,226,.18);border-radius:14px;background:rgba(5,19,34,.72);display:flex;align-items:center;gap:7px;color:#cfe4f8}.status-pill b{font-size:12px}.status-pill small{font-size:9px;color:var(--muted)}.online-dot{width:9px;height:9px;background:#22d7a6;border-radius:50%;box-shadow:0 0 10px rgba(34,215,166,.8)}.online-dot.offline{background:#ff667e;box-shadow:0 0 10px rgba(255,102,126,.7)}
.icon-btn,.leave-btn{height:42px;border-radius:14px;border:1px solid rgba(102,171,229,.22);background:rgba(5,20,36,.82);cursor:pointer}.icon-btn{width:44px;font-size:18px}.leave-btn{padding:0 14px;border-color:rgba(255,83,117,.45);color:#ff829a}.leave-btn:hover{background:rgba(255,83,117,.12)}
.game-layout{max-width:1600px;margin:18px auto 0;display:grid;grid-template-columns:minmax(620px,1fr) 390px;gap:18px;align-items:start}.board-column{min-width:0}.board-frame{position:relative;max-width:940px;margin:0 auto;aspect-ratio:1/1;border-radius:34px;padding:18px;background:linear-gradient(145deg,#172637,#07101c 60%,#18232c);border:1px solid rgba(227,184,104,.36);box-shadow:0 35px 85px rgba(0,0,0,.55),inset 0 0 0 4px rgba(255,255,255,.018),inset 0 0 35px rgba(240,178,68,.08)}.board-frame:before{content:"";position:absolute;inset:-9px;border-radius:40px;border:1px solid rgba(71,154,218,.2);pointer-events:none}.board-glow{position:absolute;inset:20% 20%;background:radial-gradient(circle,rgba(18,135,255,.18),transparent 65%);filter:blur(30px);pointer-events:none}
.game-board{position:relative;width:100%;height:100%;display:grid;grid-template-columns:repeat(15,1fr);grid-template-rows:repeat(15,1fr);gap:1px;border-radius:24px;overflow:hidden;background:#c8b79f;border:4px solid rgba(242,209,155,.55);box-shadow:inset 0 0 40px rgba(53,35,18,.35)}
.board-cell{position:relative;z-index:1;background:linear-gradient(145deg,#f7f0e4,#e2d4bf);border:1px solid rgba(100,77,49,.3);min-width:0;min-height:0}.board-cell.void{background:linear-gradient(145deg,#0c1828,#07111d);border-color:rgba(255,255,255,.025)}.board-cell.safe:after{content:"★";position:absolute;inset:0;display:grid;place-items:center;color:#806f59;font-size:clamp(9px,1.7vw,21px);text-shadow:0 1px #fff7;z-index:1}.board-cell.start-blue{background:linear-gradient(145deg,#39a4ff,#086fe0)}.board-cell.start-coral{background:linear-gradient(145deg,#ff8f80,#e6464e)}.board-cell.start-mint{background:linear-gradient(145deg,#53e3b4,#0bae7d)}.board-cell.start-gold{background:linear-gradient(145deg,#ffd560,#e39b16)}
.board-cell.lane-blue{background:linear-gradient(145deg,#42a9ff,#0d78e8)}.board-cell.lane-coral{background:linear-gradient(145deg,#ff8f80,#ee5258)}.board-cell.lane-mint{background:linear-gradient(145deg,#4cdfae,#10b77f)}.board-cell.lane-gold{background:linear-gradient(145deg,#ffd25d,#e6a117)}
.home-zone{z-index:3;margin:7%;border-radius:22%;display:grid;place-items:center;box-shadow:inset 0 0 0 3px rgba(255,255,255,.22),inset 0 -20px 45px rgba(0,0,0,.12),0 12px 20px rgba(0,0,0,.18);position:relative;overflow:hidden}.home-zone:before{content:"";position:absolute;inset:8%;border-radius:50%;background:radial-gradient(circle at 35% 28%,rgba(255,255,255,.96),rgba(242,235,222,.88));box-shadow:inset 0 0 0 2px rgba(74,62,44,.18),0 6px 16px rgba(0,0,0,.25)}.home-zone.blue{grid-area:1/1/7/7;background:linear-gradient(145deg,#249cff,#086bd8)}.home-zone.coral{grid-area:1/10/7/16;background:linear-gradient(145deg,#ff806e,#e94c54)}.home-zone.gold{grid-area:10/1/16/7;background:linear-gradient(145deg,#ffd65e,#dd9715)}.home-zone.mint{grid-area:10/10/16/16;background:linear-gradient(145deg,#4de0ae,#0fae7d)}
.home-spots{position:relative;z-index:2;width:70%;height:70%;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:8%;place-items:center}.home-spot{width:58%;aspect-ratio:1;border-radius:50%;background:rgba(14,23,31,.08);box-shadow:inset 0 2px 5px rgba(0,0,0,.22),0 1px rgba(255,255,255,.8);display:grid;place-items:center}
.center-orbit{grid-area:7/7/10/10;z-index:5;position:relative;background:radial-gradient(circle at 50% 50%,#123b71,#081427 62%,#050b13);border-radius:50%;margin:4%;display:grid;place-items:center;box-shadow:0 0 0 3px rgba(221,177,88,.65),0 0 28px rgba(25,132,255,.6),inset 0 0 20px rgba(29,139,255,.45)}.center-orbit:before{content:"";width:48%;height:48%;border-radius:50%;background:radial-gradient(circle at 30% 25%,#b9f0ff,#1c82e8 45%,#07376b 78%);box-shadow:0 0 16px #1687ff}.center-orbit:after{content:"";position:absolute;width:73%;height:27%;border:2px solid #ffd171;border-top-color:transparent;border-radius:50%;transform:rotate(-16deg)}
.goal-stack{position:absolute;inset:14%;z-index:6;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:1px;pointer-events:none}
.piece-stack{position:absolute;inset:2px;z-index:8;display:flex;align-items:center;justify-content:center;gap:0;flex-wrap:wrap}.piece{position:relative;width:72%;max-width:38px;aspect-ratio:.78;border:0;background:none;padding:0;cursor:default;filter:drop-shadow(0 4px 4px rgba(0,0,0,.38));transform-origin:50% 86%;animation:pieceIn .28s ease both}.piece:before{content:"";position:absolute;left:50%;top:5%;width:48%;aspect-ratio:1;border-radius:50%;transform:translateX(-50%);background:linear-gradient(145deg,var(--piece-hi),var(--piece-main) 55%,var(--piece-dark));box-shadow:inset 2px 2px 4px #fff8,0 2px 5px rgba(0,0,0,.3)}.piece:after{content:"";position:absolute;left:50%;bottom:3%;width:72%;height:58%;transform:translateX(-50%);border-radius:48% 48% 28% 28%/36% 36% 16% 16%;background:linear-gradient(145deg,var(--piece-hi),var(--piece-main) 48%,var(--piece-dark));box-shadow:inset 3px 2px 4px #fff6,0 2px 6px rgba(0,0,0,.3)}.piece.blue{--piece-main:#1689ff;--piece-hi:#74d4ff;--piece-dark:#0649a0}.piece.coral{--piece-main:#ff5d61;--piece-hi:#ffa28c;--piece-dark:#a52538}.piece.mint{--piece-main:#18c98f;--piece-hi:#76f1c4;--piece-dark:#08755a}.piece.gold{--piece-main:#eeb12a;--piece-hi:#ffe782;--piece-dark:#a96b08}.piece.clickable{cursor:pointer;animation:piecePulse 1s ease-in-out infinite}.piece.clickable:after{box-shadow:0 0 0 2px #fff,0 0 18px var(--piece-main),inset 3px 2px 4px #fff6}.piece.small{width:42%}.home-spot .piece{width:70%;max-width:44px}.goal-stack .piece{width:24%;max-width:30px}
@keyframes piecePulse{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-4px) scale(1.05)}}@keyframes pieceIn{from{opacity:.2;transform:scale(.7)}to{opacity:1;transform:scale(1)}}
.board-actions{margin:14px auto 0;max-width:940px;border-radius:22px;padding:10px;display:flex;gap:8px;align-items:center;justify-content:center}.secondary-btn,.danger-soft-btn,.primary-small{border:1px solid rgba(98,171,231,.24);background:rgba(4,21,38,.68);border-radius:13px;min-height:42px;padding:0 14px;cursor:pointer}.secondary-btn:hover,.primary-small:hover{background:rgba(32,122,191,.17)}.danger-soft-btn{color:#ff8095;border-color:rgba(255,90,122,.28)}.danger-soft-btn:disabled,.secondary-btn:disabled{opacity:.4;cursor:not-allowed}.roll-btn{border:1px solid #67d4ff;border-radius:18px;background:linear-gradient(145deg,#1188ff,#055bd3);box-shadow:0 0 0 5px rgba(42,169,255,.08),0 0 22px rgba(28,156,255,.48),inset 0 1px #fff7;min-height:54px;padding:0 28px;display:flex;align-items:center;gap:10px;font-weight:800;cursor:pointer;transition:.2s}.roll-btn:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 0 0 6px rgba(42,169,255,.1),0 0 32px rgba(28,156,255,.62)}.roll-btn:disabled{opacity:.38;cursor:not-allowed;filter:saturate(.45)}.mini-die{font-size:21px}.quote-card{max-width:940px;margin:10px auto 0;border-radius:18px;padding:10px 14px;display:flex;align-items:center;gap:11px;color:#c6def2}.quote-card b,.quote-card span{display:block}.quote-card div span{font-size:11px;color:var(--muted);margin-top:2px}.mini-orbit{font-size:24px;color:#6dcaff}
.side-panel{display:flex;flex-direction:column;gap:12px;position:sticky;top:103px;max-height:calc(100vh - 116px);overflow:auto;padding-right:2px}.side-panel::-webkit-scrollbar{width:5px}.side-panel::-webkit-scrollbar-thumb{background:#174367;border-radius:10px}.turn-card,.panel-card{border-radius:20px;padding:13px}.turn-card{min-height:104px;display:grid;grid-template-columns:64px 1fr auto;gap:13px;align-items:center;background:linear-gradient(145deg,rgba(7,46,86,.97),rgba(4,20,36,.94));border-color:rgba(24,138,255,.52);position:relative;overflow:hidden}.turn-card:after{content:"";position:absolute;right:-30px;top:-50px;width:150px;height:150px;border-radius:50%;background:radial-gradient(circle,rgba(33,127,255,.2),transparent 64%)}.turn-avatar{width:60px;height:60px;border-radius:50%;display:grid;place-items:center;font-size:30px;background:radial-gradient(circle at 40% 30%,#203c55,#09141f);border:2px solid #3bc4ff;box-shadow:0 0 20px rgba(36,162,255,.35)}.eyebrow{font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:#77bce9;font-weight:800}.turn-copy h2{font-size:20px;margin:4px 0 2px}.turn-copy p{font-size:11px;color:#a8c1d9;margin:0;line-height:1.4}.turn-crown{color:#ffd05f;font-size:19px;z-index:1}.panel-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:9px}.panel-heading h3{margin:0;font-size:14px}.panel-heading span{font-size:9px;color:var(--muted);text-transform:uppercase;letter-spacing:.08em}.players-list{display:flex;flex-direction:column;gap:7px}.player-row{display:grid;grid-template-columns:42px 1fr auto;gap:9px;align-items:center;padding:7px 8px;border:1px solid rgba(92,156,210,.13);border-radius:14px;background:rgba(4,16,29,.44)}.player-row.me{border-color:rgba(75,171,255,.42);background:rgba(15,91,151,.16)}.player-row.active{box-shadow:inset 3px 0 var(--row-color),0 0 14px color-mix(in srgb,var(--row-color) 15%, transparent)}.player-avatar{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:#0a2036;border:2px solid var(--row-color);font-size:20px}.player-copy b{font-size:12px;display:block}.player-copy small{font-size:9px;color:var(--muted)}.player-copy small.online{color:#4de7b1}.mini-pieces{display:flex;gap:2px}.mini-pawn{width:7px;height:12px;border-radius:50% 50% 38% 38%;background:var(--row-color);box-shadow:0 0 4px var(--row-color)}.ghost-player{height:54px;border-radius:14px;background:linear-gradient(90deg,rgba(255,255,255,.02),rgba(255,255,255,.055),rgba(255,255,255,.02));background-size:200% 100%;animation:shimmer 1.6s linear infinite}@keyframes shimmer{to{background-position:-200% 0}}
.dice-panel{display:grid;grid-template-columns:90px 92px 1fr;gap:12px;align-items:center}.dice-copy{display:flex;flex-direction:column}.dice-copy strong{font-size:30px;margin-top:4px}.dice-copy small{font-size:9px;color:var(--muted)}.dice-face{width:78px;aspect-ratio:1;border-radius:18px;background:linear-gradient(145deg,#f4f9ff,#a9cbef);border:1px solid #dcecff;box-shadow:0 10px 25px rgba(0,0,0,.32),0 0 23px rgba(31,153,255,.48),inset 4px 4px 8px #fff,inset -4px -5px 8px #6c9dd0;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);padding:12px;transform:rotate(-7deg);transition:.35s}.dice-face.rolling{animation:diceRoll .7s ease}.pip{width:10px;height:10px;border-radius:50%;background:#213958;box-shadow:inset 1px 1px 2px #0e1e34,1px 1px #fff8;place-self:center}.dice-tip{display:flex;align-items:center;gap:7px}.dice-tip p{font-size:10px;color:var(--muted);line-height:1.35;margin:0}@keyframes diceRoll{0%{transform:rotate(-7deg) scale(1)}35%{transform:rotate(120deg) scale(.85)}70%{transform:rotate(260deg) scale(1.08)}100%{transform:rotate(353deg) scale(1)}}
.log-panel{min-height:165px}.game-log{display:flex;flex-direction:column;gap:7px;max-height:145px;overflow:auto}.log-row{display:grid;grid-template-columns:8px 1fr auto;gap:8px;align-items:center;font-size:10px;color:#c4d8ea}.log-dot{width:7px;height:7px;border-radius:50%;background:#75bfff}.log-row[data-type="capture"] .log-dot{background:#ff6b79}.log-row[data-type="win"] .log-dot{background:#ffd45c;box-shadow:0 0 8px #ffd45c}.log-row[data-type="goal"] .log-dot{background:#52e6b4}.log-row time{font-size:8px;color:#607e9a}.muted{color:#6e8aa5;font-size:10px;margin:0}.comms-panel{padding:9px}.comms-tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;margin-bottom:8px}.comms-tab{border:0;background:transparent;color:#7f9bb4;padding:8px 5px;border-radius:10px;font-size:10px;cursor:pointer}.comms-tab.active{background:rgba(20,126,204,.18);color:#69cfff;box-shadow:inset 0 0 0 1px rgba(70,171,239,.22)}.comms-body{display:none}.comms-body.active{display:block}.chat-messages{height:145px;overflow:auto;padding:4px 5px;display:flex;flex-direction:column;gap:8px}.chat-msg{display:grid;grid-template-columns:28px 1fr;gap:7px;align-items:start}.chat-avatar{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:#0c2239;border:1px solid var(--msg-color);font-size:14px}.chat-copy{font-size:10px;color:#d4e7f7}.chat-meta{display:flex;gap:5px;align-items:center;margin-bottom:2px}.chat-meta b{font-size:9px}.chat-meta time{font-size:8px;color:#67849c}.chat-copy p{margin:0;line-height:1.35;word-break:break-word}.chat-form{display:grid;grid-template-columns:1fr 38px;gap:6px;margin-top:7px}.chat-form input{height:38px;border-radius:12px;border:1px solid rgba(96,160,213,.22);background:#061422;color:#e8f4ff;padding:0 11px;min-width:0}.chat-form input::placeholder{color:#59758f}.chat-form button{border-radius:11px;border:1px solid rgba(55,150,225,.4);background:#0b3d68;color:#77ccff;cursor:pointer}.chat-form button:disabled,.chat-form input:disabled{opacity:.45}.voice-hero{text-align:center;padding:12px 8px}.voice-orb{width:70px;height:70px;margin:0 auto 10px;border-radius:50%;display:grid;place-items:center;font-size:28px;background:radial-gradient(circle,#114e76,#071926 70%);border:1px solid #45bfff;box-shadow:0 0 0 7px rgba(62,185,255,.05),0 0 30px rgba(28,157,255,.3)}.voice-orb.live{animation:voicePulse 1.4s ease-in-out infinite}.voice-hero h4{margin:0 0 5px}.voice-hero p{margin:0 auto 12px;color:var(--muted);font-size:10px;max-width:250px}.voice-actions{display:flex;justify-content:center;gap:6px}.primary-small{background:linear-gradient(145deg,#1689ff,#0964cb);font-weight:700}.voice-hero small{display:block;color:#55718a;font-size:8px;margin-top:9px}@keyframes voicePulse{50%{box-shadow:0 0 0 12px rgba(62,185,255,.02),0 0 36px rgba(28,157,255,.62)}}.emote-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;padding:8px}.emote-grid button{aspect-ratio:1;border-radius:12px;border:1px solid rgba(86,155,210,.18);background:#071a2c;font-size:23px;cursor:pointer}.emote-grid button:hover{transform:translateY(-2px);background:#0d2943}
.modal-backdrop{position:fixed;inset:0;z-index:80;background:rgba(0,5,12,.72);backdrop-filter:blur(16px);display:none;place-items:center;padding:20px}.modal-backdrop.show{display:grid}.welcome-modal,.lobby-modal,.small-modal,.winner-modal{width:min(540px,100%);border-radius:30px;padding:28px;position:relative;text-align:center}.welcome-modal{width:min(580px,100%)}.welcome-logo{height:65px;display:grid;place-items:center;margin-bottom:5px}.welcome-modal h1{font-size:42px;margin:2px 0 9px;letter-spacing:-1.8px}.welcome-modal h1 span{color:#ffd875}.welcome-lead{color:#9ab3cb;line-height:1.55;font-size:13px;max-width:470px;margin:0 auto 20px}.profile-inline{display:grid;grid-template-columns:1fr 92px;gap:10px;text-align:left;margin-bottom:13px}.profile-inline label,.stacked-field{font-size:9px;color:#7c9ab7;text-transform:uppercase;letter-spacing:.08em}.profile-inline input,.stacked-field input{display:block;width:100%;margin-top:6px;height:46px;border-radius:14px;border:1px solid rgba(87,158,215,.24);background:#061523;color:#fff;padding:0 12px;text-transform:none;letter-spacing:0}.avatar-picker{margin-top:6px;width:100%;height:46px;border-radius:14px;border:1px solid rgba(87,158,215,.24);background:#061523;font-size:23px;cursor:pointer}.home-actions{display:flex;flex-direction:column;gap:8px}.home-action{width:100%;min-height:65px;border-radius:17px;border:1px solid rgba(88,158,216,.2);background:rgba(5,20,35,.78);display:grid;grid-template-columns:48px 1fr auto;gap:10px;align-items:center;text-align:left;padding:8px 15px;cursor:pointer}.home-action:hover{transform:translateY(-1px);border-color:rgba(80,183,255,.48)}.home-action.featured{background:linear-gradient(145deg,rgba(17,115,214,.52),rgba(8,47,84,.72));border-color:rgba(78,190,255,.55);box-shadow:0 0 25px rgba(13,130,231,.15)}.home-icon{width:43px;height:43px;border-radius:13px;background:#0a243d;display:grid;place-items:center;font-size:23px}.home-action b{display:block;font-size:13px}.home-action small{color:#86a4be;font-size:9px;margin-top:2px;display:block}.join-row{display:grid;grid-template-columns:1fr 120px;gap:7px;margin-top:10px}.join-row input{height:45px;border-radius:14px;border:1px solid rgba(91,162,219,.24);background:#061522;color:#dceeff;padding:0 13px;letter-spacing:.15em;text-transform:uppercase}.join-row button{border-radius:14px;border:1px solid rgba(87,190,255,.5);background:#0b558e;font-weight:800;cursor:pointer}.welcome-foot{display:flex;justify-content:center;gap:18px;color:#65839d;font-size:9px;margin-top:16px}.modal-close{position:absolute;right:15px;top:14px;width:34px;height:34px;border-radius:11px;border:1px solid rgba(91,160,216,.18);background:#071727;color:#90aac1;cursor:pointer;font-size:18px}.lobby-modal h2,.small-modal h2,.winner-modal h2{margin:7px 0 5px}.lobby-modal>p,.winner-modal>p{color:#90a9c1;font-size:11px;margin:0 0 15px}.big-code{border:1px solid rgba(78,180,255,.5);background:linear-gradient(145deg,#0c3154,#071b30);border-radius:18px;padding:13px 25px;margin:5px auto 17px;color:white;display:flex;flex-direction:column;cursor:pointer}.big-code span{font-size:28px;letter-spacing:.2em;font-weight:900}.big-code small{font-size:8px;color:#78a6ca;margin-top:4px;letter-spacing:.08em;text-transform:uppercase}.lobby-players{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}.lobby-player{border:1px solid rgba(88,158,215,.18);border-radius:15px;background:#071727;padding:10px;display:flex;align-items:center;gap:9px;text-align:left}.lobby-player .lp-avatar{width:37px;height:37px;border-radius:50%;display:grid;place-items:center;background:#0c2a45;border:2px solid var(--lp-color);font-size:19px}.lobby-player b{font-size:11px;display:block}.lobby-player small{font-size:8px;color:#7591a9}.lobby-countdown{height:24px;color:#7ecfff;font-size:11px;margin-top:10px}.start-game-btn{border:1px solid #63d1ff;background:linear-gradient(145deg,#178bff,#085dca);border-radius:16px;min-height:48px;padding:0 22px;font-weight:900;cursor:pointer;box-shadow:0 0 23px rgba(26,151,255,.26)}.small-modal{text-align:left;max-width:470px}.small-modal h2{font-size:23px}.stacked-field{display:block;margin-top:16px}.avatar-options{display:grid;grid-template-columns:repeat(6,1fr);gap:7px;margin:13px 0}.avatar-option{aspect-ratio:1;border-radius:13px;border:1px solid rgba(88,158,215,.22);background:#071727;font-size:22px;cursor:pointer}.avatar-option.selected{border-color:#62cfff;background:#0a3559;box-shadow:0 0 14px rgba(49,176,255,.18)}.small-modal .start-game-btn{width:100%}.rules-copy{display:flex;flex-direction:column;gap:9px;margin-top:15px}.rules-copy p{margin:0;padding:10px 12px;border-radius:13px;background:rgba(5,20,34,.65);color:#afc6da;font-size:11px;line-height:1.5}.rules-copy b{color:#69cfff}.winner-modal{max-width:460px}.trophy{font-size:64px;filter:drop-shadow(0 0 22px rgba(255,202,67,.4));animation:trophyIn .8s cubic-bezier(.2,1.4,.4,1)}@keyframes trophyIn{from{transform:scale(.3) rotate(-18deg);opacity:0}to{transform:scale(1) rotate(0);opacity:1}}.toast{position:fixed;left:50%;bottom:24px;z-index:120;transform:translate(-50%,20px);opacity:0;background:#071b2d;border:1px solid rgba(78,181,255,.35);box-shadow:0 14px 40px rgba(0,0,0,.45);border-radius:14px;padding:10px 15px;color:#d9efff;font-size:11px;pointer-events:none;transition:.24s}.toast.show{opacity:1;transform:translate(-50%,0)}
@media (max-width:1220px){.game-layout{grid-template-columns:minmax(560px,1fr) 350px}.tagline{display:none}.dice-panel{grid-template-columns:70px 76px 1fr}.dice-face{width:66px;padding:10px}.status-pill small{display:none}}
@media (max-width:980px){.app-shell{padding:10px}.topbar{grid-template-columns:1fr auto;top:7px}.topbar-center{display:none}.topbar-actions .status-pill:nth-child(2){display:none}.game-layout{grid-template-columns:1fr}.side-panel{position:static;max-height:none;display:grid;grid-template-columns:1fr 1fr;overflow:visible}.turn-card,.comms-panel{grid-column:1/-1}.board-frame{max-width:760px}.board-actions{max-width:760px;flex-wrap:wrap}.quote-card{max-width:760px}}
@media (max-width:640px){.app-shell{padding:6px;padding-bottom:20px}.topbar{min-height:58px;border-radius:18px;padding:8px 9px}.brand-orbit{width:39px;height:34px}.brand-orbit .planet{width:24px;height:24px}.brand-orbit:after{width:42px;height:12px;border-width:3px}.brand-text{font-size:18px}.topbar-actions{gap:5px}.status-pill{height:36px;padding:0 9px}.icon-btn{width:37px;height:36px}.leave-btn{height:36px;padding:0 9px;font-size:10px}.game-layout{margin-top:8px;gap:9px}.board-frame{padding:8px;border-radius:20px}.game-board{border-radius:14px;border-width:2px}.home-zone{margin:5%;border-radius:20%}.board-actions{margin-top:7px;border-radius:17px;padding:7px;display:grid;grid-template-columns:1fr 1fr 1.4fr}.board-actions .secondary-btn,.board-actions .danger-soft-btn{min-height:38px;padding:0 6px;font-size:10px}.roll-btn{grid-row:1/3;grid-column:3;min-height:84px;padding:0 12px;justify-content:center;flex-direction:column;font-size:11px}.quote-card{display:none}.side-panel{grid-template-columns:1fr;gap:8px}.turn-card,.comms-panel{grid-column:auto}.turn-card{min-height:90px;grid-template-columns:51px 1fr auto}.turn-avatar{width:48px;height:48px;font-size:24px}.turn-copy h2{font-size:17px}.panel-card,.turn-card{border-radius:16px}.dice-panel{grid-template-columns:72px 78px 1fr}.log-panel{display:none}.comms-panel{min-height:290px}.chat-messages{height:170px}.welcome-modal,.lobby-modal,.small-modal,.winner-modal{padding:21px;border-radius:24px}.welcome-modal h1{font-size:34px}.welcome-lead{font-size:11px}.welcome-foot{gap:8px;font-size:8px;flex-wrap:wrap}.home-action{min-height:60px}.join-row{grid-template-columns:1fr 100px}.profile-inline{grid-template-columns:1fr 76px}.lobby-players{grid-template-columns:1fr}.modal-backdrop{padding:10px}.avatar-options{grid-template-columns:repeat(6,1fr);gap:5px}.piece{max-width:26px}.home-spot .piece{max-width:31px}.board-cell.safe:after{font-size:8px}}
@media (max-width:390px){.topbar-actions .status-pill:first-child{display:none}.board-actions{grid-template-columns:1fr 1fr 1.25fr}.secondary-btn,.danger-soft-btn{font-size:9px}.welcome-modal{padding:17px}.home-action{grid-template-columns:43px 1fr auto;padding:7px 10px}.welcome-foot{display:none}}

/* V1.1 — animations de déplacement + finition iPhone */
.moving-piece{
  position:fixed!important;
  z-index:200!important;
  max-width:none!important;
  margin:0!important;
  pointer-events:none!important;
  animation:none!important;
  filter:drop-shadow(0 8px 8px rgba(0,0,0,.48)) drop-shadow(0 0 10px var(--piece-main));
  will-change:left,top,transform;
}

html{-webkit-text-size-adjust:100%;touch-action:manipulation}
body{overscroll-behavior-y:none;-webkit-tap-highlight-color:transparent}
button{touch-action:manipulation}

@supports (padding:max(0px)){
  .app-shell{
    padding-left:max(18px,env(safe-area-inset-left));
    padding-right:max(18px,env(safe-area-inset-right));
    padding-bottom:max(18px,env(safe-area-inset-bottom));
  }
}

@media (max-width:640px){
  @supports (padding:max(0px)){
    .app-shell{
      padding-left:max(6px,env(safe-area-inset-left));
      padding-right:max(6px,env(safe-area-inset-right));
      padding-bottom:max(16px,env(safe-area-inset-bottom));
    }
    .topbar{top:max(5px,env(safe-area-inset-top))}
  }
  .board-frame{width:100%;max-width:100%;}
  .board-column{width:100%;min-width:0}
  .game-layout{width:100%;max-width:100%;overflow:visible}
  .topbar-actions .status-pill:nth-child(2){display:flex;width:34px;padding:0;justify-content:center}
  .topbar-actions .status-pill:nth-child(2) b{display:none}
  .topbar-actions .status-pill:nth-child(2) .online-dot{margin:0}
  .turn-card{position:relative;overflow:hidden}
  .board-actions button{min-height:44px}
  .roll-btn{min-height:92px!important}
  .chat-form input,.chat-form button,.voice-actions button{min-height:44px}
  .home-action,.join-row input,.join-row button,.start-game-btn{min-height:48px}
}

@media (max-width:430px){
  .app-shell{padding-top:4px}
  .topbar{grid-template-columns:minmax(0,1fr) auto;gap:5px;padding:7px 8px}
  .brand{gap:7px}
  .brand-text{font-size:16px}
  .topbar-actions{gap:4px}
  .topbar-actions .status-pill:first-child{display:none}
  .icon-btn{width:36px}
  .leave-btn{padding:0 8px}
  .board-frame{padding:6px;border-radius:18px}
  .game-board{border-radius:12px}
  .board-actions{grid-template-columns:1fr 1fr 1.35fr;gap:5px}
  .secondary-btn,.danger-soft-btn{min-width:0}
  .turn-card{min-height:82px;padding:10px}
  .turn-crown{display:none}
  .panel-card{padding:10px}
  .welcome-modal{max-height:calc(100dvh - 18px);overflow:auto}
  .modal-backdrop{align-items:center;padding:9px}
}

@media (orientation:landscape) and (max-height:520px) and (max-width:950px){
  .topbar{position:relative;top:0}
  .game-layout{grid-template-columns:minmax(0,1fr) 320px;align-items:start}
  .board-frame{max-width:calc(100vh - 92px)}
  .side-panel{display:flex;max-height:calc(100vh - 92px);overflow:auto}
  .turn-card,.comms-panel{grid-column:auto}
  .log-panel{display:none}
}

@media (prefers-reduced-motion:reduce){
  *,*:before,*:after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}

/* V1.2 — résultat du dé directement sur le bouton principal */
.roll-btn{position:relative;isolation:isolate;min-width:190px}
.roll-mini-die{width:40px;height:40px;flex:0 0 40px;border-radius:11px;background:linear-gradient(145deg,#f8fbff,#b9d8f5);border:1px solid #e7f4ff;box-shadow:0 5px 13px rgba(0,0,0,.24),0 0 13px rgba(117,219,255,.48),inset 2px 2px 4px #fff,inset -2px -3px 5px #78a8d6;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);padding:6px;transform:rotate(-5deg);transition:transform .22s ease}
.roll-mini-pip{width:5px;height:5px;border-radius:50%;background:#173653;box-shadow:inset 1px 1px 1px #071827,1px 1px #fff9;place-self:center}
.roll-mini-die .die-idle-mark{grid-column:1/4;grid-row:1/4;place-self:center;font-size:22px;line-height:1}
.roll-btn-copy{min-width:0;display:flex;flex-direction:column;align-items:flex-start;line-height:1.08}
.roll-btn-copy>span{font-size:13px;white-space:nowrap}
.roll-btn-copy small{margin-top:4px;font-size:9px;font-weight:650;color:rgba(231,247,255,.78);white-space:nowrap}
.roll-btn-value{position:absolute;right:-8px;top:-8px;z-index:3;min-width:29px;height:29px;padding:0 6px;border-radius:999px;display:grid;place-items:center;background:#fff;color:#063458;border:2px solid #64d8ff;box-shadow:0 4px 14px rgba(0,0,0,.32),0 0 16px rgba(81,213,255,.7);font-size:15px;line-height:1}
.roll-btn-value[hidden]{display:none}
.roll-mini-die.rolling{animation:miniDiceRoll .62s cubic-bezier(.2,.8,.2,1)}
.roll-btn.dice-result-pop{animation:rollResultPop .38s ease-out}
@keyframes miniDiceRoll{0%{transform:rotate(-5deg) scale(1)}40%{transform:rotate(125deg) scale(.82)}75%{transform:rotate(285deg) scale(1.12)}100%{transform:rotate(355deg) scale(1)}}
@keyframes rollResultPop{0%{box-shadow:0 0 0 5px rgba(42,169,255,.08),0 0 22px rgba(28,156,255,.48),inset 0 1px #fff7}55%{box-shadow:0 0 0 9px rgba(109,225,255,.19),0 0 42px rgba(65,201,255,.82),inset 0 1px #fff9}100%{box-shadow:0 0 0 5px rgba(42,169,255,.08),0 0 22px rgba(28,156,255,.48),inset 0 1px #fff7}}
@media (max-width:640px){
  .roll-btn{min-width:0!important;min-height:94px!important;padding:8px 9px!important;gap:5px!important;justify-content:center!important;flex-direction:column!important;overflow:visible}
  .roll-mini-die{width:43px;height:43px;flex-basis:43px;padding:7px}
  .roll-mini-pip{width:5.5px;height:5.5px}
  .roll-btn-copy{align-items:center}
  .roll-btn-copy>span{font-size:11px}
  .roll-btn-copy small{font-size:8px;margin-top:2px}
  .roll-btn-value{right:-7px;top:-7px;min-width:31px;height:31px;font-size:16px}
}