:root{color:#466179;font-synthesis:none;--blue:#dceffa;--teal:#238e94;--ink:#466179;background:#fff8e9;font-family:Hiragino Maru Gothic ProN,Yu Gothic,system-ui,sans-serif;font-weight:600}*{box-sizing:border-box}body{background:#fff8e9;margin:0}button,input{font:inherit}button{cursor:pointer;color:inherit;touch-action:manipulation;-webkit-tap-highlight-color:transparent;border:0}button:disabled{cursor:default;opacity:.5}button:focus-visible,a:focus-visible,input:focus-visible{outline-offset:4px;outline:3px solid #238e94}button:active:not(:disabled){transform:translateY(2px)}a{color:#537ba2}.sr-only{clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;top:0;left:0;overflow:hidden}.safe-probe{visibility:hidden;pointer-events:none;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px);position:fixed}#app{max-width:none;margin:0;padding:0}#view{min-height:100dvh}h1,h2,p{margin:0}button{background:#e5f2f9;border-radius:18px;min-height:48px;padding:10px 20px}button:hover:not(:disabled){filter:brightness(.98)}.title-view{isolation:isolate;max-width:680px;min-height:100dvh;padding:clamp(20px,5vh,52px) 24px max(24px,env(safe-area-inset-bottom));text-align:center;flex-direction:column;align-items:center;gap:18px;margin:auto;display:flex;position:relative;overflow:hidden}.eyebrow{letter-spacing:.12em;color:#6d8d9c;font-size:13px}.logo{letter-spacing:.03em;color:#4f89b1;text-shadow:0 4px #e7f2f9;font-size:clamp(48px,10vw,68px);font-weight:900;line-height:1.05;transform:rotate(-3deg)}.logo>span:first-child{color:#ff7940}.logo-bang{display:inline-block;transform:rotate(9deg)}.hero{z-index:0;width:clamp(160px,26vh,228px);height:clamp(160px,26vh,228px);margin:2px 0 4px;position:relative}.hero svg{z-index:2;width:100%;height:100%;position:relative;transform:rotate(-4deg)}.hero-shadow{z-index:1;background:#c8e6fa;border-radius:50%;width:90%;height:14px;position:absolute;bottom:1px;left:5%}.title-tagline{letter-spacing:.04em;font-size:17px}.title-tagline strong{color:#26999c}.title-cloud{z-index:-1;opacity:.5;background:#e0f0fa;border-radius:42% 58% 62% 38%;width:190px;height:190px;position:absolute;top:25%;left:-95px;transform:rotate(20deg)}.cloud-two{background:#ffebbf;width:180px;height:270px;top:18%;left:auto;right:-92px}.mode-buttons{gap:14px;width:min(100%,480px);display:flex}.mode-card{border-radius:24px;flex-direction:column;flex:1;align-items:center;gap:5px;min-width:0;padding:17px 12px;display:flex;box-shadow:0 5px #c7e3ef}.mode-card.relaxed{background:#ddf3ef;box-shadow:0 5px #b9ded7}.mode-card.arcade{background:#e1effc}.mode-name{letter-spacing:.1em;font-size:25px;font-weight:850}.mode-card.relaxed .mode-name{color:#258f91}.mode-card.arcade .mode-name{color:#4c8cc5}.mode-card>span:nth-child(2){font-size:12px}.mode-card small{opacity:.8;margin-top:3px;font-size:11px;font-weight:600}.title-tools{gap:12px;margin-top:3px;display:flex}.title-tools button{background:0 0;min-width:92px}.lab-link{opacity:.75;font-size:11px;text-decoration:none}.game-view{grid-template-rows:var(--hud) calc(var(--cell)*10) var(--controls);gap:var(--gap);padding:calc(var(--safe-top) + var(--pad)) 12px calc(var(--safe-bottom) + var(--pad));-webkit-user-select:none;user-select:none;background:radial-gradient(at 50% 48%,#fffdf7 0,#fff8e9 72%);grid-template-columns:min(360px,100vw - 24px);place-content:center;display:grid;position:relative;overflow:clip}.game-hud{align-items:center;gap:8px;min-width:0;display:flex}.hud-info{flex-direction:column;flex:1;gap:1px;min-width:0;display:flex}.mode-label{letter-spacing:.14em;color:#3a9198;font-size:11px;font-weight:800}.hud-info strong{font-variant-numeric:tabular-nums;white-space:nowrap;font-size:19px;line-height:1.25}.hud-info>span:last-child{color:#72919c;font-size:11px}.next{flex-direction:column;align-items:center;gap:0;width:60px;display:flex}.next>span{letter-spacing:.14em;color:#6396b4;font-size:9px}.next>div{gap:0;width:60px;height:28px;display:flex}.next svg{width:30px;height:30px}.pause-button{background:#e0eff7;border-radius:50%;width:48px;min-width:48px;height:48px;padding:0;font-size:20px}.play-area{justify-content:center;align-items:center;display:flex;position:relative;overflow:visible}.board-frame{width:calc(var(--cell)*6);height:calc(var(--cell)*10);position:relative;overflow:visible}.board-grid{background-color:#edf5f8;background-image:linear-gradient(90deg,#b9d6e32b 1px,#0000 1px),linear-gradient(#b9d6e32b 1px,#0000 1px);background-size:16.6667% 10%;border-radius:18px;position:absolute;inset:0;box-shadow:0 0 0 3px #d8e9ed,0 7px #d8e9ed80,inset 0 2px 9px #aecdda22}.board-layer,.overlay-layer{pointer-events:none;position:absolute;inset:0;overflow:visible}.board-layer{z-index:2}.overlay-layer{z-index:3}.piece{transform-origin:50% 90%;pointer-events:none;position:absolute}.piece svg{width:100%;height:100%;display:block;overflow:visible}.piece.ghost svg{opacity:.25;filter:saturate(.7)}#active-layer .piece{filter:drop-shadow(0 2px #ffffffc9)}#feedback-layer{z-index:5}.board-hint{white-space:nowrap;color:#85a0a8;font-size:12px;display:none;position:absolute;left:calc(100% + 22px)}.controls{z-index:6;align-items:stretch;gap:4px;min-width:0;display:flex}.controls button{background:#dfedf7;border-radius:16px;flex:1;min-width:48px;padding:0;font-size:27px;line-height:1;box-shadow:0 4px #bad6e6}.controls .commit-button{letter-spacing:.05em;color:#277f85;background:#c7e9e4;flex:1.65;min-width:80px;font-size:17px;box-shadow:0 4px #9bcfc7}.game-view[data-mode=arcade] .commit-button{color:#ac633e;background:#ffdfc8;box-shadow:0 4px #e9c2a5}.mode-line{white-space:nowrap;align-items:center;gap:6px;font-size:11px;line-height:14px;display:flex}.mode-line .mode-label{letter-spacing:.03em}#placement-hint{color:#397884;letter-spacing:0}.preview-match:after{content:"";pointer-events:none;border:2px dashed #466179;border-radius:38%;position:absolute;inset:3%}.controls[data-scheme=pad]{grid-template-columns:minmax(0,1fr) 56px 80px;gap:6px;display:grid}.controls .rotate-button{font-size:15px}.controls .move-pad{touch-action:pan-y pinch-zoom;background:#d7eeea;min-width:48px;font-size:12px;line-height:1.4;box-shadow:0 4px #b7dad3}.move-pad span,.move-pad small{display:block}.move-pad small{font-size:11px}.controls[data-scheme=board]{grid-template-columns:1fr 1.35fr;gap:8px;display:grid}.board-frame[data-input=board]{touch-action:pan-y pinch-zoom}.setting select{font:inherit;color:#466179;background:#e5f2f9;border:1px solid #c7dee5;border-radius:12px;width:136px;min-height:48px;padding:8px}.setting input[type=range]{width:128px;height:48px}.size-warning{z-index:20;text-align:center;background:#fff8e9f5;flex-direction:column;justify-content:center;align-items:center;gap:18px;padding:24px;display:flex;position:absolute;inset:0}.size-warning[hidden]{display:none}.size-warning p{font-size:20px}.size-warning span{font-size:13px}dialog{color:#466179;background:#fffdf4;border:0;border-radius:28px;width:min(400px,100% - 32px);max-height:calc(100dvh - 40px);padding:28px 24px;box-shadow:0 20px 100px #47636b30}dialog::backdrop{-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);background:#3757684f}#modal-content{text-align:center;flex-direction:column;gap:18px;display:flex}dialog h2{font-size:24px;line-height:1.35}dialog p{font-size:14px;line-height:1.8}button.primary{color:#257f85;background:#c4e8e4;min-width:200px;font-size:18px;font-weight:800;box-shadow:0 4px #9fcfc8}button.quiet{background:0 0;font-size:14px}.setting{text-align:left;justify-content:space-between;align-items:center;gap:12px;min-height:64px;display:flex}.setting small{color:#85a0a8;margin-top:4px;font-size:11px;display:block}.setting input{accent-color:#238e94;cursor:pointer;width:24px;height:24px}.help-pieces{justify-content:center;gap:0;display:flex}.help-pieces svg{width:64px;height:64px}.help-modes p{text-align:left;margin-bottom:10px;font-size:12px}.keyboard-help{color:#7993a1;font-size:11px!important}.result-view{max-width:500px;min-height:100dvh;padding:36px 24px max(24px,env(safe-area-inset-bottom));text-align:center;flex-direction:column;justify-content:center;align-items:center;gap:16px;margin:auto;display:flex}.result-mascot{width:136px;height:136px;transform:rotate(-7deg)}.result-mascot svg{width:100%;height:100%}.result-view h1{letter-spacing:.04em;font-size:34px}.result-lead{font-size:14px}.result-metric{color:#268e94;background:#e1f1f1;border-radius:24px;align-items:baseline;gap:8px;margin:6px;padding:14px 26px;display:flex}.result-metric strong{font-variant-numeric:tabular-nums;font-size:48px;line-height:1}.result-metric span{font-size:14px}.result-view>p:not(.result-lead){font-size:12px}.result-view .record-note{color:#be7649;min-height:18px}.result-view button{width:min(100%,280px)}@media (width<=440px){.title-view{gap:14px;padding-top:26px}.mode-buttons{flex-direction:column;gap:12px;width:min(100%,320px)}.mode-card{gap:3px;padding:12px 14px;position:relative}.mode-name{font-size:23px}.mode-card small{font-size:10px;position:absolute;top:12px;right:13px}.hero{width:170px;height:170px}.logo{font-size:50px}.eyebrow{font-size:11px}.title-tools{margin-top:0}.title-tagline,.controls .commit-button{font-size:15px}.hud-info strong{font-size:17px}}@media (width>=900px){.board-hint{display:block}.game-view:before{content:"524 POP!";color:#e8bd83;font-size:30px;font-weight:900;position:absolute;top:42%;left:calc(50% - 410px);transform:rotate(-8deg)}.game-view:after{content:"← →  移動\a ↑ 回転　Z 逆回転\a Space で確定";white-space:pre;color:#90a4aa;font-size:13px;line-height:2;position:absolute;top:52%;left:calc(50% + 230px)}}@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto}}.record-tools{text-align:left;border-top:1px solid #dfebe7;width:100%;max-width:320px;font-size:12px}.record-tools summary{cursor:pointer;color:#537b87;align-items:center;min-height:48px;display:flex}.record-tools p{margin:8px 0;font-size:12px;line-height:1.6}.record-tools button{width:100%;min-height:48px}.record-tools textarea{resize:vertical;color:#466179;background:#fffdf7;border:1px solid #c7dee5;border-radius:12px;width:100%;height:160px;padding:10px;font:11px ui-monospace,monospace}button.hud-info{text-align:left;background:0 0;border-radius:8px;align-items:flex-start;gap:1px;min-height:48px;padding:0;line-height:normal}button.hud-info:disabled{opacity:1}.hud-info .mode-line{max-width:100%;overflow:hidden}.hud-info:not(:disabled) #placement-hint:after{content:" ›"}.hud-info>span:last-child{font-size:11px}.hud-info strong{font-size:17px}.game-hud{gap:6px}.lesson-entry{color:#527c68;background:#edf4e8;min-height:48px;padding:10px 24px}.lesson-list{text-align:center;flex-direction:column;justify-content:center;gap:18px;max-width:440px;min-height:100dvh;margin:auto;padding:36px 24px;display:flex}.lesson-list h1{color:#287e85;font-size:28px}.lesson-card{text-align:left;background:#e4f1ee;flex-direction:column;gap:8px;padding:18px;display:flex}.lesson-card strong{font-size:18px}.lesson-card span{font-size:13px;line-height:1.7}.lesson-guide{z-index:4;text-align:center;pointer-events:none;background:#fffdf4eb;border-radius:14px;width:84%;max-width:260px;padding:8px 12px;font-size:12px;line-height:1.7;position:absolute;top:24%;left:8%}.game-view[data-state=presenting] .lesson-guide,.game-view[data-paused=true] .lesson-guide{visibility:hidden}.board-frame{isolation:isolate}.board-grid{z-index:1}.background-layer{z-index:0;pointer-events:none;position:absolute;inset:0}#entry-layer{z-index:4}.entry-mark{color:#76969e;font-size:12px;line-height:12px;position:absolute;top:-8px;transform:translate(-50%)}#entry-layer[data-warning=true] .entry-mark{color:#ad6838;background:#fff0db;border-radius:8px;padding:0 5px;box-shadow:0 0 0 1px #d0a170}.entry-blocked{border:2px solid #ba7645;border-radius:12px;position:absolute}.game-view[data-paused=true] #entry-layer{visibility:hidden}.resume-cue{z-index:10;background:#fffdf4ee;border:1px solid #d5e7e6;border-radius:24px;flex-direction:column;align-items:center;gap:14px;padding:18px 24px;display:flex;position:absolute;top:40%;left:50%;transform:translate(-50%);box-shadow:0 4px 16px #47636b18}.resume-cue p{color:#287e85;white-space:nowrap;font-size:24px}.resume-cue button{min-width:144px;min-height:48px;font-size:14px}.game-view[data-preparing=true] .controls{opacity:.45}.all-send-result{color:#287e85}.title-tools{flex-wrap:wrap;justify-content:center}.secondary-metrics{white-space:nowrap;color:#72919c;align-items:center;gap:5px;max-width:100%;font-size:11px;display:flex}.speed-badge{color:#537e80;background:#e4efeb;border-radius:7px;padding:1px 5px;font-size:10px;line-height:1.4;display:inline-block}.resume-cue{width:min(144px,calc(var(--cell)*3 - 8px));border-radius:18px;gap:8px;padding:12px 8px;top:20%}.resume-cue p{font-size:18px}.resume-cue button{width:100%;min-width:0;padding:8px 0;font-size:13px}