@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Fraunces:opsz,wght,SOFT,WONK@9..144,700,20,1;9..144,900,20,1&display=swap');
:root{--paper:#f6edda;--ink:#252222;--muted:#62594f;--pink:#bc195d;--cyan:#167e9f;--yellow:#f5d743;--line:#968774;font:16px 'DM Sans',Arial,sans-serif;color:var(--ink);background:var(--paper)}*{box-sizing:border-box}body{margin:0}button,input,select{font:inherit}button,a{ -webkit-tap-highlight-color:transparent}button{cursor:pointer;color:inherit;background:#fffaf0;border:1.5px solid var(--ink);border-radius:5px;min-height:44px;padding:.55rem .9rem;font-weight:700;transition:transform .15s,background .15s}button:hover{background:#f9df88;transform:translateY(-2px)}button:disabled{cursor:default;opacity:.55;transform:none}button.primary{background:var(--yellow);box-shadow:3px 3px 0 var(--ink)}button.primary:hover{box-shadow:1px 1px 0 var(--ink);transform:translate(2px,2px)}button.danger{color:#a7153f}input,select{min-height:46px;padding:.65rem;border:1.5px solid var(--ink);border-radius:4px;background:#fffdf6;max-width:100%;min-width:0}label{display:grid;gap:.35rem;font-size:.9rem;font-weight:700}:focus-visible{outline:3px solid #005b80;outline-offset:4px}header{display:flex;align-items:center;justify-content:space-between;padding:14px clamp(14px,3vw,45px);gap:12px;border-bottom:2px solid var(--ink);flex-wrap:wrap}.wordmark{font:900 clamp(26px,4vw,42px)/.9 'Fraunces',Georgia,serif;text-decoration:none;color:var(--ink);letter-spacing:-2px}.wordmark span{color:var(--pink)}.wordmark i{display:block;font:500 12px 'DM Sans',Arial;letter-spacing:1px;margin-top:7px}.wordmark::first-letter{color:var(--cyan)}nav{display:flex;align-items:center;gap:8px;flex-wrap:wrap}nav button{font-size:.85rem;min-width:44px;background:transparent}nav svg{width:30px;height:22px;display:block}nav [aria-pressed=true]{background:#e6ca8e;outline:2px solid var(--ink);outline-offset:2px}main{max-width:1700px;margin:auto;padding:24px clamp(14px,3vw,45px)}h1,h2,h3,p{margin-top:0}h1,h2,h3{font-family:'Fraunces',Georgia,serif}h1{font-size:clamp(36px,5vw,76px);line-height:1.03;letter-spacing:-2px;margin-bottom:16px}h2{font-size:clamp(26px,3vw,40px);margin-bottom:14px}p{line-height:1.5}.subtle{color:var(--muted);font-size:.88rem}.preview-note{font-size:.8rem;border-top:1px solid var(--line);padding-top:12px;margin-top:20px;max-width:550px}.entry{display:grid;gap:32px;align-items:center;min-height:74dvh}.entry-visual{display:flex;position:relative;justify-content:center;align-items:center;padding:24px 0;isolation:isolate}.entry-visual .print{width:clamp(120px,22vw,245px);transform:rotate(-8deg);z-index:1}.entry-visual .print:nth-child(2){margin-left:-15%;transform:translateY(-28px) rotate(5deg);z-index:2}.entry-visual .print:nth-child(3){margin-left:-15%;transform:rotate(14deg);z-index:3}.entry-form{max-width:460px}.entry-form form{display:grid;gap:14px}.form-actions{display:flex;flex-wrap:wrap;gap:10px}.join-row{display:flex;gap:10px}.join-row input{width:100%;text-transform:uppercase}.stamp{display:inline-block;background:var(--pink);color:#fff;padding:8px 16px;font-weight:700;transform:rotate(-4deg);margin-bottom:22px}.lobby{max-width:920px;margin:6vh auto}.lobby-grid{display:grid;gap:32px}.seats{display:flex;flex-wrap:wrap;gap:12px;margin:24px 0}.seat{display:flex;gap:12px;align-items:center;padding:12px 18px;border-bottom:2px solid var(--ink)}.initial{display:grid;place-items:center;width:48px;height:48px;font:900 28px 'Fraunces',Georgia;background:var(--yellow);border-radius:50%}.room-code{font-size:30px;letter-spacing:4px}.table-top{display:flex;justify-content:space-between;gap:16px;align-items:start;flex-wrap:wrap;margin-bottom:16px}.table-top h2{margin:0}.players{display:flex;gap:8px;flex-wrap:wrap}.player{font-size:.85rem;text-align:left;background:transparent}.player.selected{background:#eadbbd}.player small{display:block;font-weight:400;margin-top:4px}.workspace{display:grid;gap:24px}.gallery{align-self:start;min-width:0}.gallery-head{display:flex;justify-content:space-between;gap:12px;align-items:center;margin-bottom:12px}.gallery-head h3{font:700 20px 'DM Sans',Arial;margin:0}.gallery-head span{font-size:.9rem}.board{--cols:3;display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr));gap:8px;max-width:650px;min-height:280px;margin:auto;align-items:start}.slot{padding:0;aspect-ratio:1/1.19;min-height:0;background:#eadfca;border:1.5px dashed #928575;border-radius:6px;display:grid;place-items:center;color:#746653;font-size:32px}.slot:hover{background:#ecd37f}.slot.active{background:#fff5b8;border:2px solid var(--ink)}.slot:disabled{opacity:1;cursor:default}.slot.filled{border:0;background:transparent;display:block}.print{--color:#30acd3;--ink-color:#30acd3;background:#fffaf0;border-radius:7px;border:1px solid #403a34;box-shadow:2px 4px 5px #31241724;overflow:hidden;text-align:left;width:100%;display:block;position:relative}.art{aspect-ratio:1;position:relative;background:var(--color);isolation:isolate;overflow:hidden}.art img{width:100%;height:100%;display:block;position:absolute;inset:0;z-index:2}.art .pattern{position:absolute;inset:0;z-index:0;opacity:.17;color:#222}.pattern svg{width:100%;height:100%}.color-label{position:absolute;top:5px;left:5px;z-index:4;background:#fff9ebed;padding:2px 5px;font-size:10px;font-weight:700;border-radius:2px;color:#252222}.print-rule{height:40px;display:flex;align-items:center;gap:5px;padding:4px 7px;font-size:clamp(9px,1vw,12px);font-weight:600;line-height:1.15}.print-rule b{font-size:15px;color:#823d06;white-space:nowrap}.print-rule .color-dot{flex-shrink:0}.print.foreground .art{background:color-mix(in srgb,var(--ink-color) 70%,white)}.print.foreground .art::after{content:'';position:absolute;inset:0;background:linear-gradient(115deg,transparent 55%,#ffffff38 55%,#ffffff0a 70%);pointer-events:none;z-index:3}.color-dot{display:inline-block;width:16px;height:20px;border:1px solid #292520;border-radius:2px;background:var(--color);vertical-align:middle;text-align:center;font-size:10px;line-height:18px;color:#181717;font-weight:800}.studio{min-width:0}.studio-title{display:flex;justify-content:space-between;gap:12px;align-items:start}.studio-title h3{font:700 21px 'DM Sans',Arial;margin:0 0 5px}.hand-label{display:flex;justify-content:space-between;margin:18px 0 8px;font-size:.88rem}.hand{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.card-choice{border:0;background:transparent;min-height:0;padding:0;position:relative;transition:transform .18s}.card-choice:hover{background:transparent;transform:translateY(-7px) rotate(-1deg)}.card-choice[aria-pressed=true]{transform:translateY(-9px);outline:3px solid var(--pink);outline-offset:4px;border-radius:6px}.card-choice[aria-pressed=true]::after{content:'✓';position:absolute;right:-8px;top:-8px;width:27px;height:27px;border-radius:50%;background:var(--pink);color:white;font-size:18px;display:grid;place-items:center}.mix-area{display:grid;grid-template-columns:minmax(0,135px) minmax(0,1fr);align-items:center;gap:20px;margin-top:24px;padding-top:20px;border-top:2px solid var(--ink)}.mix-area .print{animation:layer-in .25s ease-out}.mix-copy h3{margin-bottom:8px}.mix-copy p{font-size:.88rem;margin-bottom:12px}.mix-copy button{width:100%;margin:4px 0}.waiting{padding:32px 12px;text-align:center;background:#eaddc5;border-radius:8px}.waiting h3{font-size:26px}.explanation{padding:12px 0;max-width:650px;margin:auto}.history{margin-top:24px;border-top:1px solid var(--line);padding-top:10px;font-size:.8rem;color:var(--muted)}.scoreboard{display:flex;flex-wrap:wrap;gap:12px;margin:24px 0}.scoreboard .result{padding:15px 22px;background:#fff9eb;border-bottom:3px solid var(--ink)}.scoreboard strong{font:900 35px 'Fraunces',Georgia;display:block}.scoreboard .winner{background:var(--yellow)}.results-title{color:var(--pink)}.score-pop{position:absolute;z-index:5;inset:30% 10%;font:900 38px 'Fraunces',Georgia;text-align:center;background:#f5d743ef;border:2px solid var(--ink);transform:rotate(-5deg);align-content:center}.credit{font-size:.72rem;line-height:1.45;color:var(--muted);margin-top:28px}#notice{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);padding:12px 20px;background:#252222;color:white;border-radius:5px;z-index:50;max-width:calc(100% - 30px);box-shadow:0 3px 12px #0003}#notice:empty{display:none}dialog{position:fixed;background:var(--paper);color:var(--ink);border:2px solid var(--ink);border-radius:10px;padding:30px;width:min(680px,calc(100% - 24px));max-height:85dvh}dialog::backdrop{background:#231d1bc4}#close-dialog{float:right;margin:-16px -16px 8px 12px;font-size:25px}dialog h2{font-size:30px}dialog li{margin:10px 0;line-height:1.5}dialog .print{max-width:420px;margin:auto}dialog label{margin:20px 0}input[type=range]{width:100%}.setting-check{display:flex;align-items:center;gap:12px}.setting-check input{width:24px;min-height:24px}.connection{font-size:.8rem;color:#8c2245}.fade-in{animation:layer-in .3s ease-out}@keyframes layer-in{from{transform:translateY(-12px);opacity:.6}to{transform:translateY(0);opacity:1}}@media(min-width:680px){.entry{grid-template-columns:1fr 1fr}.entry-visual{order:2}.lobby-grid{grid-template-columns:1.2fr 1fr}.workspace{grid-template-columns:minmax(0,1fr) minmax(280px,.85fr);gap:28px}.hand{gap:8px}.board{gap:7px}.entry-visual .print{width:clamp(150px,18vw,260px)}}@media(min-width:1150px){.workspace{grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);gap:55px}.hand{gap:14px}.board{max-width:660px}.studio{padding:5px 0}.print-rule{height:42px}}@media(max-width:679px){header{padding:12px 14px}nav{gap:5px}nav button{padding:6px;font-size:12px}#fullscreen{display:none}.entry{gap:14px;padding-top:10px;min-height:0}.entry-visual{padding:8px 0 20px}.entry-visual .print{width:39%}.entry-form{max-width:none}.stamp{margin-bottom:12px}.table-top h2{font-size:28px}.workspace{gap:26px}.gallery .board{max-width:440px}.studio{border-top:2px solid var(--ink);padding-top:18px}.mix-area{grid-template-columns:105px 1fr}.print-rule{font-size:10px;height:38px}.board .print-rule{font-size:9px}.board .print-rule b{font-size:12px}.color-label{font-size:8px}.preview-note{font-size:12px}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}body.calm *,body.calm *::before,body.calm *::after{animation:none!important;transition:none!important}