:root {
  --red:#ff315b;
  --orange:#ff8a2b;
  --yellow:#ffe052;
  --cyan:#42efff;
  --blue:#356eff;
  --violet:#a74cff;
  --ink:#08060d;
  --panel:#19111d;
  --cream:#fff9e7;
  font-family: Inter, Pretendard, "Noto Sans KR", system-ui, sans-serif;
  color:var(--cream);
}

*{box-sizing:border-box}html{min-width:320px;background:#08040a}body{min-height:100vh;margin:0;overflow-x:hidden;background:radial-gradient(circle at 50% -10%,#4a1527,transparent 38%),linear-gradient(150deg,#120713,#050408 70%);color:var(--cream)}button,a{color:inherit;font:inherit}button{cursor:pointer}.basketball-app{width:min(100% - 24px,1180px);margin:0 auto;padding:16px 0 25px}
.basketball-header{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:11px}.basketball-brand{display:flex;align-items:center;gap:13px}.brand-ball{position:relative;display:block;width:51px;height:51px;overflow:hidden;border:3px solid #47130c;border-radius:50%;background:radial-gradient(circle at 34% 26%,#ffc151,#f16b17 58%,#9a290d);box-shadow:0 0 24px rgba(255,123,35,.45)}.brand-ball::before,.brand-ball::after,.brand-ball i{position:absolute;content:"";border:2px solid #54180e;border-radius:50%}.brand-ball::before{inset:-13px 18px;transform:rotate(13deg)}.brand-ball::after{inset:18px -13px;transform:rotate(-13deg)}.brand-ball i{top:-7px;left:-8px;width:65px;height:62px;transform:rotate(45deg)}.basketball-brand small{color:var(--cyan);font-size:8px;font-weight:1000;letter-spacing:.2em}.basketball-brand h1{margin:3px 0 0;font-size:31px;line-height:1;letter-spacing:-.04em}.basketball-brand h1 b{color:var(--orange)}.basketball-header nav{display:flex;gap:7px;flex-wrap:wrap;justify-content:flex-end}.basketball-header nav a{padding:8px 11px;border:1px solid rgba(255,255,255,.14);border-radius:999px;color:rgba(255,255,255,.66);background:rgba(255,255,255,.035);font-size:8px;font-weight:900;letter-spacing:.1em;text-decoration:none}.basketball-header nav a:hover{border-color:var(--orange);color:white}
.arcade-machine{position:relative;overflow:hidden;border:3px solid #3b222b;border-radius:25px;background:#120b12;box-shadow:0 30px 90px rgba(0,0,0,.55),0 0 50px rgba(255,65,90,.1),inset 0 0 0 2px rgba(255,255,255,.04)}
.machine-top{position:relative;z-index:40;display:grid;grid-template-columns:190px 1fr 190px;min-height:105px;align-items:center;gap:15px;padding:13px 25px;border-bottom:4px solid #5d2832;background:linear-gradient(#411520,#1c0a12);box-shadow:inset 0 4px #7c3643,inset 0 -6px #0c0609}.marquee-lights{position:absolute;inset:4px 7px auto;height:6px;background:radial-gradient(circle,var(--yellow) 0 2px,transparent 3px);background-size:25px 6px;filter:drop-shadow(0 0 4px var(--orange))}.led-panel{padding:9px 13px;border:3px solid #090409;border-radius:9px;background:linear-gradient(#100a0d,#030203);box-shadow:inset 0 0 18px rgba(255,26,69,.12),0 0 0 2px #67313c;text-align:center}.led-panel span{display:block;color:rgba(255,255,255,.38);font-size:7px;font-weight:1000;letter-spacing:.2em}.led-panel strong{display:block;margin-top:2px;color:#ff3858;font-family:"Courier New",monospace;font-size:38px;line-height:1;text-shadow:0 0 10px #ff133d,2px 0 #72182c}.machine-title{text-align:center}.machine-title small,.machine-title b{display:block;font-size:7px;letter-spacing:.18em}.machine-title small{color:var(--yellow)}.machine-title strong{display:block;margin:2px 0;color:white;font-size:28px;font-style:italic;letter-spacing:-.03em;text-shadow:3px 3px #c82643,0 0 16px rgba(255,80,85,.6)}.machine-title b{color:var(--cyan)}
.round-hud{position:relative;z-index:35;display:grid;grid-template-columns:130px 1fr 130px;align-items:center;min-height:60px;padding:7px 22px;border-bottom:2px solid #32222a;background:linear-gradient(#171017,#0d090d)}.round-hud>div:not(.word-monitor){text-align:center}.round-hud span,.word-monitor small{display:block;color:rgba(255,255,255,.35);font-size:7px;font-weight:900;letter-spacing:.15em}.round-hud>div>strong{color:var(--yellow);font-family:"Courier New",monospace;font-size:23px}.round-hud>div>strong i{font-style:normal}.word-monitor{padding:7px 18px;border-right:1px solid rgba(255,255,255,.08);border-left:1px solid rgba(255,255,255,.08);text-align:center}.word-monitor>strong{display:flex;align-items:center;justify-content:center;gap:18px}.word-monitor>strong i{min-width:110px;color:var(--cyan);font-family:inherit!important;font-size:18px}.word-monitor>strong i:last-child{color:var(--pink,#ff5ca8)}.word-monitor>strong b{color:rgba(255,255,255,.28);font-size:14px}
.court{position:relative;min-height:610px;overflow:hidden;isolation:isolate;background:radial-gradient(circle at 50% 16%,rgba(255,95,87,.18),transparent 30%),linear-gradient(#1a1425 0 66%,#301723 66%)}.arcade-wall{position:absolute;z-index:-6;inset:0 0 34%;overflow:hidden;background:linear-gradient(rgba(13,12,24,.6),rgba(26,13,23,.85)),repeating-linear-gradient(90deg,transparent 0 68px,rgba(255,255,255,.025) 69px 71px),linear-gradient(135deg,#301a40,#1e101d)}.arcade-wall::before{position:absolute;inset:0;content:"";opacity:.22;background:repeating-linear-gradient(145deg,transparent 0 20px,rgba(255,255,255,.045) 21px 23px)}.arcade-wall>strong{position:absolute;top:175px;left:50%;transform:translateX(-50%);color:rgba(255,255,255,.035);font-size:93px;font-style:italic;line-height:.74;text-align:center}.wall-light{position:absolute;top:40px;width:150px;height:270px;border-radius:50%;filter:blur(22px)}.wall-light.left{left:3%;background:rgba(56,174,255,.13)}.wall-light.right{right:3%;background:rgba(255,45,108,.15)}
.cage{position:absolute;z-index:30;inset:0;pointer-events:none;opacity:.22;background-image:linear-gradient(45deg,transparent 46%,#bab1a9 47% 50%,transparent 51%),linear-gradient(-45deg,transparent 46%,#bab1a9 47% 50%,transparent 51%);background-size:45px 45px;mask-image:linear-gradient(to bottom,black,transparent 82%)}.backboard{position:absolute;z-index:4;top:49px;left:50%;width:260px;height:146px;transform:translateX(-50%);border:8px solid #d9d6d7;border-radius:7px;background:linear-gradient(135deg,rgba(255,255,255,.17),rgba(130,207,255,.08));box-shadow:0 0 0 5px #493841,0 12px 25px rgba(0,0,0,.35),inset 0 0 25px rgba(84,211,255,.12)}.board-square{position:absolute;bottom:13px;left:50%;width:92px;height:61px;transform:translateX(-50%);border:5px solid var(--red);border-bottom:0}.hoop{position:absolute;z-index:12;top:170px;left:50%;width:150px;height:112px;transform:translateX(-50%);pointer-events:none}.rim{position:absolute;z-index:5;top:0;left:0;width:150px;height:25px;border:8px solid #ff572e;border-radius:50%;background:transparent;box-shadow:0 4px 0 #8f1d16,0 0 16px rgba(255,80,35,.55)}.net{position:absolute;top:18px;left:19px;width:112px;height:89px;clip-path:polygon(0 0,100% 0,78% 100%,22% 100%);background:repeating-linear-gradient(72deg,transparent 0 14px,rgba(255,255,255,.72) 15px 17px),repeating-linear-gradient(-72deg,transparent 0 14px,rgba(255,255,255,.6) 15px 17px);filter:drop-shadow(0 3px 2px rgba(0,0,0,.45));transform-origin:50% 0}.hoop.scored .net{animation:net-swish 550ms ease}.hoop.rim-hit{animation:rim-shake 300ms ease}@keyframes net-swish{30%{transform:scaleX(.7) translateY(11px)}65%{transform:scaleX(1.17) translateY(3px)}}@keyframes rim-shake{25%{transform:translateX(-52%) rotate(-2deg)}65%{transform:translateX(-48%) rotate(2deg)}}
.court-floor{position:absolute;z-index:-5;right:-9%;bottom:-35%;left:-9%;height:72%;transform:perspective(500px) rotateX(58deg);transform-origin:50% 100%;background:repeating-linear-gradient(90deg,transparent 0 89px,rgba(255,188,125,.11) 90px 92px),repeating-linear-gradient(0deg,transparent 0 55px,rgba(255,188,125,.1) 56px 58px),linear-gradient(#462030,#1a0e16);box-shadow:inset 0 12px 50px rgba(0,0,0,.5)}.side-rail{position:absolute;z-index:28;bottom:-5%;width:18px;height:76%;border-radius:10px;background:linear-gradient(90deg,#2a2527,#9a7d71,#292124);box-shadow:0 0 0 4px #171012,0 0 15px rgba(0,0,0,.6)}.rail-left{left:4%;transform:rotate(-12deg)}.rail-right{right:4%;transform:rotate(12deg)}.ball-return{position:absolute;z-index:9;right:14%;bottom:21px;left:14%;height:79px;border:5px solid #5f2a32;border-radius:50% 50% 11px 11px;background:linear-gradient(#230f17,#0b080a);box-shadow:inset 0 10px 22px rgba(0,0,0,.75)}.ball-return>i{position:absolute;top:11px;width:55px;height:55px;border:3px solid #48150d;border-radius:50%;background:radial-gradient(circle at 35% 28%,#ffbd54,#e65b16 58%,#8c260f)}.ball-return>i:nth-child(1){left:8%}.ball-return>i:nth-child(2){left:18%}.ball-return>i:nth-child(3){right:9%}.ball-return>span{position:absolute;bottom:6px;left:50%;transform:translateX(-50%);color:rgba(255,255,255,.25);font-size:7px;font-weight:900;letter-spacing:.18em}
.game-ball{position:absolute;z-index:20;width:88px;height:88px;padding:0;overflow:hidden;transform:translate(-50%,-50%) rotate(var(--rotation,0deg));border:4px solid #571b0d;border-radius:50%;background:radial-gradient(circle at 34% 26%,#ffc85b,#f4771e 55%,#a62c0c);box-shadow:0 12px 20px rgba(0,0,0,.45),inset -9px -9px 13px rgba(87,19,4,.28),inset 7px 5px 10px rgba(255,229,146,.28);touch-action:none;cursor:grab;will-change:left,top,transform}.game-ball:active{cursor:grabbing}.game-ball::before,.game-ball::after,.game-ball .ball-line{position:absolute;content:"";border:3px solid #632012;border-radius:50%;pointer-events:none}.game-ball::before{inset:-25px 29px;transform:rotate(12deg)}.game-ball::after{inset:29px -25px;transform:rotate(-12deg)}.game-ball .line-one{inset:-9px;transform:rotate(46deg)}.game-ball .line-two{top:36px;right:-8px;left:-8px;height:19px;border-right:0;border-left:0}.game-ball .line-three{display:none}.game-ball b{position:absolute;z-index:5;top:50%;left:50%;min-width:58px;padding:4px 5px;transform:translate(-50%,-50%);border-radius:7px;color:#241009;background:rgba(255,248,221,.86);box-shadow:0 2px 8px rgba(0,0,0,.25);font-size:11px;font-weight:1000;line-height:1}.game-ball.ready{animation:ball-ready 1.2s ease-in-out infinite alternate}.game-ball.in-flight{pointer-events:none;animation:none}.game-ball.hidden{opacity:0;pointer-events:none}@keyframes ball-ready{to{filter:brightness(1.13);box-shadow:0 17px 23px rgba(0,0,0,.48),0 0 20px rgba(255,154,47,.45)}}
.game-ball.scored-ball{pointer-events:none;animation:ball-through-net 650ms ease forwards}.game-ball.missed-ball{pointer-events:none;animation:ball-roll-away 600ms ease forwards}@keyframes ball-through-net{35%{transform:translate(-50%,5px) rotate(160deg) scale(.78);opacity:1}100%{transform:translate(-50%,105px) rotate(390deg) scale(.55);opacity:0}}@keyframes ball-roll-away{45%{transform:translate(-50%,20px) rotate(150deg) scale(.92)}100%{transform:translate(120px,115px) rotate(470deg) scale(.72);opacity:0}}
.trajectory{position:absolute;z-index:15;inset:0;pointer-events:none}.trajectory i{position:absolute;width:7px;height:7px;transform:translate(-50%,-50%);border-radius:50%;background:rgba(255,238,130,.72);box-shadow:0 0 8px var(--yellow)}.shot-callout{position:absolute;z-index:25;top:18px;left:22px;min-width:205px;padding:9px 15px;border:1px solid rgba(255,255,255,.12);border-radius:10px;background:rgba(8,5,11,.72);backdrop-filter:blur(5px);pointer-events:none}.shot-callout small{display:block;color:var(--cyan);font-size:7px;font-weight:900;letter-spacing:.18em}.shot-callout strong{display:block;margin-top:3px;font-size:14px}.shot-callout.pop{animation:callout-pop 380ms ease}@keyframes callout-pop{45%{transform:scale(1.09);filter:brightness(1.5)}}.pair-flash{position:absolute;z-index:24;top:295px;left:50%;min-width:280px;padding:13px 22px;opacity:0;transform:translateX(-50%) scale(.6);border:2px solid var(--cyan);border-radius:15px;background:rgba(13,8,18,.86);box-shadow:0 0 30px rgba(64,230,255,.32);text-align:center;pointer-events:none}.pair-flash small{display:block;color:var(--yellow);font-size:8px;font-weight:1000;letter-spacing:.2em}.pair-flash strong{display:flex;align-items:center;justify-content:center;gap:13px;margin-top:4px}.pair-flash strong i{color:var(--cyan);font-size:20px;font-style:normal}.pair-flash strong i:last-child{color:#ff67ab}.pair-flash strong b{color:rgba(255,255,255,.35)}.pair-flash.show{animation:pair-show 800ms ease}@keyframes pair-show{0%{opacity:0;transform:translateX(-50%) scale(.5)}30%,75%{opacity:1;transform:translateX(-50%) scale(1)}100%{opacity:0;transform:translate(-50%,-20px) scale(.92)}}.score-burst{position:absolute;z-index:26;top:275px;left:61%;opacity:0;color:var(--yellow);font-size:29px;font-weight:1000;font-style:italic;text-shadow:0 0 16px var(--orange);pointer-events:none}.score-burst.show{animation:score-burst 650ms ease}@keyframes score-burst{0%{opacity:0;transform:scale(.3)}35%{opacity:1;transform:scale(1.25)}100%{opacity:0;transform:translateY(-45px) scale(.9)}}.last-ten{position:absolute;z-index:32;inset:0;display:grid;place-items:center;color:rgba(255,48,83,.24);font-family:"Courier New",monospace;font-size:280px;font-weight:900;pointer-events:none;text-shadow:0 0 45px rgba(255,22,61,.35)}.last-ten[hidden]{display:none}.basketball-app.danger .machine-top{animation:danger-light 650ms ease infinite alternate}.basketball-app.danger .marquee-lights{filter:drop-shadow(0 0 6px red);background-image:radial-gradient(circle,#ff2f50 0 2px,transparent 3px)}@keyframes danger-light{to{filter:brightness(1.35);box-shadow:inset 0 0 35px rgba(255,25,55,.28)}}
.basket-start,.basket-result{position:absolute;z-index:70;inset:0;display:grid;place-items:center;padding:20px;background:rgba(8,5,10,.82);backdrop-filter:blur(7px)}.basket-start[hidden],.basket-result[hidden]{display:none}.basket-start-panel,.basket-result>div{width:min(100%,670px);padding:29px;border:2px solid rgba(255,124,55,.35);border-radius:22px;background:linear-gradient(145deg,rgba(62,21,34,.97),rgba(18,9,17,.98));box-shadow:0 25px 70px rgba(0,0,0,.62),inset 0 1px rgba(255,255,255,.08);text-align:center}.basket-start-panel>p:first-child,.basket-result p{margin:0;color:var(--cyan);font-size:8px;font-weight:1000;letter-spacing:.2em}.basket-start-panel h2,.basket-result h2{margin:8px 0 16px;font-size:29px}.rule-flow{display:flex;align-items:center;justify-content:center;gap:8px}.rule-flow span{min-width:130px;padding:12px 9px;border:1px solid rgba(255,255,255,.12);border-radius:12px;background:rgba(0,0,0,.2)}.rule-flow span b{display:grid;width:20px;height:20px;margin:0 auto 5px;place-items:center;border-radius:50%;color:#27100a;background:var(--yellow);font-size:8px}.rule-flow span i,.rule-flow span strong{display:block}.rule-flow span i{color:rgba(255,255,255,.45);font-size:8px;font-style:normal}.rule-flow span strong{margin-top:3px;color:white;font-size:13px}.rule-flow em{color:rgba(255,255,255,.28);font-style:normal}.start-guide{margin:15px 0;color:rgba(255,255,255,.57);font-size:10px;line-height:1.8}.start-guide kbd{padding:3px 6px;border:1px solid rgba(255,255,255,.2);border-radius:5px;background:rgba(255,255,255,.08)}.basket-start-panel>button{display:flex;min-width:195px;min-height:49px;align-items:center;justify-content:center;gap:10px;margin:0 auto 8px;border:0;border-radius:13px;color:#2c1007;background:linear-gradient(135deg,var(--yellow),var(--orange));box-shadow:0 10px 28px rgba(255,119,30,.25)}.basket-start-panel>button span{display:grid;width:27px;height:27px;place-items:center;border-radius:50%;color:white;background:#8f2a17}.basket-start-panel>small{color:rgba(255,255,255,.32);font-size:8px}.basket-result>div>strong{display:block;margin:5px 0 17px;color:#ff3e59;font-family:"Courier New",monospace;font-size:47px;text-shadow:0 0 15px red}.basket-result section{display:grid;grid-template-columns:repeat(4,1fr);gap:7px}.basket-result section span{padding:11px 5px;border:1px solid rgba(255,255,255,.1);border-radius:10px;color:rgba(255,255,255,.42);font-size:7px;font-weight:900}.basket-result section b{display:block;margin-top:4px;color:white;font-size:18px}.basket-result button{margin-top:17px;padding:12px 24px;border:0;border-radius:11px;color:#35110a;background:var(--yellow);font-weight:1000}
.control-deck{position:relative;z-index:42;display:grid;grid-template-columns:1fr 1fr 190px 48px 48px;align-items:center;gap:9px;padding:12px 15px;border-top:4px solid #51232d;background:linear-gradient(#2f1720,#130b10);box-shadow:inset 0 4px #6a303c}.aim-control,.power-control{min-height:67px;padding:9px 12px;border:1px solid rgba(255,255,255,.1);border-radius:11px;background:rgba(0,0,0,.2)}.aim-control{display:grid;grid-template-columns:44px 1fr 44px;align-items:center;gap:7px}.aim-control>span,.power-control>span{grid-column:1/-1;color:rgba(255,255,255,.4);font-size:7px;font-weight:900;letter-spacing:.15em}.aim-control button{height:30px;border:1px solid rgba(255,255,255,.12);border-radius:7px;background:rgba(255,255,255,.05)}.aim-track,.power-track{position:relative;height:9px;border-radius:10px;background:rgba(0,0,0,.55)}.aim-track::before{position:absolute;top:-3px;left:50%;width:2px;height:15px;content:"";background:rgba(255,255,255,.35)}.aim-track i{position:absolute;top:50%;left:50%;width:17px;height:17px;transform:translate(-50%,-50%);border:3px solid var(--cyan);border-radius:50%;box-shadow:0 0 9px var(--cyan);transition:left 130ms ease}.power-control{display:grid;align-content:center}.power-track{height:18px;margin-top:9px;overflow:visible;border:2px solid #080507}.power-track>i{display:block;width:72%;height:100%;border-radius:8px;background:linear-gradient(90deg,#48e8ac 0 58%,var(--yellow) 72%,var(--red) 100%);box-shadow:0 0 10px rgba(255,202,62,.32)}.power-track>b{position:absolute;top:-5px;left:70%;height:24px;padding-top:26px;color:rgba(255,255,255,.34);font-size:6px;transform:translateX(-50%)}.power-track>b::before{position:absolute;top:0;left:50%;width:2px;height:22px;content:"";background:white}.shoot-button{min-height:67px;border:3px solid #9a2c27;border-radius:16px;color:white;background:radial-gradient(circle at 50% 28%,#ff7254,#d51d32 68%,#7c101d);box-shadow:0 7px 0 #5a1118,0 0 20px rgba(255,45,67,.27),inset 0 4px 10px rgba(255,255,255,.22)}.shoot-button:active,.shoot-button.charging{transform:translateY(5px);box-shadow:0 2px 0 #5a1118,0 0 27px rgba(255,45,67,.48),inset 0 3px 10px rgba(255,255,255,.2)}.shoot-button small,.shoot-button b,.shoot-button kbd{display:block}.shoot-button small{font-size:6px;letter-spacing:.12em}.shoot-button b{font-size:16px}.shoot-button kbd{margin-top:2px;color:rgba(255,255,255,.55);font-size:7px}.arcade-button{height:51px;border:1px solid rgba(255,255,255,.13);border-radius:11px;background:rgba(255,255,255,.04);font-weight:900}.arcade-button:disabled,.shoot-button:disabled{opacity:.35;cursor:not-allowed}
.basket-footer{display:flex;justify-content:space-between;gap:15px;padding:9px 3px 0;color:rgba(255,255,255,.4);font-size:8px}.basket-footer p{margin:0}.basket-footer b{color:var(--yellow)}.basketball-app.paused .court::after{position:absolute;z-index:65;inset:0;display:grid;place-items:center;content:"PAUSED";color:var(--yellow);background:rgba(9,5,10,.7);font-size:53px;font-weight:1000;backdrop-filter:blur(4px)}
@media(max-width:760px){.basketball-app{width:min(100% - 8px,1180px);padding-top:7px}.basketball-header{padding:0 5px}.basketball-brand h1{font-size:23px}.basketball-brand small{font-size:6px}.brand-ball{width:40px;height:40px}.basketball-header nav a{padding:7px 6px;font-size:6px}.arcade-machine{border-radius:15px}.machine-top{grid-template-columns:86px 1fr 86px;min-height:88px;gap:6px;padding:11px 7px}.led-panel{padding:8px 3px}.led-panel strong{font-size:27px}.machine-title strong{font-size:18px}.machine-title small,.machine-title b{font-size:5px}.round-hud{grid-template-columns:60px 1fr 60px;padding:6px}.word-monitor{padding:5px}.word-monitor>strong{gap:5px}.word-monitor>strong i{min-width:62px;font-size:13px}.court{min-height:570px}.backboard{width:210px;height:125px}.hoop{top:156px;width:128px}.rim{width:128px}.net{left:17px;width:95px}.shot-callout{top:10px;left:10px;min-width:170px;padding:7px 10px}.shot-callout strong{font-size:11px}.pair-flash{top:275px;min-width:230px}.game-ball{width:78px;height:78px}.ball-return{right:7%;left:7%}.control-deck{grid-template-columns:1fr 1fr 46px 46px;padding:8px}.aim-control,.power-control{min-height:59px;padding:7px}.shoot-button{grid-column:1/3;grid-row:2;min-height:55px}.arcade-button{grid-row:2}.basket-start,.basket-result{padding:8px}.basket-start-panel,.basket-result>div{padding:21px 10px}.basket-start-panel h2{font-size:22px}.rule-flow{gap:3px}.rule-flow span{min-width:88px;padding:9px 3px}.rule-flow span strong{font-size:9px}.basket-result section{grid-template-columns:repeat(2,1fr)}.basket-footer{flex-direction:column;gap:3px;padding-left:5px}.last-ten{font-size:170px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}}