@font-face{font-family:Barlow;src:url('./fonts/Barlow-Regular.ttf')}@font-face{font-family:Barlow;src:url('./fonts/Barlow-SemiBold.ttf');font-weight:600}@font-face{font-family:BarlowCondensed;src:url('./fonts/BarlowCondensed-ExtraBold.ttf');font-weight:800}@font-face{font-family:ArchivoBlack;src:url('./fonts/ArchivoBlack-Regular.ttf');font-weight:900}@font-face{font-family:NotoTC;src:url('./fonts/NotoSansTC-subset.woff2');font-weight:900}
:root{--red:#dc3025;--paper:#fff4dc;--ink:#211b1a;--accent:#f8d447;--jade:#143e35;--display:BarlowCondensed;--curve:2px;--line:3px}
*{box-sizing:border-box}html{background:var(--paper);color:var(--ink);font-family:Barlow,sans-serif}body{margin:0;min-width:320px;color:var(--ink)}button,input{font:inherit}button,a,input{touch-action:manipulation}button,a{-webkit-tap-highlight-color:transparent}button{cursor:pointer}a{color:inherit}button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid var(--ink);outline-offset:6px}::selection{background:var(--ink);color:var(--paper)}[hidden]{display:none!important}.skip-link{position:fixed;left:20px;top:-80px;z-index:20;padding:14px;background:var(--paper);border:3px solid var(--ink)}.skip-link:focus{top:10px}
.site-header{position:absolute;inset:0 0 auto;z-index:5;height:96px;display:flex;align-items:center;justify-content:space-between;padding:0 4.3vw;pointer-events:none}.site-header>*{pointer-events:auto}.wordmark{display:flex;gap:13px;align-items:center;text-decoration:none;font-family:var(--display),sans-serif;font-size:27px;line-height:.92;color:var(--paper)}.brand-mark{width:39px;height:46px;border:2px solid var(--ink);border-radius:5px;background:var(--paper);color:var(--red);font:900 29px NotoTC,serif;display:grid;place-items:center;box-shadow:3px 3px 0 var(--ink);transform:rotate(-8deg)}.wordmark small{display:block;font-family:Barlow,sans-serif;font-size:11px;letter-spacing:.15em;margin-top:6px;font-weight:600}.concept-nav{display:flex;gap:2px;padding:4px;border:2px solid var(--ink);border-radius:24px;background:var(--paper)}.concept-nav a{font-size:14px;font-weight:600;line-height:1;text-decoration:none;padding:8px 14px;border-radius:18px}.concept-nav a[aria-current=page]{background:var(--ink);color:var(--paper)}
.menu-shell{display:grid;grid-template-columns:58% 42%;min-height:100svh}.tile-panel{position:relative;background:var(--red);overflow:hidden;min-height:720px;border-right:var(--line) solid var(--ink);isolation:isolate}.tile-panel::after{content:'';position:absolute;right:-2px;top:0;width:24px;height:100%;background:var(--paper);clip-path:polygon(100% 0,100% 100%,0 100%);z-index:0}.comic-rays{position:absolute;width:780px;height:780px;left:48%;top:51%;transform:translate(-50%,-50%) rotate(8deg);background:repeating-conic-gradient(from 12deg,var(--paper) 0deg 10deg,transparent 10deg 26deg);clip-path:circle(47%);opacity:.87;z-index:-1}.print-dots{position:absolute;left:-90px;bottom:-90px;width:390px;height:390px;border-radius:50%;background:radial-gradient(var(--ink) 1.6px,transparent 2px) 0 0/11px 11px;opacity:.38;transform:rotate(-10deg);z-index:0}.chinese-title{position:absolute;left:7%;top:13%;font:900 clamp(100px,10.5vw,160px)/1 NotoTC,serif;color:var(--paper);-webkit-text-stroke:2px var(--ink);paint-order:stroke fill;transform:rotate(-9deg);z-index:1;letter-spacing:-.04em;text-shadow:5px 7px 0 var(--ink)}.tile-stage{position:absolute;left:50%;top:53%;transform:translate(-50%,-50%);width:85%;height:66%;z-index:2;cursor:grab;outline:none}.tile-stage:active{cursor:grabbing}.tile-stage canvas{display:block;width:100%;height:100%}.tile-shadow{position:absolute;left:50%;top:78%;transform:translate(-50%,-50%) rotate(-7deg);width:38%;height:35px;background:rgba(33,27,26,.21);filter:blur(9px);border-radius:50%;z-index:1}.tile-controls{position:absolute;bottom:12%;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:12px;z-index:3;white-space:nowrap;font-weight:600;font-size:15px}.rotation-toggle{width:34px;height:34px;display:grid;place-items:center;background:var(--paper);border:2px solid var(--ink);border-radius:50%;color:var(--ink);padding:6px}.rotation-toggle svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}.rotation-toggle .play-icon{display:none}.rotation-toggle[aria-label='Resume tile rotation'] .pause-icon{display:none}.rotation-toggle[aria-label='Resume tile rotation'] .play-icon{display:block}.panel-caption{position:absolute;bottom:42px;left:7.4%;font-size:17px;color:var(--paper);font-weight:600}.club-orbit,.club-stage{display:none}
.menu-panel{position:relative;display:flex;align-items:center;justify-content:center;padding:125px clamp(35px,4.6vw,76px) 100px;background:var(--paper);min-height:720px}.view{width:100%;max-width:440px}.home-view h1,.view h2{font-family:var(--display),sans-serif;font-weight:800;font-size:clamp(64px,6.8vw,104px);line-height:.88;letter-spacing:-.025em;margin:0 0 24px}.intro,.form-intro{font-size:21px;line-height:1.35;margin:0 0 42px}.menu-actions{display:flex;flex-direction:column;gap:20px}.action-button{position:relative;display:flex;align-items:center;justify-content:space-between;gap:18px;width:100%;min-height:76px;border:var(--line) solid var(--ink);border-radius:var(--curve);padding:14px 24px;color:var(--ink);font-size:25px;font-weight:600;line-height:1.15;text-align:left;white-space:nowrap;transition:transform 150ms cubic-bezier(.16,1,.3,1),box-shadow 150ms cubic-bezier(.16,1,.3,1)}.action-button svg{flex:0 0 28px;width:28px;height:28px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}.primary{background:var(--accent);box-shadow:6px 6px 0 var(--ink)}.secondary{background:var(--paper);box-shadow:6px 6px 0 var(--red)}.action-button:hover{transform:translate(-2px,-2px);box-shadow:8px 8px 0 var(--ink)}.action-button:active{transform:translate(4px,4px);box-shadow:1px 1px 0 var(--ink)}.text-button,.back-button{border:0;background:none;color:var(--ink);padding:0;font-weight:600;font-size:17px}.how-to{margin-top:36px;display:inline-flex;gap:18px;align-items:center;text-decoration:underline;text-underline-offset:5px}.menu-footer{position:absolute;bottom:38px;left:clamp(35px,4.6vw,76px);right:clamp(35px,4.6vw,76px);font-size:13px;line-height:1.5;display:flex;gap:12px;flex-wrap:wrap;justify-content:space-between}.study-label{font-size:12px;color:#79594c}
.back-button{margin-bottom:26px;display:inline-flex;gap:10px;align-items:center}.form-view h2,.rules-view h2,.preview-view h2{font-size:clamp(54px,5vw,74px);margin-bottom:18px}.form-intro{font-size:18px;margin-bottom:24px}form{display:flex;flex-direction:column}form>label:not(.switch-row){display:block;font-size:15px;font-weight:600;margin:0 0 8px}input:not([type=checkbox]){border:2px solid var(--ink);background:#fffaf0;border-radius:var(--curve);padding:12px 14px;height:50px;width:100%;color:var(--ink);font-size:18px;outline-color:var(--red);margin-bottom:18px;caret-color:var(--red)}input::placeholder{color:#7b6558;opacity:1}.code-input{text-transform:uppercase;letter-spacing:.12em;font-weight:600}.form-error{font-size:15px;font-weight:600;color:#a91d18;line-height:1.3;min-height:0;margin:0}.form-error:not(:empty){margin:0 0 16px}.form-view .action-button{min-height:62px;font-size:22px}.field-help{font-size:13px;margin:-10px 0 20px}.switch-row{position:relative;display:flex;align-items:center;justify-content:space-between;gap:20px;font-weight:600;margin:0 0 22px;min-height:34px;cursor:pointer}.switch-row input{position:absolute;right:0;width:46px;height:28px;opacity:0}.switch-track{width:46px;height:28px;flex-shrink:0;border:2px solid var(--ink);border-radius:18px;background:#e8d7b8;position:relative;pointer-events:none}.switch-track::after{content:'';position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:var(--ink);transition:transform 150ms}.switch-row input:checked+.switch-track{background:var(--accent)}.switch-row input:checked+.switch-track::after{transform:translateX(18px)}.switch-row input:focus-visible+.switch-track{outline:3px solid var(--red);outline-offset:4px}.preview-disclosure{font-size:12px;line-height:1.5;color:#79594c;margin:24px 0 0}.rules-list{margin:0;padding-left:21px;display:grid;gap:18px;font-size:18px;line-height:1.4}.room-preview{border:2px solid var(--ink);padding:24px;border-radius:var(--curve);background:#fffaf0}.room-preview>span{font-size:14px}.room-preview>strong{display:block;font-size:36px;letter-spacing:.12em;margin:6px 0 12px}.room-preview p{margin:0;line-height:1.5}.tile-fallback{position:absolute;inset:20%;display:grid;place-items:center;font-size:22px;text-align:center;color:var(--paper)}
body.club{--red:#e13b31;--paper:#fffaea;--ink:#143e35;--accent:#143e35;--display:ArchivoBlack;--curve:18px;--line:2px}.club .menu-shell{grid-template-columns:60% 40%}.club .tile-panel{border:0}.club .tile-panel::after,.club .comic-rays,.club .print-dots{display:none}.club .chinese-title{font-size:clamp(90px,9vw,138px);left:7%;top:17%;transform:rotate(-8deg);-webkit-text-stroke:0;text-shadow:none;color:var(--paper)}.club .club-orbit{display:block;position:absolute;border:2px solid var(--paper);width:680px;height:680px;border-radius:50%;left:50%;top:59%;transform:translate(-50%,-50%);opacity:.5}.club .club-stage{display:block;position:absolute;width:710px;height:270px;border-radius:50%;left:49%;top:74%;transform:translateX(-50%) rotate(-8deg);background:var(--ink);z-index:0;box-shadow:0 15px 0 #0d2e28}.club .tile-stage{top:51%;height:66%;width:85%}.club .tile-shadow{top:76%;background:#102f28;filter:blur(10px)}.club .tile-controls{bottom:12%;color:var(--paper)}.club .rotation-toggle{border-color:var(--paper);background:transparent;color:var(--paper)}.club .brand-mark{border:0;box-shadow:none;color:var(--ink);border-radius:8px}.club .wordmark{font-family:ArchivoBlack,sans-serif;font-size:22px;line-height:1.02}.club .wordmark small{font-size:12px;letter-spacing:.09em}.club .home-view h1{font-size:clamp(40px,3.75vw,56px);line-height:1.08;letter-spacing:-.03em;margin-bottom:26px}.club .intro{font-size:20px;margin-bottom:40px}.club .action-button{min-height:78px;padding:17px 24px;font-size:24px}.club .primary{background:var(--ink);color:var(--paper);box-shadow:0 5px 0 #0b2822}.club .secondary{box-shadow:0 4px 0 #e2d9c1}.club .action-button:hover{transform:translateY(-3px);box-shadow:0 8px 0 #0b2822}.club .action-button:active{transform:translateY(3px);box-shadow:0 1px 0 #0b2822}.club .form-view h2,.club .rules-view h2,.club .preview-view h2{font-size:clamp(36px,3.3vw,48px);line-height:1.08;letter-spacing:-.03em}.club .switch-row input:checked+.switch-track::after{background:var(--paper)}.club .study-label,.club .preview-disclosure{color:#49665a}.club .panel-caption{bottom:42px}.club .menu-panel{padding-left:clamp(32px,4.25vw,68px);padding-right:clamp(32px,4.25vw,68px)}
@media(max-height:760px) and (min-width:801px){.tile-panel,.menu-panel{min-height:680px}.menu-panel{padding-top:115px;padding-bottom:92px}.home-view h1{font-size:82px}.intro{margin-bottom:30px}.action-button{min-height:66px}.menu-actions{gap:16px}.how-to{margin-top:28px}.form-view h2{font-size:58px}.back-button{margin-bottom:16px}.form-intro{margin-bottom:18px}.preview-disclosure{margin-top:18px}.menu-footer{bottom:24px}}
@media(max-width:1100px) and (min-width:801px){.menu-panel,.club .menu-panel{padding-left:34px;padding-right:34px}.home-view h1{font-size:80px}.club .home-view h1{font-size:38px}.action-button,.club .action-button{font-size:22px}.menu-footer{left:34px;right:34px}.study-label{display:none}.chinese-title{top:18%}.club .club-stage{width:570px}.club .club-orbit{width:560px;height:560px}}
@media(max-width:800px){.site-header{position:absolute;height:76px;padding:0 24px}.wordmark{font-size:23px}.wordmark small{font-size:9px}.brand-mark{width:31px;height:38px;font-size:24px}.concept-nav{background:var(--paper)}.concept-nav a{padding:7px 10px;font-size:12px}.menu-shell,.club .menu-shell{grid-template-columns:1fr}.tile-panel{min-height:470px;border-right:0;border-bottom:3px solid var(--ink)}.tile-panel::after{display:none}.chinese-title{font-size:95px;top:104px;left:8%}.tile-stage,.club .tile-stage{height:340px;width:85%;max-width:560px;top:52%}.comic-rays{width:490px;height:490px;top:55%}.print-dots{width:230px;height:230px}.tile-shadow,.club .tile-shadow{top:78%;height:20px}.tile-controls,.club .tile-controls{bottom:9%;font-size:13px}.panel-caption,.club .panel-caption{bottom:20px;left:25px;font-size:13px}.menu-panel,.club .menu-panel{min-height:540px;padding:64px 28px 95px}.view{max-width:450px}.home-view h1{font-size:80px}.intro{font-size:20px;margin-bottom:32px}.action-button,.club .action-button{min-height:68px;font-size:23px}.menu-footer{left:28px;right:28px;bottom:25px;font-size:12px}.club .chinese-title{font-size:88px;top:104px;left:7%}.club .club-orbit{width:450px;height:450px;top:64%}.club .club-stage{width:480px;height:170px;top:76%;left:53%}.club .home-view h1{font-size:43px}.club .wordmark{font-size:17px}.club .wordmark small{font-size:10px}.form-view h2,.rules-view h2,.preview-view h2{font-size:64px}.club .form-view h2,.club .rules-view h2,.club .preview-view h2{font-size:42px}.form-view,.rules-view,.preview-view{max-width:450px}.tile-panel{overflow:hidden}.form-intro{font-size:18px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* Contrast backing for labels over the illustrated tile stage. */
.wordmark{background:var(--red)}.wordmark small{color:#fff}.tile-controls{background:var(--paper);border:2px solid var(--ink);border-radius:24px;padding:5px 5px 5px 13px}.club .tile-controls{background:var(--ink);border-color:var(--paper)}.club .wordmark small{color:#000}.panel-caption{color:#fff}.club .panel-caption{color:var(--paper);background:var(--ink);padding:4px 8px}@media(max-width:800px){.wordmark small,.club .wordmark small{font-size:11px}}

button:disabled{opacity:.65;cursor:wait}.resume-room,.rules-download{display:block;margin-top:28px;font-weight:600;text-underline-offset:5px}.menu-message{position:fixed;bottom:20px;left:20px;z-index:30;max-width:420px;padding:16px;border:3px solid var(--ink);background:var(--paper)}@media(min-width:801px){.menu-panel{overflow:auto}.menu-shell{height:100dvh}.tile-panel,.menu-panel{min-height:650px}}

.timing-fields{display:grid;grid-template-columns:1fr 1fr;gap:16px}.timing-fields label{font-size:15px;font-weight:600}.timing-fields label>span{font-size:12px;font-weight:400}.timing-fields input{display:block;margin-top:8px;margin-bottom:18px;font-variant-numeric:tabular-nums}.timing-help{line-height:1.4}
body[data-view=create] .menu-panel{flex-direction:column;justify-content:flex-start;padding-top:48px;padding-bottom:28px}body[data-view=create] .menu-footer{position:static;width:100%;max-width:440px;margin-top:32px;flex-shrink:0}body[data-view=create] #create-view{flex-shrink:0}body[data-view=create] .form-intro{margin-bottom:18px}body[data-view=create] .back-button{margin-bottom:18px}body[data-view=create] #create-view h2{font-size:60px}
@media(max-height:800px) and (min-width:801px){body[data-view=create] .menu-panel{padding-top:28px}body[data-view=create] #create-view h2{font-size:46px;line-height:.95;margin-bottom:12px}body[data-view=create] .back-button{margin-bottom:12px}body[data-view=create] .form-intro{font-size:16px;margin-bottom:16px}body[data-view=create] input:not([type=checkbox]){height:44px;margin-bottom:14px;padding:9px 12px}body[data-view=create] .field-help{margin-top:-7px;margin-bottom:16px}body[data-view=create] .switch-row{margin-bottom:16px}body[data-view=create] .menu-footer{margin-top:24px}}