@import "https://fonts.googleapis.com/css2?family=Bebas+Neue&family=M+PLUS+Rounded+1c:wght@400;700;800;900&family=Noto+Serif+JP:wght@400;700&display=swap";:root{--yolk:#ffd600;--yolk-dark:#e8a000;--shell:#fff8e7;--ink:#1a1a2e;--red:#e8372a;--blue-corp:#1b3a6b;--cyan:#00c9c8;--white:#fff;--muted:#b0a890}*{box-sizing:border-box;margin:0;padding:0}html,body,#root{width:100%;min-height:100%;overflow-x:hidden}body{color:var(--ink);background:#061229;font-family:"M PLUS Rounded 1c",sans-serif}body:before{content:"";z-index:-2;background:url(/spin/bg.svg) 50%/cover no-repeat;position:fixed;inset:0}body:after{content:"";z-index:-1;pointer-events:none;background:#030a160a;position:fixed;inset:0}.page{z-index:1;min-height:100vh;position:relative;overflow-x:hidden;background:0 0!important}header{background:var(--ink);border-bottom:3px solid var(--yolk);height:64px;color:var(--white);z-index:5;justify-content:space-between;align-items:center;padding:0 2.4rem;display:flex;position:relative}.logo{letter-spacing:1.5px;color:var(--white);font-family:Bebas Neue,sans-serif;font-size:1.85rem;text-decoration:none}.logo b{color:var(--yolk)}.top-pill{background:var(--yolk);color:var(--ink);border:2px solid var(--ink);box-shadow:4px 4px 0 var(--red);letter-spacing:1.2px;text-transform:uppercase;padding:.55rem 1.35rem;font-size:.82rem;font-weight:900}main{align-items:stretch;min-height:calc(100vh - 64px);display:flex;position:relative}.panel{-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);border-left:4px solid var(--yolk);z-index:2;background:#fff8e78c;flex-direction:column;justify-content:center;width:34%;min-width:530px;min-height:calc(100vh - 64px);padding:82px 36px 42px;display:flex;position:relative}.tag{background:var(--red);color:#fff;letter-spacing:4px;text-transform:uppercase;border:2px solid var(--ink);box-shadow:4px 4px 0 var(--ink);align-self:flex-start;margin-bottom:1.15rem;padding:.42rem 1rem;font-size:.75rem;font-weight:900;display:inline-block}.panel h1{color:var(--ink);text-shadow:5px 5px 0 var(--yolk),0 0 30px #ffffffb3;letter-spacing:-1px;margin:0 0 .8rem;font-family:Bebas Neue,sans-serif;font-size:clamp(5.2rem,8vw,8.2rem);line-height:.9}.panel h1 span{color:var(--yolk);text-shadow:4px 4px 0 var(--ink)}.panel p{color:#0d2040;border-left:4px solid var(--yolk);max-width:470px;margin-bottom:2rem;padding-left:1rem;font-family:Noto Serif JP,serif;font-size:1.08rem;line-height:1.7}.hero-stats{flex-wrap:wrap;gap:1.8rem;margin-bottom:2.3rem;display:flex}.stat{background:var(--ink);color:var(--yolk);border:2px solid var(--ink);min-width:132px;box-shadow:4px 4px 0 var(--yolk-dark);padding:.78rem 1.15rem}.stat b{letter-spacing:1px;font-family:Bebas Neue,sans-serif;font-size:2.15rem;line-height:1;display:block}.stat small{color:var(--muted);letter-spacing:2px;text-transform:uppercase;margin-top:.2rem;font-size:.68rem;display:block}.hero-btns{flex-wrap:wrap;align-items:center;gap:1rem;display:flex}.btn-primary,.btn-secondary{border:2.5px solid var(--ink);box-shadow:5px 5px 0 var(--ink);padding:.85rem 2rem;font-family:"M PLUS Rounded 1c",sans-serif;font-size:1rem;font-weight:900;text-decoration:none;transition:transform .15s,box-shadow .15s;display:inline-block}.btn-primary{background:var(--yolk);color:var(--ink)}.btn-secondary{color:var(--ink);background:#ffffff2e}.btn-primary:hover,.btn-secondary:hover{box-shadow:2px 2px 0 var(--ink);transform:translate(3px,3px)}.game{z-index:1;flex:1;justify-content:center;align-items:center;padding:38px 42px;display:flex;position:relative;overflow:hidden}.play-zone{grid-template-columns:minmax(310px,390px) minmax(560px,680px);justify-content:center;align-items:center;gap:62px;width:100%;display:grid}.side-actions{z-index:4;flex-direction:column;align-items:stretch;gap:18px;display:flex}.entry,.winner{background:var(--shell);border:3px solid var(--ink);box-shadow:8px 8px 0 var(--red);flex-direction:column;gap:.82rem;width:100%;padding:1.45rem;display:flex}.entry h2,.winner h2{color:var(--ink);text-shadow:2px 2px #0000001f;font-family:Bebas Neue,sans-serif;font-size:2rem;line-height:1}.winner p{word-break:break-word;font-size:.9rem;font-weight:900}.entry input,.winner input{border:2.5px solid var(--ink);width:100%;color:var(--ink);background:#fff;outline:none;padding:.9rem 1rem;font-family:"M PLUS Rounded 1c",sans-serif;font-size:.95rem;font-weight:900}.entry input:focus,.winner input:focus{box-shadow:4px 4px 0 var(--yolk);border-color:var(--yolk)}.entry button,.winner button{background:var(--yolk);color:var(--ink);border:3px solid var(--ink);box-shadow:5px 5px 0 var(--yolk-dark);cursor:pointer;padding:.85rem 1rem;font-family:"M PLUS Rounded 1c",sans-serif;font-weight:900}.entry button:disabled,.winner button:disabled{opacity:.65;cursor:not-allowed}.msg{background:var(--ink);color:var(--yolk);text-align:center;border:3px solid var(--ink);box-shadow:5px 5px 0 var(--red);padding:12px 18px;font-weight:900}.wheel-zone{flex-direction:column;justify-content:center;align-items:center;width:620px;min-height:720px;display:flex;position:relative;overflow:visible}.pointer{z-index:9999;pointer-events:none;border:24px solid #0000;border-top:58px solid #ff2d3d;border-bottom:0;width:0;height:0;position:absolute;top:-22px;left:50%;transform:translate(-50%)}.wheel{transform-origin:50%;will-change:transform;backface-visibility:hidden;z-index:1;border-radius:50%;flex-shrink:0;width:620px;height:620px;transition:transform 6s cubic-bezier(.17,.67,.12,.99);position:relative;overflow:hidden}.wheel:before{content:"";z-index:4;pointer-events:none;border-radius:50%;position:absolute;inset:10px;box-shadow:inset 0 0 0 4px #11132759,inset 0 0 50px #0000002e}.slice{background:conic-gradient(from calc(var(--i)*45deg),var(--c) 0 45deg,transparent 45deg 360deg);position:absolute;inset:0}.slice:after{content:"";background:conic-gradient(from calc(var(--i)*45deg),var(--ink) 0 3deg,transparent 3deg 44deg,var(--ink) 44deg 47deg,transparent 47deg 360deg);pointer-events:none;position:absolute;inset:0}.slice span{width:152px;height:84px;transform:rotate(var(--angle)) translateY(-207px) rotate(calc(-1 * var(--angle)));transform-origin:50%;text-align:center;color:var(--ink);z-index:5;letter-spacing:-.4px;text-wrap:balance;text-shadow:0 1px #ffffff59;justify-content:center;align-items:center;margin-top:-42px;margin-left:-76px;padding:4px;font-family:"M PLUS Rounded 1c",Arial,sans-serif;font-size:20px;font-weight:900;line-height:1.05;display:flex;position:absolute;top:50%;left:50%;overflow:hidden}.slice:nth-child(2) span,.slice:nth-child(5) span,.slice:nth-child(6) span,.slice:nth-child(7) span{color:#fff;text-shadow:2px 2px #0006}.hub{z-index:8;pointer-events:none;place-items:center;display:grid;position:absolute;inset:0}.hub:before{content:"";background:var(--yolk);border:8px solid var(--ink);border-radius:50%;width:188px;height:188px;position:absolute;box-shadow:inset 0 0 0 10px #ffffff29}.hub button{pointer-events:auto;background:var(--yolk);border:7px solid var(--ink);width:124px;height:124px;box-shadow:10px 10px 0 var(--red);color:var(--ink);z-index:2;text-align:center;cursor:pointer;border-radius:50%;justify-content:center;align-items:center;font-size:1.6rem;font-weight:900;display:flex}.hub button:disabled{opacity:.75;cursor:not-allowed}.result{color:#fff;letter-spacing:1px;text-transform:uppercase;text-align:center;background:#171735;border:4px solid #f5d34f;justify-content:center;align-items:center;width:320px;min-height:120px;margin-top:28px;font-family:Bebas Neue,sans-serif;font-size:32px;font-weight:600;line-height:1.3;display:flex;box-shadow:8px 8px #ff3152}@media (width<=1280px){main{flex-direction:column;min-height:calc(100vh - 64px)}.panel{justify-content:flex-start;width:100%;min-width:0;min-height:auto;padding:42px 24px}.panel h1{font-size:clamp(4.2rem,14vw,6rem)}.game{padding:42px 18px;overflow:visible}.play-zone{grid-template-columns:1fr;gap:42px}.side-actions{order:2;width:min(430px,92vw);margin:0 auto}.wheel-zone{order:1;width:min(680px,96vw);max-width:96vw;min-height:auto;padding-top:48px}.pointer{top:20px}.wheel{width:min(610px,86vw);min-width:0;height:min(610px,86vw);min-height:0}.slice span{width:clamp(104px,20vw,152px);height:clamp(54px,10vw,84px);transform:rotate(var(--angle)) translateY(calc(-1 * min(34vw,207px))) rotate(calc(-1 * var(--angle)));margin-top:calc(-1*clamp(27px,5vw,42px));margin-left:calc(-1*clamp(52px,10vw,76px));font-size:clamp(12px,2.8vw,20px)}}@media (width<=700px){header{padding:0 1.2rem}.top-pill{padding:.45rem .8rem;font-size:.7rem}.logo{font-size:1.4rem}.hero-stats{gap:1rem}.stat{min-width:110px}.panel p{font-size:.9rem}.hero-btns{flex-direction:column;align-items:stretch}.btn-primary,.btn-secondary{text-align:center;width:100%}.hub:before{width:32vw;max-width:170px;height:32vw;max-height:170px}.hub button{width:23vw;max-width:118px;height:23vw;max-height:118px;font-size:1.1rem}.slice span{transform:rotate(var(--angle)) translateY(calc(-1 * min(35vw,196px))) rotate(calc(-1 * var(--angle)));font-size:clamp(10px,3vw,14px)}}
