.sd-game{--ink:#493347;--cream:#fff8df;--gold:#f2b92f;position:relative;width:min(1500px,100%);margin:auto;overflow:hidden;border:3px solid #f4ce68;border-radius:24px;background:linear-gradient(145deg,#fff8d8,#f3dc9f);box-shadow:0 18px 45px #35234740;color:var(--ink);font-family:"Noto Sans KR",system-ui,sans-serif;user-select:none;touch-action:none}
.sd-toolbar{min-height:68px;display:flex;align-items:center;gap:14px;padding:9px 14px;background:linear-gradient(90deg,#713f82,#b85589);color:#fff;border-bottom:3px solid #f8d86e}
.sd-brand{display:flex;align-items:center;gap:8px;min-width:230px;font-size:clamp(16px,1.35vw,22px)}.sd-brand>span{font-size:28px}.sd-stats{display:flex;gap:7px;flex:1;justify-content:center}.sd-stats span{display:grid;grid-template-columns:auto auto;gap:6px;align-items:center;padding:6px 11px;border-radius:14px;background:#321f4b80;border:1px solid #ffffff52}.sd-stats small{font-size:11px}.sd-stats b{font-size:17px}.sd-stats i{font-style:normal;color:#ffe565}
.sd-time b{min-width:42px;text-align:center;font-variant-numeric:tabular-nums}.sd-stats .sd-time.is-low{background:#8d274ddd;border-color:#ffd36e}.sd-time.is-low b{color:#fff06b;animation:sd-time-pulse .75s infinite}
.sd-actions{display:flex;gap:6px;align-items:center}.sd-actions button,.sd-zoom button{min-height:42px;border:2px solid #f8dc85;border-radius:13px;background:#fff8dd;color:#52365e;font-weight:900;cursor:pointer;box-shadow:0 3px 0 #b47a31}.sd-actions button{min-width:43px;padding:5px 10px}.sd-actions button:active,.sd-zoom button:active{transform:translateY(2px);box-shadow:0 1px 0 #b47a31}.sd-actions .sd-hint{display:flex;gap:5px;align-items:center}.sd-hint em{font-style:normal;border-radius:20px;background:#ef5e72;color:white;padding:1px 6px}.gh-fullscreen-btn{display:flex;gap:6px;align-items:center}.gh-fullscreen-icon{font-size:20px}
.sd-board{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:13px;padding:13px;background:radial-gradient(circle at 50% 10%,#fffdf2,#ead397)}.sd-picture-wrap{position:relative;min-width:0}.sd-picture-label{position:absolute;z-index:8;top:8px;left:8px;display:flex;align-items:center;gap:6px;padding:5px 11px;border-radius:99px;background:#3f295ad9;color:#fff;font-size:12px;pointer-events:none;box-shadow:0 2px 7px #0004}.sd-picture-label b{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:#ffd75e;color:#57334b;font-size:15px}
.sd-viewport{position:relative;overflow:hidden;width:100%;aspect-ratio:16/9;border:4px solid #fff6ce;border-radius:18px;background:#b6e6ec;box-shadow:0 5px 14px #46294745;cursor:crosshair}.sd-scene{position:absolute;inset:0;transform-origin:0 0;will-change:transform}.sd-scene>img{display:block;width:100%;height:100%;object-fit:fill;pointer-events:none}.sd-divider{position:absolute;z-index:9;left:50%;top:50%;display:grid;place-items:center;width:39px;height:39px;border-radius:50%;transform:translate(-50%,-50%);background:#ffe26b;color:#8a426e;border:4px solid #fff;font-size:21px;box-shadow:0 4px 12px #4d315b60}
.sd-difference{position:absolute;z-index:2;pointer-events:none}.sd-diff-kite{left:66.1%;top:4.8%;width:5.3%;height:10.7%;transform:rotate(4deg)}.sd-diff-kite i{display:block;width:72%;height:72%;margin:auto;transform:rotate(45deg);background:linear-gradient(135deg,#ffd84e 50%,#ff8a45 51%);border:2px solid #b46336;border-radius:3px;box-shadow:0 1px 2px #6e3a34}.sd-diff-kite:after{content:"";position:absolute;width:2px;height:50%;left:48%;top:61%;background:#74486c;transform:rotate(-19deg)}
.sd-diff-bow{left:20.1%;top:44.7%;width:6.2%;height:7%}.sd-diff-bow i{position:absolute;top:10%;width:45%;height:64%;background:#9c65d9;border:2px solid #603886;border-radius:60% 25% 60% 30%}.sd-diff-bow i:first-child{left:1%;transform:rotate(25deg)}.sd-diff-bow i:nth-child(2){right:1%;transform:rotate(-25deg)}.sd-diff-bow b{position:absolute;left:39%;top:26%;width:22%;height:30%;border-radius:50%;background:#ffe76e;border:2px solid #7b4d84}
.sd-diff-star{left:57.7%;top:31.2%;color:#ffe45f;font-size:clamp(17px,2.2vw,36px);line-height:1;text-shadow:-2px 0 #93502e,0 2px #93502e,2px 0 #93502e,0 -2px #93502e}
.sd-diff-glasses{left:42.2%;top:51%;width:6.2%;height:3.8%}.sd-diff-glasses i{position:absolute;width:38%;aspect-ratio:1;border:3px solid #4c78c5;border-radius:50%;background:#b9edff70}.sd-diff-glasses i:last-child{right:0}.sd-diff-glasses:after{content:"";position:absolute;left:38%;top:32%;width:25%;height:3px;background:#4c78c5}
.sd-diff-cherry{left:41.7%;top:82.4%;font-size:clamp(15px,1.7vw,28px);line-height:1;color:#e8405c;text-shadow:1px 1px #8d273c}.sd-diff-cherry i{position:absolute;left:55%;bottom:75%;width:2px;height:55%;background:#4b8f51;transform:rotate(25deg)}
.sd-marker{position:absolute;z-index:6;width:9%;aspect-ratio:1;border:clamp(3px,.45vw,7px) solid #ffef5e;border-radius:50%;transform:translate(-50%,-50%);box-shadow:0 0 0 3px #e64b71,0 0 18px #fff58e;animation:sd-pop .42s cubic-bezier(.2,1.8,.5,1),sd-glow 1.6s infinite}.sd-marker:after{content:"✓";position:absolute;right:-12%;bottom:-18%;display:grid;place-items:center;width:36%;aspect-ratio:1;border-radius:50%;background:#42b978;color:#fff;border:2px solid #fff;font-size:clamp(12px,1.3vw,21px);font-weight:900}.sd-wrong{position:absolute;z-index:12;transform:translate(-50%,-50%);color:#f3445e;font-size:clamp(25px,4vw,60px);font-weight:1000;text-shadow:0 2px #fff;animation:sd-wrong .6s forwards;pointer-events:none}.sd-spark{position:absolute;z-index:15;width:9px;height:9px;border-radius:50%;background:var(--spark,#ffe45d);pointer-events:none;animation:sd-spark .8s ease-out forwards}.sd-hint-ring{position:absolute;z-index:5;width:15%;aspect-ratio:1;border:5px dashed #fff87b;border-radius:50%;transform:translate(-50%,-50%);box-shadow:0 0 0 5px #8b55c099,0 0 28px #fff;animation:sd-hint 1s infinite;pointer-events:none}
.sd-footer{min-height:54px;display:flex;justify-content:space-between;align-items:center;gap:15px;padding:7px 14px;background:#fff8de}.sd-footer p{display:flex;flex-direction:column;margin:0;font-size:13px}.sd-footer p b{font-size:15px}.sd-zoom{display:flex;align-items:center;gap:5px}.sd-zoom button{min-width:39px;padding:4px 9px;min-height:36px}.sd-zoom output{min-width:50px;text-align:center;font-weight:900}.sd-toast{position:absolute;z-index:30;left:50%;top:17%;transform:translate(-50%,-10px);padding:9px 18px;border-radius:99px;background:#51316de8;color:#fff;font-weight:900;opacity:0;pointer-events:none;transition:.2s}.sd-toast.is-on{opacity:1;transform:translate(-50%,0)}
.sd-modal{position:absolute;z-index:80;inset:0;display:grid;place-items:center;background:#2f2446b8;backdrop-filter:blur(5px)}.sd-modal[hidden]{display:none}.sd-modal>div{min-width:min(370px,85%);padding:25px;text-align:center;border:4px solid #ffe376;border-radius:25px;background:linear-gradient(#fffdf0,#ffe8ae);box-shadow:0 18px 45px #1e153080}.sd-modal-icon{font-size:48px}.sd-modal h2{margin:4px 0;color:#7d3f77}.sd-modal p{margin:8px}.sd-modal button{margin-top:12px;padding:11px 28px;border:0;border-radius:99px;background:#8d4e9e;color:#fff;font-size:18px;font-weight:900;box-shadow:0 4px 0 #533360;cursor:pointer}.sd-stars{color:#ffc928;font-size:42px;letter-spacing:4px;text-shadow:0 2px #ae6c25}.sd-stars .off{color:#cabda8}.sd-rotate{position:absolute;z-index:100;inset:0;display:grid;place-content:center;text-align:center;background:#4a3363f5;color:#fff}.sd-rotate[hidden]{display:none}.sd-rotate div{font-size:70px}.sd-rotate strong{font-size:20px}
.sd-picture-wrap.is-shaking{animation:sd-shake .3s}.sd-game.gh-simulated-fullscreen,.sd-game:fullscreen{position:fixed;z-index:9999;inset:0;width:100vw;max-width:none;height:100dvh;border-radius:0;display:grid;grid-template-rows:auto 1fr auto}.sd-game.gh-simulated-fullscreen .sd-board,.sd-game:fullscreen .sd-board{min-height:0}.sd-game.gh-simulated-fullscreen .sd-picture-wrap,.sd-game:fullscreen .sd-picture-wrap{display:grid;align-items:center}.sd-game.gh-simulated-fullscreen .sd-viewport,.sd-game:fullscreen .sd-viewport{max-height:calc(100dvh - 145px);margin:auto}
@keyframes sd-pop{from{transform:translate(-50%,-50%) scale(.2)}to{transform:translate(-50%,-50%) scale(1)}}@keyframes sd-glow{50%{filter:brightness(1.25);box-shadow:0 0 0 6px #e64b7180,0 0 28px #fff58e}}@keyframes sd-wrong{to{opacity:0;transform:translate(-50%,-50%) scale(1.6)}}@keyframes sd-spark{to{opacity:0;transform:translate(var(--dx),var(--dy)) scale(.2)}}@keyframes sd-hint{50%{transform:translate(-50%,-50%) scale(1.18);opacity:.55}}@keyframes sd-shake{25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}
@keyframes sd-time-pulse{50%{transform:scale(1.12)}}
@media(max-width:900px){.sd-toolbar{min-height:54px;padding:5px 7px}.sd-brand{min-width:0}.sd-brand strong{display:none}.sd-brand>span{font-size:22px}.sd-stats{justify-content:flex-start}.sd-stats span{padding:3px 6px;gap:3px}.sd-stats small{font-size:9px}.sd-stats b{font-size:13px}.sd-actions button{min-width:36px;min-height:36px;padding:3px 7px}.sd-actions .sd-hint b,.gh-fullscreen-label{display:none}.sd-board{padding:6px;gap:5px}.sd-viewport{border-width:2px;border-radius:10px}.sd-picture-label{top:4px;left:4px;padding:2px 7px}.sd-picture-label span{display:none}.sd-picture-label b{width:20px;height:20px;font-size:12px}.sd-divider{width:26px;height:26px;border-width:2px;font-size:13px}.sd-footer{min-height:40px;padding:4px 7px}.sd-footer p span{display:none}.sd-footer p b{font-size:11px}.sd-zoom button{min-height:31px;min-width:32px}.sd-zoom output{font-size:11px;min-width:42px}}
@media(max-height:600px) and (orientation:landscape){body:has(.sd-game){overflow:hidden}.sd-game{position:fixed;z-index:9999;inset:0;width:100vw;max-width:none;height:100dvh;display:grid;grid-template-rows:auto 1fr auto;border:0;border-radius:0}.sd-toolbar{min-height:44px}.sd-board{min-height:0}.sd-picture-wrap{display:grid;align-items:center}.sd-viewport{max-height:calc(100dvh - 98px);margin:auto}.sd-footer{min-height:38px}.sd-modal>div{padding:12px}.sd-modal-icon{font-size:30px}.sd-stars{font-size:30px}}
@media(max-width:720px) and (orientation:portrait){.sd-rotate{display:grid!important}}
@media(prefers-reduced-motion:reduce){.sd-marker,.sd-hint-ring,.sd-spark,.sd-picture-wrap.is-shaking,.sd-time.is-low b{animation:none}}