:root{color-scheme:dark;--bg:#21172e;--panel:#342444;--ink:#f9f0ff;--muted:#d1bedc;--line:#715681;--pink:#f2b8d7;--gold:#ffd17b;--radius:18px}*{box-sizing:border-box}[hidden]{display:none!important}html{min-height:100%;background:var(--bg)}body{margin:0;min-height:100svh;padding:22px 18px;color:var(--ink);font:15px/1.55 system-ui,"Malgun Gothic",sans-serif;background:radial-gradient(ellipse at 50% 0,#49345b,transparent 70%),var(--bg);padding-bottom:max(20px,env(safe-area-inset-bottom));overflow-x:hidden}button,input{font:inherit}button{cursor:pointer;touch-action:manipulation;border-radius:10px;transition:background .15s,color .15s}button:focus-visible,input:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--gold);outline-offset:4px}button:disabled{opacity:.55;cursor:wait}input[type=text],input:not([type]){width:100%;border:1px solid #725580;background:#130d1d;color:var(--ink);padding:12px 14px;border-radius:10px;font-size:16px}input:focus{border-color:var(--pink)}input[type=checkbox]{accent-color:var(--pink);width:18px;height:18px;flex:none}h1,h2,p{margin:0}.shell{width:min(100%,840px);margin:auto}.start-card{max-width:530px;margin:0 auto;padding:25px 30px 22px;background:linear-gradient(150deg,#3c2b4b,#2d203a);border:1px solid var(--line);border-radius:22px;box-shadow:0 16px 50px #0003}.eyebrow{display:flex;justify-content:space-between;gap:12px;font-size:10px;letter-spacing:.12em;color:var(--pink)}.eyebrow span{color:var(--muted);font-size:9px}.hero{position:relative;width:104px;height:104px;margin:15px auto 9px;display:grid;place-items:center;background:#7c54762b;border:1px solid #715375;border-radius:50%}.hero>img{width:92px;height:94px;object-fit:contain;filter:drop-shadow(0 5px 9px #0006)}.hero>span{position:absolute;right:-11px;top:13px;color:var(--gold);font-size:25px}.kicker{font-size:10px;letter-spacing:.12em;color:var(--pink)}.start-card>.kicker{text-align:center}#sgTitle{font-size:34px;letter-spacing:-.055em;text-align:center;line-height:1.2;margin:5px 0 10px}.intro{white-space:pre-line;color:var(--muted);font-size:14px;line-height:1.7;text-align:center}.rules{display:flex;justify-content:center;gap:16px;margin:17px 0 20px;padding:12px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);font-size:11px;color:var(--muted)}.rules b{margin-left:3px;color:var(--gold)}form label:not(.consent){display:flex;justify-content:space-between;gap:8px;font-size:12px;margin:11px 0 6px}label small{color:var(--muted);font-size:10px}.primary{display:block;width:100%;border:1px solid #e7b3d6;background:var(--pink);color:#301b31;padding:12px 16px;font-weight:800;box-shadow:0 3px 0 #8b5b80;margin-top:15px}.primary:hover{background:#ffd5e9}.primary:active{transform:translateY(2px);box-shadow:0 1px 0 #8b5b80}.quiet{border:1px solid var(--line);background:#30203e;color:#eeddf7;padding:9px 13px;font-size:12px}.quiet:hover{background:#4a3158}.muted{color:var(--muted);font-size:11px;line-height:1.65;white-space:pre-line}#sgAutomatic{margin-top:13px}.error{color:#ffacb9;font-size:12px;margin-top:7px}.error:empty{display:none}.consent{display:flex;align-items:flex-start;gap:9px;font-size:11px;color:var(--muted);margin-top:12px}.consent input{margin:2px 0 0}#sgPrivate>.muted{margin-top:10px}.start-bottom{display:flex;align-items:center;justify-content:space-between;gap:12px;border-top:1px solid var(--line);padding-top:15px;margin-top:17px}.best{display:grid;grid-template-columns:auto auto;column-gap:10px;align-items:center}.best>span{font-size:10px;color:var(--muted)}.best strong{font-size:19px;color:var(--gold);font-variant-numeric:tabular-nums}.best small{grid-column:1/-1;font-size:10px;color:var(--muted)}.play-header{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:16px}.play-brand{display:flex;gap:10px;align-items:center}.play-brand h1{font-size:18px;letter-spacing:-.035em;line-height:1.3}.brand-mark{width:40px;height:40px;background:#593950;border:1px solid var(--line);border-radius:11px;padding:4px}.brand-mark img{width:100%;height:100%;object-fit:contain}.play-actions{display:flex;gap:7px}.scorebar{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 2px 12px}.scorebar>div:first-child{display:flex;align-items:baseline;gap:11px;min-width:0}.scorebar span{font-size:12px;max-width:170px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.scorebar strong{font-size:30px;font-variant-numeric:tabular-nums;font-weight:850;color:var(--gold)}.scorebar small{font-size:9px;letter-spacing:.1em;color:var(--muted)}.scorebar .hearts{font-size:21px;color:var(--pink);letter-spacing:5px;white-space:nowrap}.scorebar .neg{color:#ff879f}#sgStage{position:relative;width:100%;aspect-ratio:720/460;border:2px solid #5a3b6b;border-radius:16px;overflow:hidden;background:linear-gradient(#483555,#342442);background-color:#342442;touch-action:none;cursor:crosshair;user-select:none;box-shadow:0 8px 28px #0004}#sgWorld{position:absolute;left:0;top:0;width:720px;height:460px;transform-origin:0 0;pointer-events:none}.stage-lines{position:absolute;inset:0;background-image:radial-gradient(#74518166 .7px,transparent .7px);background-size:24px 24px;opacity:.4}#sgBasket{position:absolute;width:92px;height:58px;left:0;top:0;filter:drop-shadow(0 5px 7px #0008)}#sgBasket img{width:100%;height:100%;object-fit:contain}.obj{position:absolute;width:44px;height:44px;will-change:transform}.obj img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 3px 4px #0007)}#sgFlash{position:absolute;inset:0;background:#ff3964;opacity:0;pointer-events:none}#sgBlade{position:absolute;left:0;top:0;pointer-events:none;z-index:4;width:60px;height:114px}#sgCursorArt{position:absolute;width:60px;height:114px;left:-13px;top:-25px;transform-origin:13px 25px;filter:drop-shadow(0 4px 3px #0008)}#sgCursorArt img{width:100%;height:100%;object-fit:contain}.cursor-target{position:absolute;width:7px;height:7px;border:1px solid #fff1b9;border-radius:50%;left:-3px;top:-3px;background:#ffd17b66;z-index:1}.cursor-swing #sgCursorArt{animation:blade-swing .18s ease-out}.slash{position:absolute;width:74px;height:74px;pointer-events:none;transform:translate(-50%,-50%);animation:slash-pop .25s ease-out forwards}.slash img{width:100%;height:100%;object-fit:contain}.play-rule{font-size:11px;text-align:center;color:var(--muted);margin-top:16px;line-height:1.8;white-space:pre-line}.control-hint{font-size:10px;text-align:center;color:#a185ad;margin-top:6px}.touch-controls{display:none;text-align:center;margin-top:8px;color:var(--muted);user-select:none}.touch-controls b{font-size:11px;color:var(--pink);margin-right:8px}.touch-controls p{display:inline;font-size:11px}.dragging-basket #sgBasket{filter:drop-shadow(0 0 5px #edb2d580) drop-shadow(0 5px 7px #0008)}dialog{width:min(440px,calc(100vw - 28px));max-height:calc(100svh - 28px);overflow:auto;color:var(--ink);background:#312240;border:1px solid #8c6a97;border-radius:20px;padding:0;box-shadow:0 22px 80px #0009}dialog::backdrop{background:#090510d6;backdrop-filter:blur(4px)}.modal{padding:28px;text-align:center}.modal h2{font-size:25px;line-height:1.35;letter-spacing:-.04em;margin:7px 0 12px}.modal>p{margin-bottom:10px}.modal>.quiet{margin-top:12px}.result-score{display:flex;justify-content:center;align-items:baseline;gap:10px;margin:15px 0}.result-score strong{font-size:58px;line-height:1;color:var(--gold);font-variant-numeric:tabular-nums}.result-score span{font-size:10px;letter-spacing:.15em;color:var(--muted)}#sgResultReason{font-size:13px;color:#d9c6e0}.record{font-size:12px;color:var(--gold)}.result-stats{display:flex;gap:22px;justify-content:center;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:14px 0;font-size:12px;color:var(--muted);margin:17px 0}.result-stats b{color:var(--ink);margin-left:5px}.submit-status{font-size:12px;color:var(--pink);min-height:1em}.result-actions{display:flex;gap:7px;justify-content:center;margin:13px 0}.result-actions .quiet{font-size:11px;padding:9px}#sgPublicNotice{font-size:10px;margin-top:15px}.rank-heading{display:flex;justify-content:space-between;gap:12px;align-items:center}#sgRankingList{list-style:none;counter-reset:rank;padding:0;margin:20px 0}#sgRankingList li{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--line);counter-increment:rank;text-align:left;font-size:13px}#sgRankingList li:before{content:counter(rank,decimal-leading-zero);color:var(--pink);font-size:10px}#sgRankingList span{flex:1;overflow-wrap:anywhere}#sgRankingList b{color:var(--gold);font-variant-numeric:tabular-nums}@keyframes blade-swing{0%{transform:rotate(-30deg)}60%{transform:rotate(27deg)}100%{transform:rotate(0)}}@keyframes slash-pop{from{opacity:1;scale:.6}to{opacity:0;scale:1.5}}@media(pointer:coarse),(max-width:600px){.touch-controls{display:block}.control-hint{display:none}}@media(max-width:600px){body{padding:14px 10px}.start-card{padding:20px}.hero{width:86px;height:86px;margin-top:12px}.hero>img{width:78px;height:80px}#sgTitle{font-size:30px}.rules{gap:12px;margin:14px 0;font-size:10px}.play-brand h1{font-size:16px}.scorebar strong{font-size:26px}.scorebar small{display:none}.scorebar span{max-width:120px}.scorebar .hearts{font-size:18px;letter-spacing:2px}.play-header{margin-bottom:10px}.play-actions .quiet{padding:8px 10px}.modal{padding:24px 20px}.touch-controls{gap:15px}#sgStage{border-radius:12px}.start-bottom>.quiet{font-size:11px;padding:9px}}@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.slash{opacity:.7}}

.start-controls{font-size:11px;line-height:1.7;color:#cdb7d7;margin-bottom:12px;text-align:center}#sgStage:focus-visible{outline:1px solid var(--pink);outline-offset:3px}

/* Keep both hands over the board, with no separate movement pad. */
#sgStage{margin-left:auto;margin-right:auto}#sgPlay:fullscreen{width:100%;height:100%;overflow:auto;background:var(--bg);padding:10px max(12px,env(safe-area-inset-right)) 10px max(12px,env(safe-area-inset-left))}#sgFullscreen{font-size:12px;line-height:1.2}
@media(pointer:coarse){.play-actions .quiet{min-width:38px;min-height:38px}.touch-controls{line-height:1.7}.play-rule{margin-top:8px}}
@media(orientation:landscape) and (max-height:560px){body{padding:8px max(10px,env(safe-area-inset-right)) 8px max(10px,env(safe-area-inset-left))}.play-header{margin-bottom:3px}.scorebar{margin-bottom:4px}.scorebar strong{font-size:23px}.play-rule,.control-hint{display:none}.touch-controls{margin-top:4px;line-height:1.5}.touch-controls b,.touch-controls p{font-size:10px}.brand-mark{width:32px;height:32px}.play-brand h1{font-size:15px}.play-header .kicker{font-size:9px}}

.run-status{display:flex;align-items:center;gap:14px;flex:none}.level-badge{display:flex;align-items:baseline;gap:4px;border:1px solid #ba8ab7;border-radius:9px;background:#7e52684d;color:#ffe0ef;padding:5px 9px;min-width:56px;justify-content:center}.scorebar .level-badge span{font-size:10px;letter-spacing:.05em}.level-badge b{font-size:19px;font-variant-numeric:tabular-nums}.level-up{animation:level-up .8s ease-out}@keyframes level-up{0%{transform:scale(1);box-shadow:0 0 0 0 #ffd1eb99}35%{transform:scale(1.15);background:#b37794;color:#fff}100%{transform:scale(1);box-shadow:0 0 0 10px #ffd1eb00}}@media(max-width:600px){.run-status{gap:9px}.level-badge{min-width:48px;padding:4px 7px}.level-badge b{font-size:16px}.scorebar>div:first-child{gap:7px}.scorebar>div:first-child>span{max-width:95px;flex-shrink:1}.scorebar strong{font-size:25px}}@media(prefers-reduced-motion:reduce){.level-up{animation:none}}

.compact-play #sgPlay:not([hidden]){display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"score tools" "stage stage";column-gap:16px;row-gap:4px}.compact-play .play-header{grid-area:tools;margin:0}.compact-play .scorebar{grid-area:score;margin:0;gap:16px}.compact-play #sgStage{grid-area:stage;align-self:start}.compact-play .play-brand,.compact-play .touch-controls,.compact-play .play-rule,.compact-play .control-hint{display:none}.compact-play .scorebar>div:first-child{flex:1}.compact-play .scorebar>div:first-child>span{max-width:140px}

.start-fullscreen{display:block;margin:0 0 12px auto}
.gv-full body{padding:6px 10px}
.gv-full .start-card{max-width:780px;padding:14px 20px;position:relative;display:grid;grid-template-columns:minmax(180px,.9fr) minmax(220px,1.1fr);column-gap:24px;align-content:start}
.gv-full #sgStart form{grid-column:2;grid-row:2 / 10;align-self:start}
.gv-full #sgStart .start-fullscreen{grid-column:1 / -1;margin:0 0 6px auto;min-height:34px}
.gv-full #sgStart>.eyebrow,.gv-full #sgStart>.hero,.gv-full #sgStart>.kicker,.gv-full #sgStart>h1,.gv-full #sgStart>.intro,.gv-full #sgStart>.rules,.gv-full #sgStart>.start-controls{grid-column:1}
.gv-full #sgStart>.hero{width:68px;height:68px;margin:6px auto}.gv-full #sgStart>.hero>img{width:60px;height:62px}
.gv-full #sgTitle{font-size:26px}.gv-full #sgStart .rules{margin:8px 0;padding:7px 0;gap:9px;font-size:10px}
.gv-full #sgStart .start-bottom{grid-column:1 / -1;margin-top:10px;padding-top:8px}
.gv-full .compact-play .shell{width:100%;max-width:none}.gv-full .compact-play .scorebar{gap:9px}.gv-full .compact-play .scorebar strong{font-size:24px}.gv-full .compact-play .play-actions .quiet{padding:5px 9px;min-height:34px}
.gv-full .modal{padding:16px 22px}.gv-full .modal .result-score strong{font-size:42px}
.gv-full .modal .result-stats{padding:8px;margin:10px 0}.gv-full .modal .primary{margin-top:10px}

/* The start screen stays short; device-specific instructions have their own screen. */
.help-open{display:block;width:100%;min-height:44px;margin-top:10px;font-size:14px;font-weight:700}
.help-card{width:100%;max-width:760px;margin:0 auto;padding:24px;background:linear-gradient(150deg,#3c2b4b,#2d203a);border:1px solid var(--line);border-radius:22px;box-shadow:0 16px 50px #0003}
.help-header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:18px}
.help-header h2{font-size:24px;line-height:1.4;letter-spacing:-.025em;color:var(--ink)}
.help-header .quiet{min-height:44px;flex:none}
.help-tabs{display:flex;gap:5px;padding:5px;border:1px solid var(--line);border-radius:12px;background:#171021;margin-bottom:16px}
.help-tabs button{flex:1;min-width:0;min-height:44px;border:1px solid transparent;background:transparent;color:var(--muted);font-size:15px;font-weight:700}
.help-tabs button:hover{background:#75527433;color:var(--ink)}
.help-tabs button[aria-selected=true]{background:var(--pink);color:#301b31;border-color:#edc6dd;box-shadow:0 2px 7px #0002}
.help-back{display:block;width:100%;min-height:44px;margin-top:20px;font-size:14px;font-weight:700}
.howto{container-type:inline-size;min-width:0}
.howto-steps{display:grid;gap:9px;list-style:none;margin:12px 0 0;padding:0}
.howto-step{display:grid;grid-template-columns:minmax(0,1fr) 168px;align-items:center;gap:12px;min-width:0;padding:12px;border:1px solid #b88ba533;border-radius:12px;background:#e7c5ff08}
.howto-copy{display:flex;align-items:baseline;gap:9px;min-width:0;color:var(--ink);font-size:16px;font-weight:700;line-height:1.65;word-break:keep-all;overflow-wrap:anywhere}
.howto-number{flex:none;font-size:11px;font-weight:700;letter-spacing:.04em;color:var(--pink);font-variant-numeric:tabular-nums}
.howto-art{display:flex;align-items:center;justify-content:center;gap:6px;min-width:0;height:62px}
.howto-sprite{display:block;position:relative;flex:none;width:52px;height:54px;overflow:hidden}
.howto-sprite img{display:block;width:100%;height:100%;object-fit:contain;user-select:none}
.howto-basket{width:96px;height:60px}
.gv-full #sgStart form{grid-row:2 / 7}
.gv-full .help-card{padding:16px 20px}
.gv-full .help-header{margin-bottom:10px}
.gv-full .help-tabs{margin-bottom:10px}
.gv-full .help-back{margin-top:14px}
@media(max-width:600px){.help-card{padding:20px}.help-header h2{font-size:22px}}
@container (max-width:300px){
  .howto-step{grid-template-columns:minmax(0,1fr);gap:8px}
  .howto-copy{font-size:16px}
  .howto-art{justify-content:center}
}
@container (min-width:600px){
  .howto-steps{grid-template-columns:repeat(3,minmax(0,1fr))}
  .howto-step{grid-template-columns:minmax(0,1fr);gap:8px;align-content:start}
  .howto-copy{min-height:53px}
}

/* 일시정지 아이콘(❚❚)과 소리 버튼 */
.pause-bars{display:inline-block;width:12px;height:14px;border-left:4px solid currentColor;border-right:4px solid currentColor;box-sizing:border-box;vertical-align:middle}.sound-button{display:inline-flex;align-items:center;justify-content:center}.sound-button .sound-off{display:none}.sound-button.muted .sound-wave{display:none}.sound-button.muted .sound-off{display:inline}.sound-button.muted{opacity:.7}
/* 게임판 배경: 아주 옅은 포도 이모지 무늬(게임에 방해되지 않게) */
#sgStage{background:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22140%22 height=%22140%22 viewBox=%220 0 140 140%22%3E%3Cg opacity=%22.16%22 font-size=%2230%22 font-family=%22Apple Color Emoji,Segoe UI Emoji,Noto Color Emoji,sans-serif%22 text-anchor=%22middle%22%3E%3Ctext x=%2235%22 y=%2248%22 transform=%22rotate%28-14 35 38%29%22%3E%F0%9F%8D%87%3C/text%3E%3Ctext x=%22105%22 y=%22118%22 transform=%22rotate%2812 105 108%29%22%3E%F0%9F%8D%87%3C/text%3E%3C/g%3E%3C/svg%3E") 0 0/140px 140px repeat,linear-gradient(#483555,#342442)}
/* 시작 화면이 게임 틀보다 길어 스크롤이 생기지 않게 */
/* 넓고 낮은 화면(노트북 등): 전체화면 때처럼 시작 카드를 두 칸으로 */
@media (min-width:640px) and (max-height:820px){
  html:not(.gv-full) body{padding:10px 14px}
  .start-card{max-width:780px;padding:14px 20px;position:relative;display:grid;grid-template-columns:minmax(180px,.9fr) minmax(220px,1.1fr);column-gap:24px;align-content:start}
  #sgStart form{grid-column:2;grid-row:2 / 7;align-self:start}
  #sgStart .start-fullscreen{grid-column:1 / -1;margin:0 0 6px auto;min-height:34px}
  #sgStart>.eyebrow,#sgStart>.hero,#sgStart>.kicker,#sgStart>h1,#sgStart>.intro,#sgStart>.rules,#sgStart>.start-controls{grid-column:1}
  #sgStart>.hero{width:68px;height:68px;margin:6px auto}#sgStart>.hero>img{width:60px;height:62px}
  #sgTitle{font-size:26px}
  #sgStart .start-bottom{grid-column:1 / -1;margin-top:10px;padding-top:8px}
}
/* 좁고 낮은 화면(휴대폰): 여백과 그림을 줄인다 */
@media (max-width:639px) and (max-height:760px){
  html:not(.gv-full) body{padding:10px 12px}
  .start-card{padding:14px 16px 12px}
  #sgStart .start-fullscreen{margin-bottom:4px;min-height:34px}
  #sgStart>.hero{width:68px;height:68px;margin:6px auto}#sgStart>.hero>img{width:60px;height:62px}
  #sgStart .start-bottom{margin-top:10px;padding-top:8px}
}