:root{color-scheme:dark;--cream:#fbf1d6;--gold:#dcbf7c;--forest:#0d3028;font-family:Manrope,system-ui,sans-serif;color:var(--cream);background:#0a261f}*{box-sizing:border-box}body{margin:0;min-height:100svh;background:#0a261f url('/assets/stage-background.png') center/cover fixed}button,a{touch-action:manipulation}button{font:inherit;cursor:pointer;border:1px solid #d7be7d55;background:transparent;color:var(--cream);padding:12px 20px;border-radius:8px;transition:background .3s cubic-bezier(.32,.72,0,1),transform .3s cubic-bezier(.32,.72,0,1)}button:hover{background:#e5cb8a18}button:active{transform:translateY(1px)}button:disabled{opacity:.4;cursor:default}button:focus-visible,a:focus-visible{outline:3px solid #f7d58d;outline-offset:4px}.primary{background:var(--gold);color:#13352b;border-color:var(--gold);font-weight:650;text-decoration:none;display:inline-block;padding:14px 24px;border-radius:8px}.primary:hover{background:#efdaa4}.subtle{font-size:14px}.skip{position:fixed;top:-100px;left:20px;background:var(--cream);color:#123a2c;padding:12px;z-index:10}.skip:focus{top:12px}#app{max-width:1920px;margin:auto;padding:36px 64px 20px}.top{display:flex;justify-content:space-between;align-items:center;gap:24px}.eyebrow{font-size:12px;letter-spacing:.24em;color:var(--gold);font-weight:650}h1{font-family:Georgia,'Times New Roman',serif;font-size:64px;font-weight:400;line-height:1.08;letter-spacing:-.035em;margin:10px 0 0;text-wrap:balance}h2{font-family:Georgia,serif;font-size:32px;font-weight:400;margin:0}.tools{display:flex;align-items:center;gap:12px}.connection{font-size:12px;color:#b9c4b4;white-space:nowrap}.connection:before{content:'';display:inline-block;width:6px;height:6px;border-radius:50%;background:#d6ab58;margin-right:8px}.connection.online:before{background:#9dc99a}.status{display:flex;align-items:center;justify-content:center;gap:24px;margin:16px 0 22px}.phase{font-size:18px;letter-spacing:.02em;margin:0;color:#eadfc5}.timer{font-variant-numeric:tabular-nums;font-size:24px;color:var(--gold);min-width:78px}.teams{display:grid;grid-template-columns:1fr 1fr;gap:44px}.team{min-width:0;position:relative}.team-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.percent{font-family:Georgia,serif;font-size:36px;font-weight:400;color:var(--gold)}.postcard{position:relative;aspect-ratio:1448/1086;background:#f3e4c2;overflow:hidden;box-shadow:0 8px 40px #0005;border:7px solid #efdfb9;outline:1px solid #c8ab6a;outline-offset:4px}.postcard img{width:100%;height:100%;position:absolute;inset:0;object-fit:fill}.paint-layer{transition:clip-path .65s cubic-bezier(.32,.72,0,1)}.team-bottom{display:grid;grid-template-columns:112px 1fr;gap:24px;margin-top:22px}.qr img{display:block;background:#fff;padding:5px;width:108px;height:108px}.qr span{display:block;font-size:11px;line-height:1.45;margin-top:8px;color:#d7d4bb;max-width:110px}.colors{display:grid;grid-template-columns:1fr 1fr;gap:8px 20px;align-content:start}.color-row{display:grid;grid-template-columns:10px 1fr auto;column-gap:8px;align-items:center;min-width:0;padding:6px 0;border-bottom:1px solid #d6c38920}.swatch{background:var(--paint);width:10px;height:10px;border-radius:50%;grid-row:1/3}.color-name{font-size:12px;color:#e3d8bc}.player{font-size:11px;color:#b3bca8;grid-column:2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:150px}.color-progress{font-size:13px;font-weight:500;grid-column:3;grid-row:1/3;font-variant-numeric:tabular-nums}.complete .color-progress{color:var(--gold)}.complete .color-progress:after{content:' ✓'}.foot{display:flex;align-items:center;justify-content:center;gap:32px;margin-top:24px}.instruction{font-size:14px;color:#d4d3b9;text-align:center;margin:0}.controls{display:flex;gap:12px;flex-shrink:0}.error{color:#ffb3a5;font-size:14px;min-height:20px;text-align:center}.confirm{display:flex;justify-content:center;align-items:center;gap:12px;margin-top:16px;flex-wrap:wrap}.confirm:empty{display:none}.confirm span{font-size:14px}.welcome{max-width:800px;margin:12vh auto;text-align:center}.welcome h1{font-size:88px;margin:24px 0}.welcome p{font-size:20px;line-height:1.7;max-width:600px;margin:24px auto 32px;color:#e0ddc5}.loading{text-align:center;margin-top:30vh;color:var(--gold)}.release{grid-column:2/4;padding:4px 0;text-align:left;border:0;font-size:10px;color:#d7be7d;min-height:26px}.host #app{max-width:1500px}.host .colors{column-gap:16px}.host .team-bottom{grid-template-columns:108px 1fr}.host .foot{justify-content:space-between}.host .postcard{max-height:440px}.display .tools{opacity:.4;transition:opacity .3s}.display .tools:hover,.display .tools:focus-within{opacity:1}.display .connection{display:none}.winner .postcard{outline:3px solid #eecb74;box-shadow:0 0 60px #ebce7355}.confetti{position:fixed;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none;z-index:4}body[data-phase=countdown] .timer{font-family:Georgia,serif;font-size:48px;line-height:1}body[data-phase=finished] .phase{color:var(--gold);font-size:24px}body[data-phase=paused] .postcard{filter:saturate(.75)}@media(min-width:1600px) and (min-height:950px){#app{padding-top:44px}.display h1{font-size:80px}.display .postcard{max-height:610px}.display .team-bottom{margin-top:26px}.display .colors{gap:12px 28px}.display .color-name{font-size:15px}.display .player{font-size:13px}.display .color-progress{font-size:18px}.display .team-bottom{grid-template-columns:136px 1fr}.display .qr img{width:128px;height:128px}}@media(max-width:1100px){#app{padding:28px}.top{align-items:flex-start}.tools{flex-wrap:wrap;justify-content:flex-end}.tools .connection{width:100%;text-align:right}h1{font-size:48px}.teams{gap:28px}.team-bottom,.host .team-bottom{grid-template-columns:80px 1fr;gap:16px}.qr img{width:80px;height:80px}.colors{grid-template-columns:1fr;gap:0}.color-row{padding:4px 0}.player{max-width:170px}.foot,.host .foot{flex-direction:column;gap:16px}.qr span{font-size:10px}.release{min-height:24px}.host .colors{grid-template-columns:1fr 1fr}.host .team-bottom{grid-template-columns:1fr}.host .qr{display:flex;align-items:center;gap:12px}.host .qr span{font-size:12px}}@media(max-width:650px){#app{padding:24px 20px}.top{display:block}h1{font-size:42px}.eyebrow{font-size:10px}.tools{margin-top:20px;justify-content:flex-start}.tools .connection{width:auto;text-align:left}.tools button{font-size:11px;padding:8px 10px}.status{margin:24px 0 20px;gap:16px;justify-content:space-between}.phase{font-size:14px}.teams{grid-template-columns:1fr;gap:36px}h2{font-size:28px}.percent{font-size:32px}.team-bottom,.host .team-bottom{grid-template-columns:90px 1fr;gap:16px}.host .qr{display:block}.host .qr span{font-size:10px}.colors,.host .colors{grid-template-columns:1fr 1fr;gap:4px 10px}.color-name{font-size:11px}.player{font-size:10px;max-width:75px}.color-progress{font-size:11px}.color-row{column-gap:5px}.swatch{width:8px;height:8px}.release{font-size:9px}.welcome{margin:12vh auto}.welcome h1{font-size:56px}.welcome p{font-size:18px}.controls{width:100%;justify-content:center}.instruction{font-size:13px}.qr img{width:86px;height:86px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{transition:none!important;animation:none!important}.confetti{display:none}}
@keyframes color-complete{0%{box-shadow:0 0 0 0 var(--paint);transform:scale(1)}35%{transform:scale(1.4)}100%{box-shadow:0 0 0 12px transparent;transform:scale(1)}}.complete .swatch{animation:color-complete .85s cubic-bezier(.32,.72,0,1)}@media(prefers-reduced-motion:reduce){.complete .swatch{animation:none}}
/* The event screen reserves space for every QR and player before sizing the art. */
@media(min-width:651px){
 .display{height:100svh;overflow:hidden}
 .display #app{height:100svh;max-width:1920px;padding:24px 40px;display:grid;grid-template-rows:90px 36px minmax(0,1fr) 24px;gap:12px}
 .display .top{min-height:0}.display h1{font-size:64px}.display .eyebrow{font-size:11px}
 .display .status{margin:0;min-height:0}.display .phase{font-size:17px}.display .timer{font-size:24px}
 .display .teams{min-height:0;gap:40px}
 .display .team{min-height:0;display:grid;grid-template-rows:40px minmax(0,1fr) 150px;gap:16px}
 .display .team-head{margin:0}.display h2{font-size:30px}.display .percent{font-size:32px}
 .display .postcard{height:100%;width:auto;max-width:100%;max-height:100%;aspect-ratio:1448/1086;justify-self:center;margin:0;align-self:center}
 .display .team-bottom{margin:0;grid-template-columns:128px 1fr;gap:24px;min-height:0;align-self:start}
 .display .qr img{width:112px;height:112px}.display .qr span{font-size:10px;margin-top:6px;max-width:112px}
 .display .colors{grid-template-columns:1fr 1fr;gap:8px 20px}.display .color-row{padding:6px 0}.display .color-name{font-size:13px}.display .player{font-size:11px;max-width:155px}.display .color-progress{font-size:14px}
 .display .foot{margin:0;min-height:0}.display .instruction{font-size:13px}
 .display .confirm:empty,.display .error:empty{display:none}
 .display .error:not(:empty){position:fixed;bottom:0;left:0;right:0;background:#163c30;padding:10px;margin:0;z-index:6}
 .display[data-phase=countdown] .timer{font-size:36px}.display[data-phase=finished] .phase{font-size:22px}
}
@media(min-width:651px) and (max-height:850px){
 .display #app{padding:18px 32px;grid-template-rows:76px 30px minmax(0,1fr) 20px;gap:10px}
 .display h1{font-size:52px}.display .team{grid-template-rows:34px minmax(0,1fr) 126px;gap:12px}
 .display .team-bottom{grid-template-columns:100px 1fr;gap:20px}.display .qr img{width:94px;height:94px}.display .qr span{max-width:94px;font-size:9px}
 .display .colors{gap:4px 16px}.display .color-row{padding:5px 0}.display h2{font-size:26px}.display .percent{font-size:28px}
}

.display .postcard img{object-fit:contain}