/* 화면 버튼으로 완결되는 태블릿 우선 놀이판. 어떤 단계에도 방향키가 필요하지 않다. */
body.l20-game .sp-stage{overflow:auto;overscroll-behavior:contain;background:#eaf1ed}
.l20{width:min(860px,100%);margin:0 auto;padding:18px clamp(12px,2vw,24px) max(20px,env(safe-area-inset-bottom));color:#253730}
.l20-head{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;margin-bottom:12px}
.l20-pill{background:var(--l20-color);color:#fff;border-radius:999px;padding:10px 16px;font-size:16px;font-weight:800}
.l20-topic{font-size:16px;color:#52695c}
.l20-goal{font-family:var(--sp-font-display);font-size:clamp(22px,3vw,30px);line-height:1.4;margin:12px 0 16px;overflow-wrap:anywhere}
.l20-panel{border:1px solid #c9d9ce;border-radius:24px;padding:clamp(14px,2.5vw,24px);background:#fff;box-shadow:0 7px 0 #d4e2d8;margin-bottom:16px}
.l20-panel h3{font-size:20px;margin:0 0 12px;color:var(--l20-color)}
.l20-rule{font-size:16px;line-height:1.7;margin:8px 0 14px;color:#3b5547}
.l20-buttons{display:flex;gap:10px;flex-wrap:wrap;margin:12px 0}
.l20-button{min-width:52px;min-height:56px;border:2px solid #bdcfc3;border-radius:14px;background:#f2f7f3;color:#263c30;cursor:pointer;font:inherit;font-size:17px;font-weight:700;padding:10px 14px;line-height:1.4;touch-action:manipulation;overflow-wrap:anywhere}
.l20-button:active{transform:translateY(2px)}
.l20-button.is-on,.l20-button[aria-pressed=true]{background:var(--l20-color);border-color:var(--l20-color);color:#fff;box-shadow:0 3px 0 #263b43}
.l20-button:focus-visible{outline:3px solid #165eaf;outline-offset:3px}
.l20-button:disabled{opacity:.55;cursor:default;transform:none}
.l20-board{display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr));gap:10px;margin:16px auto;width:min(580px,100%)}
.l20-card{min-height:82px;font-size:24px;box-shadow:0 4px 0 #cfddd3}
.l20-playing-card{position:relative;min-height:104px;padding-top:32px;border-width:3px;border-color:#b8ccdf;background:linear-gradient(160deg,#fff,#eaf5ff);font-size:25px}
.l20-playing-card::before{content:attr(data-card-type);position:absolute;top:7px;left:6px;right:6px;font-size:13px;letter-spacing:.03em;font-weight:800}
.l20-playing-card.is-on{background:var(--l20-color);border-color:#e4c261;box-shadow:0 5px 0 #18394c,0 0 0 2px #ffe6a4}
.l20-reward{flex:1;min-height:80px;background:#fff2c7;border-color:#e6ba60;font-size:24px}
.l20-world{margin:0 0 18px;background:#fff;border:2px solid #b8ccd7;border-radius:22px;overflow:hidden;box-shadow:0 6px 0 #cbded4}
.l20-world canvas{display:block;width:100%;height:auto;max-height:300px;object-fit:contain;background:#e5f5ff}
.l20-world-pinball canvas{max-height:410px;background:#172c52;cursor:grab}
.l20-world-pinball canvas:active{cursor:grabbing}
.l20-world figcaption{padding:12px 16px;font-size:17px;font-weight:800;line-height:1.5;color:#2d4e61;background:#f2f9ff;border-top:1px solid #d9e9ef}
.l20-world-note{font-size:15px;line-height:1.6;margin:0;padding:0 16px 12px;background:#f2f9ff;color:#425b6f}
body[data-learning20-kind=deck] .l20-panel{background:#f7fbff;border-color:#c1d3e5}
body[data-learning20-kind=pack] .l20-board{padding:12px;border:7px solid #8aa4b7;background:#d6e4ee;border-radius:22px}
body[data-learning20-kind=pack] .l20-cell{background:#fff9e7;border-color:#bec5a3}
body[data-learning20-kind=draft] .l20-cell{background:#fff3c8;border-color:#d4b771;box-shadow:0 4px 0 #dfcd9c}
body[data-learning20-kind=coverage] .l20-board{padding:8px;background:#8dab7e;border-radius:18px}
body[data-learning20-kind=coverage] .l20-cell{font-size:30px;background:#e6efd0;border-radius:8px}
body[data-learning20-kind=coverage] .l20-cell.is-covered{background:#bce7c4}
body[data-learning20-kind=connections] .l20-word{border-color:#adc5db;background:#f3f8ff;box-shadow:0 4px 0 #cadced}
body[data-learning20-kind=connections] .l20-word.is-on{background:var(--l20-color)}
.l20-sky .l20-cell:disabled{opacity:.85}
.l20-cell{min-height:76px;font-size:20px;padding:8px 4px}
.l20-token{flex:1 1 130px}
.l20-word{font-size:clamp(15px,2vw,20px);padding:10px 4px;min-height:72px}
.l20-readout{background:#edf4ff;color:#264a70;border-radius:14px;padding:14px;font-size:17px;line-height:1.6;margin:12px 0 0}
.l20-feedback{border:2px solid #ad6434;background:#fff3e1;padding:14px 18px;border-radius:16px;line-height:1.7;font-size:17px}
.l20-feedback.is-good,.l20-family{border-color:#267b51;color:#195538;background:#e4f6e9}
.l20-family{padding:12px;border-radius:12px;font-size:16px;line-height:1.6}
.l20-actions{position:sticky;bottom:0;z-index:4;padding:12px 0 max(12px,env(safe-area-inset-bottom));background:#eaf1ed}
.l20-primary{width:100%;min-height:64px;background:var(--l20-color);color:#fff;border-color:var(--l20-color);font-size:22px;box-shadow:0 4px 0 #243c45}
.l20-score-help{font-size:15px;line-height:1.7;margin:10px 0;color:#3d5749}
.l20-score-help summary{min-height:52px;cursor:pointer;padding:12px}
.l20-sky{display:grid;grid-template-columns:36px repeat(4,minmax(0,1fr)) 36px;gap:8px;margin:16px auto;width:min(540px,100%)}
.l20-sky .l20-cell{padding:4px;font-size:24px;min-height:64px}
.l20-clue{display:flex;align-items:center;justify-content:center;font-size:16px;min-height:30px;color:#385d82;white-space:nowrap}
.l20-timeline{display:flex;gap:12px;flex-wrap:wrap;padding-left:26px;font-size:19px;line-height:1.7;min-height:56px}
.l20-timeline li{background:#edf4ff;padding:8px 14px;border-radius:12px}
.l20-timeline .is-late{color:#9c3e24;background:#fff0dc}
.l20-gate{display:grid;grid-template-columns:110px 1fr 1fr;gap:12px;align-items:center;margin:14px 0}
.l20-gate .l20-card{font-size:19px;min-height:64px}
.l20-cell.is-target{border-style:dashed;border-color:#8b6531;background:#fff5d9}
.l20-cell.is-covered{background:#d9f1e0;color:#24563a;border-color:#287849}
.lane-0{border-color:#325f9d;background:#eaf2ff}.lane-1{border-color:#8755a1;background:#f6eefd}.lane-2{border-color:#0c776e;background:#e4f7f2}
@media(max-width:540px){.l20{padding:12px}.l20-panel{padding:12px;border-radius:18px}.l20-board{gap:7px}.l20-card{font-size:20px;min-height:72px}.l20-playing-card{min-height:95px;font-size:20px;padding-left:3px;padding-right:3px}.l20-playing-card::before{font-size:11px}.l20-word{font-size:15px;min-height:64px}.l20-gate{grid-template-columns:1fr 1fr;gap:8px}.l20-gate>b{grid-column:1/-1}.l20-sky{grid-template-columns:24px repeat(4,minmax(48px,1fr)) 24px;gap:4px}.l20-sky .l20-cell{font-size:21px;min-height:52px}.l20-clue{font-size:13px;white-space:normal}.l20-token{font-size:16px}.l20-cell{font-size:18px;min-height:64px}.l20-world{border-radius:18px}.l20-world figcaption{font-size:16px;padding:10px 12px}.l20-world-note{font-size:14px;padding:0 12px 10px}.l20-reward{min-width:65px;font-size:20px}}
@media(min-width:700px){.l20-pinball-layout{display:grid;grid-template-columns:1.15fr 1fr;gap:16px;align-items:start}.l20-pinball-layout .l20-panel{padding:14px}.l20-pinball-layout .l20-gate{grid-template-columns:1fr 1fr;gap:8px;margin:10px 0}.l20-pinball-layout .l20-gate>b{grid-column:1/-1}.l20-pinball-layout .l20-gate .l20-card{font-size:17px;min-height:56px;padding:8px}.l20-world:not(.l20-world-pinball) canvas{max-height:210px}}
@media(prefers-reduced-motion:reduce){.l20-button{transition:none;transform:none}}