:root{font-family:"Malgun Gothic","Apple SD Gothic Neo",system-ui,sans-serif;color:#302647;background:#f6f3fc;font-synthesis:none;font-weight:500}*{box-sizing:border-box}body{margin:0}button,a,canvas{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer}button:focus-visible,a:focus-visible,canvas:focus-visible{outline:3px solid #e2a944;outline-offset:4px}button:disabled{opacity:.35;cursor:default}[hidden]{display:none!important}.playroom{width:min(1120px,100% - 64px);margin:auto}.page-header{height:88px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #e7e1ef}.brand{display:flex;align-items:center;gap:11px;color:#362551;text-decoration:none;font-size:16px;font-weight:800;letter-spacing:-.5px}.brand-star{font-size:32px;color:#7a50ba}.divider{height:14px;width:1px;background:#d7cfdf;margin:0 4px}.room-name{font-size:12px;font-weight:500;color:#94869f}.prototype{font-size:10px;letter-spacing:1.6px;color:#84748e;border:1px solid #ded5e9;padding:7px 11px;border-radius:30px}.intro{display:flex;align-items:center;justify-content:space-between;padding:32px 0 25px}.eyebrow{font-size:9px;letter-spacing:2.2px;color:#927fa4;margin:0 0 12px}h1{font-size:34px;letter-spacing:-1.8px;line-height:1.2;margin:0;font-weight:850}h1>span:first-child{color:#8155b8}.title-star{color:#c9a451;font-size:23px;display:inline-block;vertical-align:top;margin-left:9px;margin-top:-3px}.subtitle{font-size:12px;color:#93869e;margin:12px 0 0}.best-card{text-align:right;padding:12px 0 8px 32px;border-left:1px solid #e5dfee}.best-card>span{font-size:11px;color:#93869e}.best-card strong{font-size:28px;display:block;margin-top:5px;font-variant-numeric:tabular-nums;font-weight:750}small{font-size:12px;font-weight:500;opacity:.6}.stage{height:clamp(440px,59vh,630px);min-height:440px;position:relative;overflow:hidden;border-radius:22px;background:#251d40;box-shadow:0 18px 50px #4d2c7220;isolation:isolate}canvas{width:100%;height:100%;display:block;touch-action:none;user-select:none;cursor:pointer}.hud{position:absolute;inset:26px 28px auto;display:flex;align-items:flex-start;justify-content:space-between;pointer-events:none;color:#fff}.distance>span{font-size:10px;color:#d4c7e5;letter-spacing:.6px}.distance strong{display:block;font-size:34px;font-weight:700;font-variant-numeric:tabular-nums;line-height:1.25;margin-top:5px}.hud-right{display:flex;align-items:center;gap:9px}.icon-button{pointer-events:auto;background:#fff1;border:1px solid #ffffff25;color:#eee1ff;width:38px;height:38px;border-radius:13px;font-size:18px;position:relative}.icon-button:hover{background:#fff2}.sound-off{position:absolute;inset:5px 9px;color:#dccee9;font-size:24px}.star-count{font-size:14px;color:#f7dca0;margin-right:10px}.world-label{position:absolute;left:28px;bottom:28px;color:#b9a7cb;font-size:9px;letter-spacing:1.3px;pointer-events:none}.control-hint{position:absolute;bottom:22px;left:50%;transform:translateX(-50%);white-space:nowrap;display:flex;align-items:center;gap:8px;padding:10px 16px;border:1px solid #ffffff1a;border-radius:30px;background:#2019329c;color:#dfd1ef;font-size:11px;pointer-events:none;backdrop-filter:blur(8px)}.hint-dot{width:5px;height:5px;border-radius:50%;background:#c8a3f2}.stage.holding .hint-dot{background:#f6d98f;box-shadow:0 0 12px #f6d98f}.stage.holding .control-hint{color:#f7df9e}.overlay{position:absolute;inset:0;display:grid;place-items:center;background:linear-gradient(90deg,#221b3a20,#221b3a3b);backdrop-filter:blur(2px)}.menu{width:min(390px,90%);text-align:center;padding:29px 25px;border:1px solid #ffffff23;border-radius:26px;color:#fff;background:linear-gradient(150deg,#4b3964eb,#302741eb);box-shadow:0 18px 50px #160d2d40}.menu-kicker{font-size:10px;letter-spacing:1.7px;color:#d3b4ed}.menu h2{font-size:29px;letter-spacing:-1.2px;line-height:1.35;margin:16px 0 14px}.menu p{font-size:12px;line-height:1.9;color:#cfc1de;margin:0 0 22px}.primary{border:0;border-radius:14px;width:100%;padding:15px 22px;background:#efe0ff;color:#42215f;font-weight:800;font-size:14px;box-shadow:0 3px 0 #c9a5e7;text-align:center;display:flex;justify-content:space-between;align-items:center}.primary:hover{background:#fff1ff;transform:translateY(-1px)}.primary:active{transform:translateY(2px);box-shadow:none}.primary span{font-size:22px;line-height:15px}.menu-foot{display:block;font-size:10px;color:#b5a2c7;margin-top:18px}.secondary{margin-top:14px;background:transparent;color:#d7c9e3;border:0;padding:8px;font-size:12px;text-decoration:underline;text-underline-offset:4px}.result{display:flex;justify-content:center;gap:35px;margin:0 0 23px}.result strong{display:block;font-size:36px;color:#f6dfab;line-height:1.2}.result span{display:block;font-size:10px;color:#cabbda;margin-bottom:8px}.result small{font-size:13px}.toast{position:absolute;left:50%;top:26%;transform:translateX(-50%) translateY(5px);font-size:16px;color:#ffe4a4;font-weight:800;text-shadow:0 2px 12px #352142;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;white-space:nowrap}.toast.visible{opacity:1;transform:translateX(-50%) translateY(0)}.guide{display:flex;justify-content:center;align-items:center;gap:35px;padding:28px 15px;border-bottom:1px solid #e7e1ef}.guide>div{display:flex;gap:12px;align-items:center}.step{width:31px;height:31px;border-radius:11px;background:#ece5f5;color:#9774b6;display:grid;place-items:center;font-size:10px}.guide p{margin:0;display:grid;gap:5px}.guide strong{font-size:12px;font-weight:700}.guide p span{font-size:10px;color:#9789a1}.guide-arrow{color:#c6b5d6;font-size:15px}footer{display:flex;justify-content:space-between;padding:19px 0 28px;color:#a59aad;font-size:10px}footer>span:first-child{color:#9277a8}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}@media(max-width:700px){.playroom{width:calc(100% - 28px)}.page-header{height:65px}.brand{font-size:14px;gap:7px}.brand-star{font-size:27px}.room-name{font-size:10px}.prototype{font-size:8px;letter-spacing:1px;padding:6px 8px}.intro{padding:23px 2px 21px}h1{font-size:28px}.eyebrow{font-size:7px;letter-spacing:1.2px;margin-bottom:10px}.subtitle{font-size:11px;margin-top:9px}.title-star{font-size:17px}.best-card{padding-left:15px}.best-card strong{font-size:23px}.best-card>span{font-size:9px}.stage{height:clamp(450px,64svh,650px);min-height:450px;border-radius:19px}.hud{inset:19px 18px auto}.distance strong{font-size:28px}.hud-right{gap:6px}.icon-button{width:34px;height:34px;border-radius:11px}.star-count{margin-right:4px;font-size:12px}.world-label{bottom:67px;left:20px;font-size:8px}.control-hint{font-size:10px;padding:10px 12px;bottom:19px}.menu{padding:26px 22px;width:min(325px,88%)}.menu h2{font-size:26px}.guide{gap:10px;padding:22px 1px;justify-content:space-between}.guide>div{gap:6px;align-items:flex-start}.step{width:23px;height:23px;border-radius:8px;font-size:9px;flex-shrink:0}.guide strong{font-size:10px;white-space:nowrap}.guide p span{font-size:9px;max-width:85px;line-height:1.5}.guide-arrow{display:none}footer{font-size:9px;gap:14px;line-height:1.6;padding:16px 2px 23px}footer>span:last-child{text-align:right}}@media(max-width:350px){.room-name,.divider{display:none}h1{font-size:25px}.best-card{padding-left:10px}.guide .step{display:none}.hud{inset:16px}.menu h2{font-size:24px}}@media(max-height:550px) and (orientation:landscape){.stage{height:75vh;min-height:320px}.intro{padding:15px 0}.page-header{height:50px}.menu{padding:18px}.menu h2{font-size:22px;margin:9px 0}.menu p{margin-bottom:12px}.menu-foot{margin-top:10px}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}.primary:hover{transform:none}}
/* Keep game hints behind menus and fit results on short landscape screens. */
.back-to-site { display: inline-flex; align-items: center; min-height: 44px; padding: 8px 12px; border: 1px solid #ded5e9; border-radius: 14px; color: #6c4d86; background: #fff9; font-size: 12px; text-decoration: none; white-space: nowrap; }
.back-to-site:hover { background: #fff; border-color: #9774b6; }
@media (max-width: 390px) { .room-name, .divider { display: none; } .back-to-site { padding-inline: 9px; font-size: 11px; } }
/* Keep native long-press selection, callouts and dragging out of the play area. */
.stage, .stage * {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-user-drag: none;
}

.stage:has(.overlay:not([hidden])) .control-hint,
.stage:has(.overlay:not([hidden])) .toast { display: none; }
.menu { max-height: calc(100% - 24px); overflow-y: auto; }
@media (max-height:550px) and (orientation:landscape) {
  .menu { padding: 14px 18px; }
  .menu h2 { font-size: 21px; margin: 8px 0; }
  .menu p { font-size: 11px; line-height: 1.7; margin-bottom: 10px; }
  .result { margin-bottom: 12px; }
  .result strong { font-size: 29px; }
  .result span { margin-bottom: 5px; }
  .primary { padding: 12px 20px; }
  .menu-foot { font-size: 9px; margin-top: 10px; }
}