:root{color-scheme:dark;font-family:system-ui,-apple-system,Segoe UI,sans-serif;color:#f0edf7;background:#0b0e17}*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 25% 50%,#30204777,transparent 65%),#0b0e17;min-height:100dvh}button{font:inherit;color:inherit;border:1px solid #655177;background:#251d34;border-radius:12px;padding:10px 16px;cursor:pointer}button:hover{background:#3c2851}button:focus-visible{outline:3px solid #d3a0ff;outline-offset:3px}button:disabled{opacity:.35;cursor:default}.display-header{min-height:72px;padding:14px 28px;display:flex;align-items:center;justify-content:space-between;gap:20px;border-bottom:1px solid #57416c55}.brand{font-weight:850;letter-spacing:.07em;font-size:22px}.brand span{font-size:14px;color:#a59ab7;font-weight:500;letter-spacing:0;margin-left:12px}.header-tools{display:flex;align-items:center;gap:18px;font-size:15px}#round{font-weight:750;color:#dac0ff}#connection{font-size:12px;color:#a0a4ae}#connection.connected{color:#9ac9a9}.display-layout{display:grid;grid-template-columns:minmax(0,1fr) clamp(250px,24vw,440px);gap:32px;padding:28px 32px;height:calc(100dvh - 72px)}.carousel{display:flex;flex-direction:column;min-width:0;min-height:0;gap:22px}#stage{flex:1;min-height:0;position:relative;margin:0 8px}.public-card{position:absolute;inset:0;border-radius:24px;border:1px solid #685079;isolation:isolate;box-shadow:0 16px 50px #0008;animation:cardEnter .38s ease-out;overflow:visible}.portrait{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;border-radius:24px;background:#14121e}.portrait-backdrop{position:absolute;inset:0;background-position:center;background-size:cover;filter:blur(18px) brightness(.28);border-radius:24px;overflow:hidden;z-index:-1}.card-shade{position:absolute;inset:0;border-radius:24px;background:linear-gradient(0deg,#090c17ee,transparent 48%,#090c1766)}.placeholder{position:absolute;inset:0;display:grid;place-items:center;font-size:clamp(90px,16vw,240px);color:#d1a3ff77;background:radial-gradient(circle,#5b357b55,#14121e);border-radius:24px}.card-heading{position:absolute;left:32px;right:32px;bottom:28px;z-index:4}.card-heading h2{margin:10px 0 0;font-size:clamp(28px,3.5vw,66px);line-height:1.08;text-wrap:balance;overflow-wrap:anywhere;text-shadow:0 2px 8px #000}.card-status{font-size:clamp(16px,1.4vw,25px);color:#dec4ff;letter-spacing:.05em;font-weight:700}.initiative-value{position:absolute;top:24px;right:24px;z-index:4;display:flex;flex-direction:column;align-items:center;border:1px solid #ac78d4;background:#17101dde;border-radius:18px;padding:10px 20px}.initiative-value strong{font-size:clamp(34px,4vw,68px);line-height:1}.initiative-value span{font-size:12px;color:#cdbadf;margin-top:5px}.turn-flames{position:absolute;inset:-22px;z-index:3;pointer-events:none}.turn-flames canvas{display:block;width:100%;height:100%;pointer-events:none}.public-card.active{box-shadow:0 0 0 2px #b47fe2,0 0 30px #a250d644}.carousel-controls{display:flex;justify-content:center;align-items:center;gap:14px;min-height:42px}#position{min-width:68px;text-align:center;color:#b7acc7}.follow{font-size:13px}.follow.following{color:#c9a3ea;border-color:#9565bd}.order-panel{display:flex;flex-direction:column;min-height:0;background:#151322bb;border:1px solid #473753;border-radius:20px;padding:20px}.order-panel h1{margin:0;font-size:clamp(18px,1.5vw,27px)}.order-caption{font-size:12px;color:#a89ab8;margin:8px 0 18px}#order{list-style:none;margin:0;padding:0;overflow:auto;min-height:0;scrollbar-width:thin;scrollbar-color:#6e4d85 transparent;overscroll-behavior:contain}#order li{margin-bottom:8px}.order-item{width:100%;display:grid;grid-template-columns:28px 44px minmax(0,1fr) 42px;gap:9px;align-items:center;text-align:left;padding:10px;border-color:transparent;background:#242033;border-radius:13px}.order-item.active{background:#4b2b66;border-color:#c896f3}.order-item.selected{outline:1px solid #77618d;outline-offset:-1px}.order-number{color:#a99abb;font-size:14px}.order-image{width:44px;height:44px;border-radius:10px;object-fit:cover;background:#3d304a;display:grid;place-items:center;font-size:22px}.order-name{font-size:clamp(15px,1.1vw,22px);font-weight:650;line-height:1.2;overflow-wrap:anywhere}.order-init{text-align:center;font-size:clamp(22px,2vw,34px);font-weight:800;color:#e4c9ff}.empty{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:#b3a6c5;padding:30px}.empty h2{font-size:32px;color:#e5d4f7}.empty p{max-width:520px;line-height:1.6}.empty small{max-width:540px;color:#8e819f;line-height:1.6}.display-layout.offline{opacity:.75}@keyframes cardEnter{from{opacity:0;transform:translateX(18px)}to{opacity:1;transform:none}}@media(min-width:1900px){.display-header{min-height:88px}.display-layout{height:calc(100dvh - 88px);gap:44px;padding:38px}.order-item{padding:15px;grid-template-columns:32px 60px minmax(0,1fr) 48px}.order-image{width:60px;height:60px}}@media(max-width:850px){.display-header{padding:12px 16px}.brand span{display:none}.header-tools{gap:10px}.header-tools button{font-size:12px;padding:8px}#connection{display:none}.display-layout{padding:20px 18px;gap:18px;grid-template-columns:minmax(0,1fr) 240px}.order-panel{padding:12px}.order-item{grid-template-columns:20px minmax(0,1fr) 32px;gap:5px}.order-image{display:none}.card-heading{left:20px;right:20px;bottom:20px}.initiative-value{top:16px;right:16px;padding:8px 12px}.carousel-controls{gap:8px}}@media(max-width:600px){.display-layout{height:auto;min-height:calc(100dvh - 72px);grid-template-columns:1fr;padding:20px 18px;gap:18px}.carousel{min-height:58dvh}#stage{min-height:48dvh}.order-panel{max-height:35dvh}.order-caption{margin-bottom:10px}.order-item{grid-template-columns:22px 36px minmax(0,1fr) 35px}.order-image{display:grid;width:36px;height:36px}.card-heading h2{font-size:30px}.card-status{font-size:15px}.follow{font-size:11px;padding:10px}.empty h2{font-size:24px}}@media(prefers-reduced-motion:reduce){.public-card{animation:none}}

/* Header can grow with fonts; remaining viewport belongs to the carousel. */
body{display:grid;grid-template-rows:auto minmax(0,1fr);height:100dvh;overflow:hidden}.display-layout{height:auto;min-height:0}@media(max-width:600px){body{display:block;height:auto;overflow:auto}.display-layout{min-height:calc(100dvh - 72px)}}
/* A hand of cards behind a large, image-fitted portrait. */
body{background:linear-gradient(#090c1540,#090c1566),url('fon.jpg') center/cover fixed no-repeat}.display-header{background:#10141ec9;backdrop-filter:blur(12px)}.display-title{font-size:16px;font-weight:600;color:#d4c9e2}.order-panel{background:#151322d9;backdrop-filter:blur(16px)}#stage{perspective:1100px;overflow:visible}.public-card{width:min(66%,620px);height:calc(100% - 84px);left:50%;right:auto;top:0;bottom:auto;transform:translateX(-50%);border:0;background:transparent;box-shadow:none!important;display:flex;flex-direction:column;gap:16px;z-index:20;animation:fanEnter .5s ease-out}.art-space{flex:1;min-height:0;display:flex;justify-content:center;align-items:center}.art-frame{width:100%;height:100%;position:relative;border-radius:24px;background:#10131e;border:1px solid #685079;box-shadow:0 16px 42px #0009;isolation:isolate}.public-card.active .art-frame{box-shadow:0 0 0 1px #c99bea,0 10px 44px #000b;animation:portalBreathe 7s ease-in-out infinite}.portrait{object-fit:contain;background:transparent}.placeholder{font-size:clamp(80px,12vw,190px)}.card-shade{background:linear-gradient(0deg,#0b091c55,transparent 35%)}.art-frame.bloodied .card-shade{background:radial-gradient(ellipse at bottom,#9d163c44,transparent 65%)}.art-frame.down .portrait{filter:grayscale(.8) brightness(.65)}.card-heading{position:relative;left:auto;right:auto;bottom:auto;text-align:center;background:#101321e0;padding:12px 18px;border:1px solid #73608766;border-radius:18px;backdrop-filter:blur(16px);flex:none}.card-heading h2{font-size:clamp(24px,2.6vw,48px);margin:0 0 10px}.card-status{position:absolute;bottom:14px;left:12px;right:12px;text-align:center;font-size:clamp(12px,1.1vw,20px);padding:7px 10px;background:#181021b8;border-radius:9px;z-index:4}.initiative-value{top:12px;right:12px;padding:8px 13px}.initiative-value strong{font-size:clamp(28px,3vw,52px)}.initiative-value span{font-size:10px}.public-badges{display:flex;justify-content:center;align-items:center;gap:7px;flex-wrap:wrap}.health-badge,.ally-metric,.state-badge{display:inline-flex;align-items:center;gap:5px;border-radius:9px;padding:5px 9px;border:1px solid #61516e;background:#30243b;color:#e0d1ef;font-size:clamp(12px,1.1vw,20px);line-height:1.25}.health-badge.healthy{color:#b8d5bc;background:#233a30;border-color:#4a6756}.health-badge.wounded{color:#ffe0aa;background:#4a3627;border-color:#95653e}.health-badge.bloodied,.health-badge.down{color:#ffc2d0;background:#551f34;border-color:#ba5a7a}.state-badge.concentration{color:#d9b8ff;background:#392453;border-color:#956ab7}.ally-metric{font-weight:750;color:#d6edea;background:#21383b;border-color:#4e777b}.fan-deck{position:absolute;inset:0;pointer-events:none;z-index:1}.fan-card{pointer-events:auto;position:absolute;bottom:4px;left:calc(50% + var(--offset)*clamp(48px,6vw,90px));width:clamp(95px,13vw,185px);height:clamp(160px,24vh,260px);padding:0;overflow:hidden;border-radius:14px;border:1px solid #a18aa7;background:linear-gradient(135deg,#3f2d55,#141826);transform:translateX(-50%) translateY(var(--rise)) rotate(var(--tilt));transform-origin:50% 100%;box-shadow:0 8px 22px #0009;filter:brightness(.7);transition:filter .25s,translate .25s}.fan-card:hover,.fan-card:focus-visible{filter:brightness(1.1);translate:0 -12px}.fan-card.current{border-color:#d09eff}.fan-card img{width:100%;height:100%;object-fit:cover}.fan-name{position:absolute;bottom:0;left:0;right:0;padding:9px 6px;background:linear-gradient(transparent,#10121a 30%);font-size:12px;font-weight:700;line-height:1.2;text-align:center;color:#eee7f6}.carousel-controls{position:relative;z-index:25;background:#101420d9;border:1px solid #55456877;align-self:center;border-radius:16px;padding:7px 10px;backdrop-filter:blur(12px)}.order-copy{min-width:0;display:flex;flex-direction:column;gap:4px}.order-health{font-size:12px;color:#e7bc80}.order-health.bloodied,.order-health.down{color:#efa0b8}.order-conditions{font-size:11px;color:#cdb0e1;line-height:1.3;overflow-wrap:anywhere}@keyframes portalBreathe{0%,100%{transform:scale(1)}50%{transform:scale(1.012)}}@keyframes fanEnter{from{opacity:0;translate:0 12px}to{opacity:1;translate:0 0}}@media(max-width:850px){.public-card{width:76%;gap:10px}.card-heading{padding:9px 12px}.card-heading h2{font-size:26px}.health-badge,.ally-metric,.state-badge{font-size:12px}.fan-card{left:calc(50% + var(--offset)*45px);width:100px;height:165px}.initiative-value strong{font-size:28px}.card-status{font-size:12px}}@media(max-width:600px){.carousel{min-height:68dvh}#stage{min-height:58dvh}.public-card{width:76%;height:calc(100% - 65px)}.card-heading h2{font-size:23px}.fan-card{width:85px;height:130px;left:calc(50% + var(--offset)*35px)}.carousel-controls{margin-top:12px}.display-title{font-size:13px}.header-tools{gap:8px}.health-badge,.ally-metric,.state-badge{font-size:11px}.public-badges{gap:5px}}@media(prefers-reduced-motion:reduce){.public-card,.public-card.active .art-frame{animation:none}.fan-card{transition:none}}
/* Large centre card, with directional movement into and out of the hand. */
.display-header{min-height:54px;padding:8px 24px}.header-tools button{font-size:12px;padding:8px 12px}.display-layout{padding:20px 26px;gap:24px}.carousel{gap:12px}.public-card{width:min(82%,840px);height:calc(100% - 38px);gap:10px;animation:none}.card-heading{padding:9px 15px;align-self:center;width:auto;max-width:100%;min-width:60%}.card-heading h2{font-size:clamp(24px,2.3vw,42px);margin-bottom:7px}.carousel-controls{min-height:40px;padding:5px 8px}.carousel-controls button{padding:8px 13px}.fan-card{height:clamp(180px,27vh,300px);filter:brightness(.76)}.deck-enter{animation:deckDraw .6s cubic-bezier(.2,.7,.2,1) both;transform-origin:50% 100%}.deck-exit{pointer-events:none;z-index:15;animation:deckReturn .6s cubic-bezier(.4,0,.4,1) both;transform-origin:50% 100%}.deck-exit .art-frame{animation:none!important}@keyframes deckDraw{from{opacity:.3;transform:translateX(calc(-50% + var(--direction)*180px)) translateY(65px) translateZ(-160px) rotateY(calc(var(--direction)*-24deg)) rotateZ(calc(var(--direction)*8deg)) scale(.8)}to{opacity:1;transform:translateX(-50%) translateY(0) translateZ(0) rotateY(0) rotateZ(0) scale(1)}}@keyframes deckReturn{from{opacity:1;transform:translateX(-50%) translateY(0) translateZ(0) rotateY(0) rotateZ(0) scale(1)}to{opacity:0;transform:translateX(calc(-50% - var(--direction)*180px)) translateY(95px) translateZ(-220px) rotateY(calc(var(--direction)*28deg)) rotateZ(calc(var(--direction)*-13deg)) scale(.72)}}@media(max-width:850px){.display-layout{padding:18px;gap:18px}.public-card{width:92%;height:calc(100% - 38px)}.card-heading h2{font-size:25px}.card-heading{padding:8px 10px;min-width:68%}}@media(max-width:600px){.display-header{padding:8px 12px}.display-layout{padding:18px 14px}.public-card{width:94%;height:calc(100% - 40px)}.card-heading h2{font-size:23px}.card-heading{min-width:75%}.fan-card{height:145px}.carousel{min-height:72dvh}#stage{min-height:63dvh}.carousel-controls{margin-top:8px}}@media(prefers-reduced-motion:reduce){.deck-enter{animation:none}.deck-exit{display:none;animation:none}}

.health-badge.critical{color:#ffd0da;background:#781b35;border-color:#ed7393}.order-health.critical{color:#ff8aa7}.art-frame.critical .card-shade{background:radial-gradient(ellipse at bottom,#b411485e,transparent 75%)}

.health-badge.injured{color:#ffc798;background:#603521;border-color:#c78048}.order-health.injured{color:#ffba81}