@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@500;600;700;800&family=Noto+Sans+KR:wght@400;500;600;700;800;900&display=swap');
:root{font-family:'DM Sans','Noto Sans KR',sans-serif;color:#202030;background:#fbfaff;font-synthesis:none}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;min-height:100vh;overflow-x:hidden}
button,textarea,select{font:inherit}
button{cursor:pointer}
button:disabled{cursor:not-allowed;opacity:.55}
[hidden]{display:none!important}
.ambient{position:fixed;z-index:-1;pointer-events:none;border-radius:50%;filter:blur(10px)}
.ambient-one{width:550px;height:550px;top:-330px;left:-300px;background:radial-gradient(circle,#eee9ff 0%,transparent 72%)}
.ambient-two{width:600px;height:600px;top:270px;right:-410px;background:radial-gradient(circle,#f2edff 0%,transparent 72%)}
.site-shell{max-width:1120px;margin:0 auto;padding:0 32px}
.site-header{height:100px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #f0eef6}
.brand{display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:#252439}
.brand-logo{height:38px;width:38px;border-radius:13px;background:#6959ed;color:#fff;display:inline-grid;place-items:center;font-size:26px;box-shadow:0 7px 18px #7567db40}
.brand-name{font-size:21px;font-weight:900;letter-spacing:-1.25px}
.brand-en{font-size:9px;letter-spacing:1.2px;font-weight:800;color:#9c97ab;margin-left:1px;margin-top:4px}
.header-note{display:flex;align-items:center;gap:9px;color:#9693a3;font-size:12px;font-weight:600}
.live-dot{height:7px;width:7px;background:#9ed6b1;border-radius:50%;box-shadow:0 0 0 4px #eaf7ef}
.hero{position:relative;text-align:center;padding:77px 20px 57px}
.eyebrow{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:800;letter-spacing:-.25px;color:#7768e5;background:#efecff;border:1px solid #e7e1ff;border-radius:100px;padding:10px 17px}
.sparkle{font-size:15px}
.hero h1{font-size:clamp(37px,5.1vw,57px);line-height:1.32;letter-spacing:-3px;font-weight:900;margin:19px 0 19px}
.hero h1 span{color:#6758ed}
.hero p{font-size:15px;line-height:2;color:#9390a1;letter-spacing:-.45px;margin:0}
.hero-chips{display:flex;align-items:center;justify-content:center;gap:9px;flex-wrap:wrap;margin-top:25px}
.hero-chips span{padding:9px 15px;font-size:12px;font-weight:700;color:#777483;background:#fff;border:1px solid #eeedf4;border-radius:30px;box-shadow:0 3px 7px #21195d05}
.hero-decoration{position:absolute;pointer-events:none;user-select:none}
.dice-decoration{left:18%;top:115px;color:#ffb866;font-size:54px;transform:rotate(-19deg);opacity:.8}
.star-decoration{right:17%;top:89px;color:#c9baff;font-size:45px;transform:rotate(18deg)}
.games-section{padding:0 2px}
.section-heading{display:flex;align-items:end;justify-content:space-between;margin-bottom:23px}
.section-kicker{font-size:11px;letter-spacing:1.3px;font-weight:900;color:#9e91eb}
.section-heading h2{font-size:27px;letter-spacing:-1.4px;margin:6px 0 0;font-weight:900}
.section-heading p{color:#9e9baa;font-size:12px;margin:0 0 4px}
.game-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.game-card{min-height:235px;position:relative;display:flex;flex-direction:column;align-items:flex-start;text-align:left;border:1px solid #eceaf2;border-radius:21px;padding:21px 23px 18px;background:#fff;box-shadow:0 7px 21px #29204408;transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease}
.game-card:hover{transform:translateY(-5px);box-shadow:0 17px 34px #35297818;border-color:#ddd6ff}
.game-card:focus-visible,.button:focus-visible,.back-button:focus-visible,.sound-toggle:focus-visible{outline:3px solid #aaa0ff;outline-offset:3px}
.game-art{height:108px;width:100%;border-radius:14px;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}
.game-art:after{content:'';position:absolute;width:150px;height:150px;border:1px solid #ffffff9c;border-radius:50%;top:-105px;right:-24px}
.game-art span{font-size:54px;filter:drop-shadow(0 7px 3px #28173c12);transition:transform .2s}
.game-card:hover .game-art span{transform:rotate(-7deg) scale(1.1)}
.art-ladder{background:#f0ecff}.art-roulette{background:#fff0ed}.art-plinko{background:#ffedf1}
.art-draw{background:#eaf4ff}.art-teams{background:#eaf8f0}.art-menu{background:#fff6e6}
.game-copy{margin-top:17px;display:flex;flex-direction:column;gap:5px}
.game-copy strong{font-size:18px;font-weight:900;letter-spacing:-.75px;color:#2a2937}
.game-copy small{font-size:12px;font-weight:500;color:#a5a2b0;letter-spacing:-.35px}
.game-arrow{position:absolute;bottom:18px;right:20px;background:#f7f6fb;color:#9591a9;font-size:16px;border-radius:50%;width:29px;height:29px;display:grid;place-items:center;transition:background .2s,color .2s}
.game-card:hover .game-arrow{background:#6959ed;color:#fff}
.tip-banner{margin:30px 2px 65px;padding:22px 25px;display:flex;align-items:center;gap:15px;border:1px solid #ede9ff;border-radius:17px;background:linear-gradient(115deg,#f4f0ff,#fbf9ff)}
.tip-icon{font-size:27px}
.tip-banner>div{display:flex;flex-direction:column;gap:4px}
.tip-banner strong{font-size:13px;font-weight:800;color:#6255ba}
.tip-banner div span{font-size:12px;color:#9892ae}
.tip-stars{margin-left:auto;color:#c3b6ff;font-size:24px;letter-spacing:10px}
.site-footer{border-top:1px solid #efedf4;min-height:97px;display:flex;justify-content:space-between;align-items:center;gap:22px;padding:20px 0;color:#aeabb7;font-size:10px}
.site-footer div{display:flex;align-items:center;gap:15px}.site-footer strong{font-size:15px;color:#7168a2}
.site-footer>span:last-child{white-space:nowrap}
.play-view{padding:30px 0 80px}
.back-button{background:none;border:0;color:#8a85a0;font-weight:700;font-size:13px;padding:8px 0}
.back-button:hover{color:#6758ed}
.play-heading{text-align:center;margin:28px auto 31px}
.play-heading h1{font-size:39px;letter-spacing:-2px;margin:9px 0 9px;font-weight:900}
.play-heading p{font-size:14px;color:#918c9e;line-height:1.8;margin:0}
.play-layout{display:grid;grid-template-columns:minmax(255px,315px) minmax(0,1fr);gap:21px;align-items:start}
.setup-card,.stage-card{border:1px solid #ebe9f3;background:#fff;border-radius:22px;box-shadow:0 8px 20px #22185608}
.setup-card{padding:24px}
.setup-title-row,.stage-top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.setup-title-row h2,.stage-top h2{font-size:17px;letter-spacing:-.5px;margin:0;font-weight:900}
.setup-badge{font-size:10px;background:#f2efff;color:#8674ef;padding:6px 9px;border-radius:7px;font-weight:800}
.field{display:flex;flex-direction:column;gap:10px;margin-top:24px}
.field>span{font-size:13px;color:#373344;font-weight:800}
.field small{font-size:11px;font-weight:500;color:#aaa7b5;margin-left:5px}
textarea,select{width:100%;background:#faf9fd;border:1px solid #ebe9f1;color:#373442;border-radius:11px;outline:none}
textarea{resize:vertical;padding:13px;line-height:1.8;font-size:13px;min-height:108px}
textarea:focus,select:focus{border-color:#8574f2;box-shadow:0 0 0 3px #eae5ff}
select{padding:12px;font-size:13px}
.input-note{font-size:11px;color:#9e99b0;line-height:1.7;margin:16px 0 0}
.input-note.error{color:#dc6377}
.setup-actions{display:flex;flex-direction:column;gap:9px;margin-top:19px}
.button{padding:12px 15px;min-height:44px;border-radius:11px;font-size:13px;font-weight:800;border:1px solid transparent;transition:background .2s,transform .2s}
.button:hover:not(:disabled){transform:translateY(-1px)}
.button-primary{background:#6d5cf0;color:#fff;box-shadow:0 5px 12px #7565ef29}
.button-primary:hover{background:#5f4de2}
.button-secondary{background:#f8f7fc;color:#756f86;border-color:#eeeaf4}
.button-secondary:hover{background:#f0edfa}
#start-game{display:flex;justify-content:center;align-items:center;gap:9px}
.stage-card{padding:22px;min-height:550px;display:flex;flex-direction:column}
.stage-top{min-height:31px}
.sound-toggle{font-size:11px;background:#f8f7fc;color:#938d9f;border:1px solid #efedf4;border-radius:8px;padding:8px}
.stage-placeholder{flex:1;min-height:420px;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:13px}
.stage-emoji{width:120px;height:120px;display:grid;place-items:center;border-radius:40px;background:#f4f1ff;font-size:61px;margin-bottom:14px;transform:rotate(-9deg)}
.stage-placeholder strong{font-size:18px;font-weight:900}
.stage-placeholder>span:last-child{font-size:12px;color:#aaa5b4}
#game-canvas{width:100%;height:auto;display:block;margin:auto;max-height:455px}
.interactive-stage{flex:1;display:flex;flex-wrap:wrap;align-content:center;align-items:center;justify-content:center;gap:13px;min-height:350px;padding:24px 5px}
.result-message{font-weight:900;text-align:center;font-size:20px;letter-spacing:-.7px;min-height:28px;line-height:1.55}
.result-message .sub-message{font-size:12px;font-weight:500;color:#928da2;display:block;letter-spacing:0}
.result-actions{display:flex;justify-content:center;flex-wrap:wrap;gap:9px;margin-top:19px}
.result-actions .button{padding:10px 15px}
.choice-card{border:1px solid #ded7ff;background:linear-gradient(145deg,#f3efff,#fff);border-radius:16px;color:#7664da;box-shadow:0 5px 15px #38239010;min-width:86px;min-height:112px;font-size:26px;font-weight:900;transition:transform .2s}
.choice-card small{display:block;font-size:12px;margin-top:9px;color:#9488ce}
.choice-card:hover:not(:disabled){transform:translateY(-7px)}
.choice-card.revealed{background:#6d5cf0;color:#fff;border-color:#6d5cf0}
.choice-card.revealed small{color:#fff}
.team-result{width:100%;display:grid;grid-template-columns:repeat(auto-fit,minmax(135px,1fr));gap:12px;align-self:start}
.team-box{background:#f9f7ff;border:1px solid #eae5ff;padding:17px;border-radius:14px}
.team-box strong{display:block;color:#6d5cf0;font-size:15px;margin-bottom:11px}
.team-box span{display:block;font-size:13px;margin:7px 0;color:#514d61}
.ladder-picker{width:100%;display:flex;flex-wrap:wrap;justify-content:center;gap:7px}
.ladder-picker button{font-size:12px;font-weight:800;color:#6556cf;border:1px solid #e4defe;background:#f6f4ff;padding:8px 11px;border-radius:9px}
.ladder-picker button:hover{background:#ebe7ff}
.winning-pill{padding:15px 26px;background:#f3efff;color:#6655ea;font-size:24px;font-weight:900;border-radius:16px}
.plinko-panel{font-size:13px;line-height:1.6;color:#9e99ae;text-align:center;width:100%}
.spin-hint{font-size:12px;color:#938b9e;text-align:center}
@media(max-width:900px){.hero-decoration{display:none}.site-footer{flex-wrap:wrap}.play-layout{grid-template-columns:1fr}.stage-card{min-height:490px}.setup-card{max-width:none}.setup-actions{flex-direction:row}.setup-actions .button-primary{flex:1}.setup-actions .button-secondary{min-width:106px}}
@media(max-width:680px){.site-shell{padding:0 17px}.site-header{height:76px}.brand-name{font-size:19px}.brand-en,.header-note{display:none}.hero{padding:61px 2px 45px}.hero h1{font-size:39px;letter-spacing:-2.5px}.hero p{font-size:13px}.desktop-only{display:none}.hero-chips span{font-size:10px;padding:8px 10px}.section-heading{align-items:start}.section-heading h2{font-size:23px}.section-heading p{display:none}.game-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:11px}.game-card{min-height:199px;padding:12px 12px 18px;border-radius:16px}.game-art{height:92px;border-radius:12px}.game-art span{font-size:43px}.game-copy{margin-top:12px;gap:4px}.game-copy strong{font-size:15px}.game-copy small{font-size:10px;letter-spacing:-.6px;line-height:1.5}.game-arrow{bottom:14px;right:10px;width:21px;height:21px;font-size:13px}.tip-banner{margin-top:23px;margin-bottom:48px;padding:16px;gap:9px}.tip-banner div span{line-height:1.6;font-size:10px}.tip-stars{display:none}.site-footer{gap:10px;align-items:start;flex-direction:column;font-size:10px;padding:20px 0}.site-footer div{gap:11px}.play-heading h1{font-size:30px}.play-view{padding-top:15px}.setup-card,.stage-card{padding:18px;border-radius:17px}.stage-placeholder{min-height:320px}.stage-card{min-height:430px}.interactive-stage{min-height:275px}.result-message{font-size:17px}.choice-card{min-width:65px;min-height:94px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;transition:none!important;animation:none!important}}

/* Game-board-first editors for the ladder and roulette */
.play-view.inline-mode .play-layout{display:block;max-width:980px;margin:0 auto}
.play-view.inline-mode .setup-card{display:none}
.play-view.inline-mode .stage-card{padding:26px 30px 32px;min-height:590px}
.play-view.inline-mode .stage-top h2{font-size:20px}
.inline-controls{padding:21px 0 16px;border-bottom:1px solid #f0eef7}
.inline-count-area{display:flex;align-items:center;justify-content:center;gap:16px;flex-wrap:wrap}
.inline-count-label{color:#494258;font-size:13px;font-weight:900}
.count-stepper{display:flex;align-items:center;justify-content:center;gap:0;background:#f7f5ff;border-radius:12px;padding:4px;border:1px solid #e8e3fc}
.count-stepper button{border:none;background:white;border-radius:9px;width:37px;height:35px;color:#6959dc;font-size:24px;line-height:1;font-weight:500}
.count-stepper button:hover:not(:disabled){background:#e7e1ff}
.count-stepper output{min-width:47px;text-align:center;color:#392f68;font-weight:900;font-size:17px}
.inline-count-help{color:#aaa2bc;font-size:11px}
.inline-hint{margin:16px 0 13px;text-align:center;color:#817a99;font-size:12px;line-height:1.8}
.inline-hint.error{color:#dc526d;font-weight:800}
.inline-control-buttons{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:9px}
.inline-control-buttons .button{min-width:123px;padding:11px 18px}
.inline-board{padding-top:27px;min-width:0}
.ladder-scroll{width:100%;overflow-x:auto;overscroll-behavior-x:contain;padding:6px 0 11px;scrollbar-width:thin;scrollbar-color:#ddd6fa transparent}
.ladder-sheet{width:100%;max-width:100%;margin:auto}
.ladder-name-row,.ladder-result-row{display:grid;align-items:center;gap:0}
.ladder-name-row{margin-bottom:4px}
.ladder-result-row{margin-top:5px}
.ladder-name-input,.ladder-result-input,.ladder-person,.ladder-outcome{width:calc(100% - 10px);margin:auto;text-align:center;min-width:0;border-radius:10px;padding:10px 4px;height:43px;font-size:12px;font-weight:800;outline:none;letter-spacing:-.5px}
.ladder-name-input,.ladder-result-input{background:#f7f4ff;border:1px solid #e1dafa;color:#5849ba}
.ladder-name-input:focus,.ladder-result-input:focus{background:#fff;border-color:#8371f0;box-shadow:0 0 0 3px #dfd9ff80}
.ladder-name-input::placeholder,.ladder-result-input::placeholder{color:#b5abc8}
.ladder-result-input{background:#fff8f1;border-color:#fae4cc;color:#b9804f}
.ladder-person{border:1px solid #dcd6fc;background:#eeeaff;color:#6453d6}
.ladder-person.done{background:#6655e4;color:white;border-color:#6655e4}
.ladder-person:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 5px 10px #5b4bd025}
.ladder-outcome{display:flex;justify-content:center;align-items:center;background:#f5f3fa;color:#aaa3b9;border:1px solid #ebe7f5;overflow:hidden}
.ladder-outcome.revealed{color:#805e28;background:#fff1d5;border-color:#ffdb9b}
.ladder-canvas{display:block;width:100%;height:320px}
.board-instruction{font-size:12px;text-align:center;color:#a29aad;line-height:1.7;margin:15px 0 10px}
.all-result-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:8px;margin:21px 0 3px}
.result-pair{padding:10px 12px;background:#f7f4ff;border:1px solid #ece6ff;border-radius:10px;text-align:center;font-size:12px;color:#6757bb;font-weight:800}
.wheel-wrap{width:min(100%,520px);aspect-ratio:1;position:relative;margin:0 auto;user-select:none}
.wheel-canvas{display:block;width:100%;height:100%}
.wheel-inputs{position:absolute;inset:0;pointer-events:none}
.wheel-sector-input{position:absolute;transform:translate(-50%,-50%);min-width:0;max-width:112px;height:33px;border:1px solid #ffffffa3;border-radius:9px;background:#ffffffdc;box-shadow:0 2px 7px #2a265b1c;color:#3d3658;text-align:center;outline:none;padding:4px 2px;font-weight:900;letter-spacing:-.4px;pointer-events:auto}
.wheel-sector-input:focus{border:2px solid #5546cb;background:white;box-shadow:0 0 0 3px #ffffff8c;z-index:2}
.wheel-sector-input::placeholder{color:#aaa4bd}
.wheel-name-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;max-width:520px;margin:18px auto 0}
.wheel-name-row{display:flex;align-items:center;gap:10px;min-width:0}
.wheel-name-number{display:grid;place-items:center;flex:0 0 30px;height:30px;border-radius:9px;color:#fff;font-size:13px;font-weight:800}
.wheel-name-row input{width:100%;min-width:0;min-height:44px;padding:10px 12px;border:1px solid #e1dafa;border-radius:10px;background:#f7f4ff;color:#5849ba;font-size:16px;outline:none}
.wheel-name-row input:focus{border-color:#8371f0;box-shadow:0 0 0 3px #dfd9ff80;background:#fff}
.play-view.inline-mode #result-message{margin-top:10px}
.play-view.inline-mode #result-message:empty{min-height:0}
.play-view.inline-mode #result-actions{display:none!important}
@media(max-width:680px){
  .play-view.inline-mode .stage-card{padding:17px 12px 26px;min-height:510px}
  .play-view.inline-mode .stage-top h2{font-size:15px}
  .inline-controls{padding:18px 0 14px}
  .inline-count-area{gap:9px}
  .inline-count-help{width:100%;text-align:center}
  .inline-hint{font-size:11px}
  .inline-control-buttons{gap:7px}
  .inline-control-buttons .button{min-width:0;padding:10px 11px;font-size:11px}
  .inline-board{padding-top:18px}
  .ladder-canvas{height:250px}
  .ladder-name-input,.ladder-result-input,.ladder-person,.ladder-outcome{height:39px;font-size:11px;width:calc(100% - 6px)}
  .wheel-sector-input{height:27px;border-radius:6px}
  .wheel-inputs{display:none}
  .wheel-name-list{grid-template-columns:1fr;gap:9px}
  .board-instruction{font-size:10px}
}