:root{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;--paper:#f7f8f1;--ink:#171918;--muted:#63675d;--acid:#e9ff43;--line:#d8dcd0;--red:#a93223;--safe-top:env(safe-area-inset-top,0px);--safe-bottom:env(safe-area-inset-bottom,0px);font-synthesis:none}*{box-sizing:border-box}html{background:var(--paper);color:var(--ink);-webkit-text-size-adjust:100%;font-family:-apple-system,BlinkMacSystemFont,Hiragino Kaku Gothic ProN,Noto Sans JP,Yu Gothic,sans-serif}body{margin:0}button,input{font:inherit}button{color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation;border:0}button:disabled{cursor:default;opacity:.42}button:focus-visible,input:focus-visible{outline-offset:4px;outline:3px solid #687900}button:not(:disabled):active{filter:brightness(.94)}h1,h2,p,figure{margin:0}svg{display:block}input{color:var(--ink);font-size:16px}a{color:inherit}::selection{background:var(--acid);color:var(--ink)}.app-shell{width:min(100%,480px);min-height:100dvh;padding:max(14px, var(--safe-top)) max(22px, env(safe-area-inset-right,0px)) max(16px, var(--safe-bottom)) max(22px, env(safe-area-inset-left,0px));background:var(--paper);margin:0 auto;position:relative}.primary,.secondary{border:1px solid var(--ink);background:var(--ink);width:100%;min-height:54px;color:var(--paper);border-radius:6px;justify-content:center;align-items:center;gap:14px;padding:14px 18px;font-size:16px;font-weight:750;line-height:1.5;display:flex}.primary>span{font-size:22px;font-weight:400}.primary.accent{background:var(--acid);color:var(--ink);border-color:#0000}.secondary{color:var(--ink);background:0 0}.text-button{min-height:44px;color:var(--muted);background:0 0;padding:10px 8px;font-size:13px;line-height:1.5}.back-button{background:0 0;align-items:center;gap:7px;min-width:44px;min-height:44px;padding:8px 4px 8px 0;font-size:20px;display:inline-flex}.back-button span{font-size:13px}.eyebrow{color:var(--muted);letter-spacing:.07em;font-size:12px;font-weight:700;line-height:1.5}.subhead{color:var(--muted);font-size:14px;line-height:1.8}.tiny{color:var(--muted);font-size:13px;line-height:1.8}.notice,.ai-message{overflow-wrap:anywhere;text-align:left;margin:16px 0 0;font-size:13px;line-height:1.7}.error{color:var(--red)}.connection,.ai-message{color:#705615}.loading-screen{color:var(--muted);place-items:center;font-size:14px;display:grid}.landing-screen{flex-direction:column;display:flex}.landing-content{text-align:left;flex-direction:column;align-items:stretch;gap:14px;margin:auto 0;padding:28px 0;display:flex}.landing-kicker{color:var(--muted);font-size:13px}.landing-content h1{letter-spacing:-.035em;font-size:clamp(38px,12vw,52px);font-weight:850;line-height:1.28}.landing-caption{color:var(--muted);font-size:14px}.home-modes{gap:10px;width:100%;margin-top:16px;display:grid}.home-mode{text-align:left;background:#e9ece5;border-radius:4px;flex-direction:column;justify-content:center;align-items:flex-start;gap:4px;width:100%;min-height:74px;padding:14px 18px;display:flex}.home-mode-main{background:var(--ink);color:var(--paper)}.home-mode strong{font-size:18px;font-weight:750;line-height:1.5}.home-mode span{font-size:13px;font-weight:400;line-height:1.65}.landing-footer{color:var(--muted);flex-direction:column;align-items:center;gap:0;padding-bottom:4px;display:flex}.landing-footer span{font-size:11px;line-height:1.6}.selection-screen,.lobby-screen,.message-screen,.details-screen{flex-direction:column;display:flex}.step-top{justify-content:space-between;align-items:center;gap:8px;min-height:44px;font-size:12px;display:flex}.step-top>span:not(:first-child){color:var(--muted)}.step-count{font-variant-numeric:tabular-nums;white-space:nowrap}.step-progress{background:#e4e7dd;flex-shrink:0;height:3px;margin-top:8px}.step-progress>span{background:var(--ink);height:100%;display:block}.selection-content{flex-direction:column;flex:1;justify-content:center;gap:38px;padding:32px 0 44px;display:flex}.selection-content h1{text-align:left;letter-spacing:-.03em;font-size:28px;font-weight:800;line-height:1.4}.mode-options{flex-direction:column;gap:0;width:100%;display:flex}.mode-option{text-align:left;border-top:1px solid var(--line);background:0 0;align-items:center;gap:15px;width:100%;min-height:100px;padding:24px 0;display:flex}.mode-option:last-child{border-bottom:1px solid var(--line)}.mode-number{color:var(--muted);font-variant-numeric:tabular-nums;font-size:12px}.mode-copy{flex:1;min-width:0}.mode-copy strong{letter-spacing:-.025em;font-size:21px;font-weight:800;line-height:1.5;display:block}.mode-copy small{color:var(--muted);margin-top:4px;font-size:12px;line-height:1.65;display:block}.mode-arrow{font-size:24px}.name-content{gap:24px}.name-content form{width:100%}.name-field{margin-bottom:10px;font-size:13px;font-weight:700;display:block}.name-field small{color:var(--muted);margin-left:6px;font-size:12px;font-weight:400}.name-input{background:#fff;border:1px solid #adb3a4;border-radius:4px;width:100%;height:54px;padding:0 14px}.name-input::placeholder{color:#767b70}.input-note{color:var(--muted);margin-top:10px;font-size:12px;line-height:1.8}.name-content .primary{margin-top:28px}.lobby-content{flex-direction:column;flex:1;justify-content:center;padding:28px 0 24px;display:flex}.lobby-content h1,.message-content h1,.details-content h1{letter-spacing:-.04em;margin:14px 0;font-size:clamp(30px,8.3vw,38px);font-weight:850;line-height:1.45}.lobby-content>.subhead{margin-bottom:12px}.player-list{margin:22px 0 8px}.player-line{border-top:1px solid var(--line);align-items:center;gap:10px;min-height:72px;padding:20px 0;display:flex}.player-line:last-child{border-bottom:1px solid var(--line)}.player-role{color:var(--muted);min-width:42px;font-size:12px}.player-line strong{overflow-wrap:anywhere;flex:1;min-width:0;font-size:16px;line-height:1.6}.player-status{color:var(--muted);white-space:nowrap;font-size:12px}.player-status.ready{color:var(--ink);background:var(--acid);border-radius:2px;padding:3px 6px;font-weight:700}.lobby-content .primary,.lobby-content .secondary{margin-top:22px}.lobby-content .text-button{align-self:center;margin-top:8px}.invite-url{width:100%;height:44px;color:var(--muted);text-align:center;background:0 0;border:0;margin-top:5px;padding:8px 2px;font-size:11px;display:block}.search-content{text-align:center}.search-content>.subhead{align-self:center;max-width:290px}.search-clock{flex-direction:column;align-items:center;gap:10px;margin:32px 0 20px;display:flex}.search-clock strong{letter-spacing:-.065em;font-variant-numeric:tabular-nums;font-family:Arial,Helvetica,sans-serif;font-size:92px;font-weight:900;line-height:1}.search-clock span{color:var(--muted);font-size:12px}.message-content{margin:auto 0;padding:30px 0}.message-content .primary{margin-top:30px}.message-content .secondary{margin-top:10px}.message-content>.text-button{width:100%;margin-top:4px}.game-screen{height:100dvh;min-height:540px;padding:max(12px, var(--safe-top)) 16px max(8px, var(--safe-bottom));flex-direction:column;display:flex;overflow:visible}.drawing-workspace{flex-direction:column;flex:1 0 330px;min-height:330px;display:flex}.drawing-workspace[hidden]{display:none}.complete-button{flex-shrink:0;min-height:52px;margin-top:10px}.game-header{justify-content:space-between;align-items:center;gap:12px;min-height:66px;display:flex}.game-header>div:first-child{min-width:0}.game-header h1{letter-spacing:-.03em;overflow-wrap:anywhere;margin-top:3px;font-size:clamp(20px,5.8vw,26px);font-weight:850;line-height:1.35}.timer{flex-shrink:0;align-items:baseline;gap:4px;display:flex}.timer strong{font-variant-numeric:tabular-nums;letter-spacing:-.055em;font-family:Arial,Helvetica,sans-serif;font-size:42px;font-weight:850;line-height:1}.timer>span{color:var(--muted);font-size:12px}.timer.urgent{color:var(--red)}.game-progress{background:#e4e7dd;flex-shrink:0;height:3px;margin:10px 0 12px}.game-progress>span{background:var(--ink);height:100%;transition:width .15s linear;display:block}.paper-zone{flex:1;justify-content:center;align-items:center;min-height:180px;display:flex;container-type:size}.paper{aspect-ratio:1;border:1px solid var(--ink);background:#fff;flex-shrink:0;width:min(100cqw,100cqh);position:relative}.paper canvas{touch-action:none;-webkit-user-select:none;user-select:none;width:100%;height:100%;display:block}.paper-lock{color:var(--muted);pointer-events:none;font-size:11px;position:absolute;bottom:7px;right:8px}.draw-tools{flex-shrink:0;padding-top:14px}.palette{grid-template-columns:repeat(8,minmax(0,1fr));align-items:center;gap:0;display:grid}.color-tool{background:0 0;justify-content:center;align-items:center;min-width:0;height:44px;padding:6px;display:flex}.color-tool>span{border:1px solid #adb3a4;border-radius:50%;width:24px;height:24px;display:block;position:relative}.color-tool.selected>span:after{content:"";border:2px solid var(--ink);border-radius:50%;position:absolute;inset:-5px}.tool-row{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:4px;margin-top:6px;padding-top:10px;display:flex}.widths{gap:0;display:flex}.widths button{background:0 0;border-radius:4px;place-items:center;width:44px;height:48px;display:grid}.widths button span{background:var(--ink);border-radius:50%;display:block}.widths .selected,.tool.selected{background:var(--acid)}.tool{background:0 0;border-radius:4px;flex-direction:column;justify-content:center;align-items:center;gap:4px;min-width:48px;min-height:48px;padding:4px;display:flex}.tool svg{fill:none;stroke:currentColor;stroke-width:1.7px;stroke-linecap:round;stroke-linejoin:round;width:20px;height:20px}.tool span{white-space:nowrap;font-size:11px}.game-status{text-align:center;color:var(--muted);overflow-wrap:anywhere;flex-shrink:0;min-height:30px;max-height:44px;padding-top:8px;font-size:12px;line-height:1.5;overflow-y:auto}.countdown-overlay,.finish-overlay{z-index:10;text-align:center;padding:max(24px, var(--safe-top)) 26px max(24px, var(--safe-bottom));background:#f7f8f1f5;place-items:center;display:grid;position:absolute;inset:0;overflow-y:auto}.countdown-overlay>div>span{font-size:15px}.countdown-overlay strong{font-variant-numeric:tabular-nums;letter-spacing:-.055em;font-family:Arial,Helvetica,sans-serif;font-size:144px;font-weight:900;line-height:1.3;display:block}.countdown-overlay p{color:var(--muted);font-size:13px}.finish-overlay section{width:100%}.finish-overlay h2{letter-spacing:-.04em;margin:18px 0;font-size:34px;font-weight:850;line-height:1.4}.finish-overlay section>p:not(.eyebrow){max-width:290px;color:var(--muted);margin:0 auto;font-size:14px;line-height:1.8}.submission-status{flex-direction:column;gap:12px;margin:26px 0;font-size:13px;display:flex}.submission-status b{background:var(--acid);margin-left:10px;padding:3px 6px;font-size:12px;font-weight:700;display:inline-block}.finish-overlay .primary{margin-top:20px}.result-content{text-align:left;padding:22px 0 10px}.result-topic{color:var(--muted);overflow-wrap:anywhere;font-size:13px;line-height:1.6}.result-content h1{letter-spacing:-.04em;margin:12px 0 24px;font-size:clamp(28px,8.1vw,36px);font-weight:850;line-height:1.45}.result-pair{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;width:100%;display:grid}.result-piece{min-width:0}.result-piece figcaption{text-align:left;flex-direction:column;gap:3px;padding-bottom:10px;display:flex}.result-piece figcaption span{color:var(--muted);font-size:11px;line-height:1.5}.result-piece figcaption strong{overflow-wrap:anywhere;font-size:14px;line-height:1.5}.result-image{aspect-ratio:1;border:1px solid var(--line);color:var(--muted);background:#fff;place-items:center;font-size:13px;display:grid;position:relative;overflow:hidden}.result-image img{object-fit:contain;width:100%;height:100%;display:block}.score-stamp{color:var(--ink);background:var(--paper);border:1px solid var(--ink);align-items:baseline;gap:2px;padding:4px 7px 5px;display:flex;position:absolute;top:7px;right:7px}.score-stamp strong{letter-spacing:-.065em;font-variant-numeric:tabular-nums;font-family:Arial,Helvetica,sans-serif;font-size:34px;font-weight:900;line-height:1}.score-stamp span{font-size:11px}.piece-score{align-items:baseline;gap:3px;padding-top:12px;display:flex}.piece-score>strong{font-variant-numeric:tabular-nums;font-size:36px;font-weight:800;line-height:1}.piece-score>span{font-size:13px}.piece-outcome{margin-left:auto;font-size:13px;font-weight:650;line-height:1.5}.winner .piece-outcome{background:var(--acid);border-radius:2px;padding:3px 6px}.result-summary{color:var(--muted);overflow-wrap:anywhere;margin-top:20px;font-size:13px;line-height:1.8}.result-content>.primary{justify-content:space-between;margin-top:24px;padding-left:20px;padding-right:20px}.result-content>.primary:not(.accent){justify-content:center}.result-content>.secondary{margin-top:10px}.result-links{flex-wrap:wrap;justify-content:center;align-items:center;gap:14px;margin-top:6px;display:flex}.result-links .text-button:first-child{color:var(--ink);font-weight:700}.details-content{margin:auto 0;padding:24px 0}.score-table{text-align:left;margin:30px 0 18px}.score-head,.score-line{grid-template-columns:minmax(0,1fr) 50px 50px;align-items:center;gap:8px;display:grid}.score-head{color:var(--muted);padding-bottom:14px;font-size:12px}.score-head>span:not(:first-child){text-align:right}.score-line{border-top:1px solid var(--line);padding:20px 0;font-size:15px;line-height:1.6}.score-line>span small{color:var(--muted);font-size:12px;display:block}.score-line strong{text-align:right;font-variant-numeric:tabular-nums;font-family:Arial,Helvetica,sans-serif;font-size:26px}.details-content .tiny{margin-top:15px}.details-content .primary{margin-top:28px}.submission-workspace{flex-direction:column;flex:1;justify-content:center;padding:20px 0;display:flex}.submission-workspace>.primary{margin-top:20px}.submission-workspace>.text-button{align-self:center;margin-top:10px}.judging-progress{flex-direction:column;gap:24px;width:100%;display:flex}.judging-heading h2{letter-spacing:-.025em;font-size:24px;font-weight:750;line-height:1.5}.judging-heading p{color:var(--muted);margin-top:10px;font-size:14px;line-height:1.8}.comparison-pair{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;width:100%;display:grid}.comparison-piece{min-width:0}.comparison-piece figcaption{flex-direction:column;gap:3px;padding-bottom:10px;display:flex}.comparison-piece figcaption span{color:var(--muted);font-size:13px;line-height:1.5}.comparison-piece figcaption strong{overflow-wrap:anywhere;font-size:14px;font-weight:650;line-height:1.5}.comparison-image{aspect-ratio:1;border:2px solid var(--line);background:#fff;place-items:center;display:grid}.comparison-image img{object-fit:contain;width:100%;height:100%;display:block}.comparison-image>p{max-width:100%;color:var(--muted);overflow-wrap:anywhere;padding:10px;font-size:14px;line-height:1.6}.comparison-image>p>span{margin-top:9px;font-size:13px;font-weight:400;display:block}.comparison-submitted{color:var(--muted);margin-top:9px;font-size:13px;display:block}.comparison-criteria{color:var(--muted);flex-wrap:wrap;align-items:center;gap:9px 16px;font-size:13px;line-height:1.7;display:flex}.comparison-criteria span{padding:3px 0}.opponent-time{color:var(--muted);font-size:14px;line-height:1.7}.opponent-time strong{color:var(--ink);font-variant-numeric:tabular-nums;font-size:18px;font-weight:700}.judging-progress[data-state=judging] .own-piece .comparison-image{animation:3.6s ease-in-out infinite comparison-focus}.judging-progress[data-state=judging] .opponent-piece .comparison-image{animation:3.6s ease-in-out -1.8s infinite comparison-focus}.judging-progress[data-state=judging] .comparison-criteria span{animation:3.6s ease-in-out infinite criterion-attention}.judging-progress[data-state=judging] .comparison-criteria span:nth-child(2){animation-delay:-.8s}.judging-progress[data-state=judging] .comparison-criteria span:nth-child(3){animation-delay:-1.6s}@keyframes comparison-focus{0%,to{border-color:var(--ink)}30%,65%{border-color:#bcc989}80%{border-color:var(--line)}}@keyframes criterion-attention{0%,to{color:var(--ink)}45%,75%{color:var(--muted)}}.dialog-backdrop{z-index:30;padding:max(20px, var(--safe-top)) 20px max(20px, var(--safe-bottom));background:#17191888;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.dialog{overscroll-behavior:contain;background:var(--paper);border-radius:8px;width:min(100%,420px);max-height:100%;padding:26px 24px;overflow-y:auto}.dialog h2{letter-spacing:-.03em;font-size:25px;line-height:1.4}.dialog>p:not(.tiny){margin-top:14px;font-size:14px;line-height:1.8}.dialog ol{gap:12px;margin:20px 0;padding-left:21px;font-size:14px;line-height:1.7;display:grid}.rule-weights{gap:12px;margin:22px 0;font-size:14px;display:grid}.rule-weights>div{justify-content:space-between;align-items:center;gap:12px;display:flex}.rule-weights strong{font-size:16px}.dialog .primary{margin-top:24px}.dialog>.text-button{margin:4px auto -10px;display:block}@media (hover:hover){.primary:not(:disabled):hover{background:#363b28}.primary.accent:not(:disabled):hover{background:#def033}.secondary:not(:disabled):hover,.mode-option:hover{background:#edf0e5}.text-button:not(:disabled):hover{text-underline-offset:4px;text-decoration:underline}}@media (width>=600px){body{background:#e4e7dd}}@media (width<=350px){.app-shell{padding-left:18px;padding-right:18px}.landing-content h1{font-size:38px}.mode-option{gap:12px;padding:20px 0}.mode-copy strong{font-size:19px}.mode-copy small{font-size:11px}.game-screen{padding-left:12px;padding-right:12px}.draw-tools{padding-top:6px}.tool-row{justify-content:flex-start;gap:2px;padding-top:5px}.result-pair{gap:9px}.score-stamp{padding:3px 5px;top:5px;right:5px}.score-stamp strong{font-size:29px}.result-piece figcaption strong{font-size:13px}}@media (width<=383px){.palette{grid-template-columns:repeat(4,minmax(0,1fr))}}@media (height<=700px){.selection-content{gap:28px;padding-top:24px;padding-bottom:24px}.selection-content h1{font-size:28px}.mode-option{min-height:86px;padding:18px 0}.lobby-content{padding-top:22px;padding-bottom:12px}.lobby-content h1{font-size:31px}.lobby-content .primary,.lobby-content .secondary{margin-top:18px}.player-line{padding:16px 0}.search-clock{margin:22px 0 12px}.game-screen{padding-top:max(8px, var(--safe-top))}.game-header{min-height:59px}.game-progress{margin-top:7px;margin-bottom:8px}.draw-tools{padding-top:7px}.tool-row{margin-top:2px;padding-top:7px}.complete-button{margin-top:8px}.judging-progress{gap:20px}.judging-heading h2{font-size:22px}.result-content{padding-top:14px}.result-content h1{margin-bottom:18px}.result-content>.primary{margin-top:18px}}@media (orientation:landscape) and (height<=500px){.game-screen{height:auto;min-height:100dvh;overflow:visible}.paper-zone{flex:none;height:240px}.drawing-workspace{flex:none;min-height:0}.palette{grid-template-columns:repeat(8,minmax(0,1fr))}.widths{width:auto}.tool{flex:none}}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition:none!important;animation:none!important}}.comparison-piece{animation:.4s cubic-bezier(.2,.7,.2,1) both submission-arrive}.comparison-piece.opponent-piece{animation-delay:80ms}.comparison-image img{animation:.35s ease-out both sketch-settle}.comparison-focus-track{height:5px;margin:-8px 0;position:relative}.comparison-focus-track span{background:var(--ink);border-radius:0;width:calc(50% - 6px);height:3px;display:block;position:absolute}.judging-progress[data-state=judging] .comparison-focus-track span{animation:3.6s cubic-bezier(.45,0,.2,1) infinite compare-between}.judging-progress[data-state=checking] .comparison-focus-track span{background:var(--line);width:100%}@keyframes submission-arrive{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}@keyframes sketch-settle{0%{opacity:0;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}@keyframes compare-between{0%,12%,to{left:0}42%,62%{left:calc(50% + 6px)}}.landing-kicker,.home-mode span,.name-field,.notice,.ai-message,.result-topic,.result-summary{font-size:14px}.landing-footer span,.step-top,.back-button span,.input-note,.player-role,.player-status,.tool span,.game-status,.comparison-criteria,.eyebrow{font-size:13px}.invite-url{text-align:left;font-size:16px}.result-piece figcaption span,.score-head,.score-line>span small,.name-field small{font-size:13px}.text-button,.back-button span,.step-top,.eyebrow,.player-role,.player-status,.timer>span,.result-topic,.result-piece figcaption span,.comparison-piece figcaption span,.comparison-submitted,.score-head,.score-line>span small,.opponent-time,.comparison-image>p{color:var(--ink);font-size:14px}.landing-kicker{color:var(--ink);font-size:17px;line-height:1.6}.landing-content{gap:20px}.home-mode{min-height:62px}.name-field{color:var(--ink);font-size:16px}.notice,.ai-message,.result-summary,.input-note,.rule-notes,.score-explanation,.pad-storage-warning{font-size:16px;line-height:1.7}.result-summary,.input-note,.rule-notes,.score-explanation,.pad-storage-warning{color:var(--ink)}.result-summary{white-space:pre-line}.rule-notes{margin-top:22px}.rule-notes summary{cursor:pointer;align-items:center;min-height:44px;font-size:16px;font-weight:650;display:flex}.rule-notes ul,.score-explanation{gap:8px;margin:14px 0 0;padding-left:20px;display:grid}.tool span{font-size:14px}.tool{min-width:52px;min-height:54px}.widths{margin-right:auto}.tool-row{justify-content:flex-start;gap:4px}.pad-storage-warning{margin-top:8px}.game-status{color:var(--ink);text-align:left;min-height:0;max-height:none;font-size:15px}.game-status:empty{display:none}.comparison-criteria{color:var(--ink);font-size:14px}.sound-toggle{min-width:88px;min-height:44px;color:var(--ink);white-space:nowrap;background:0 0;justify-content:center;align-items:center;gap:7px;padding:8px;font-size:14px;display:inline-flex}.sound-toggle svg{fill:none;stroke:currentColor;stroke-width:1.7px;stroke-linecap:round;stroke-linejoin:round;width:19px;height:19px}.landing-sound{justify-content:flex-end;display:flex}.game-utilities{flex-shrink:0;justify-content:flex-end;margin:-6px 0 0;display:flex}.result-screen .step-top{flex-wrap:wrap}@media (width<=383px){.tool-row{gap:3px}.widths{flex-basis:100%}.tool{flex:1}}.score-notes,.rematch-status{color:var(--ink);margin-top:16px;font-size:16px;line-height:1.7}.score-notes{gap:8px;padding-left:20px;display:grid}.widths{flex-basis:100%}.tool{flex:1}@media (height<=640px) and (orientation:portrait){.widths button{height:44px}.tool-row{padding-top:4px}.draw-tools{padding-top:6px}}
