.n4pen{max-width:560px;margin:0 auto;padding:16px 16px 40px;color:#eef0f2}.n4pen *{box-sizing:border-box}.n4pen-kicker{margin:0;color:#ff3946;font-size:11px;font-weight:900;letter-spacing:.14em}.n4pen h1{margin:4px 0 6px;font-size:clamp(34px,10vw,52px);line-height:1;letter-spacing:-.02em}.n4pen h1,.n4pen h2{text-transform:uppercase}.n4pen h2{margin:0 0 10px;font-size:13px;letter-spacing:.1em;color:#aeb4ba}.n4pen-sub{margin:0 0 14px;color:#b9bfc5;font-size:15px;line-height:1.45}.n4pen-card{margin:0 0 12px;padding:14px;border:1px solid rgba(255,255,255,.1);border-radius:14px;background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.02))}.n4pen-fine{margin:10px 0 0;color:#9aa1a8;font-size:13px;line-height:1.4}.n4pen-fine a{color:#ff5a66}.n4pen-foot{text-align:center}.n4pen-lvl{display:flex;justify-content:space-between;align-items:baseline;font-size:15px}.n4pen-lvl b{font-size:20px}.n4pen-lvl span{color:#aeb4ba;font-size:13px}.n4pen-bar{height:8px;margin:8px 0 12px;border-radius:8px;background:rgba(255,255,255,.1);overflow:hidden}.n4pen-bar i{display:block;height:100%;background:linear-gradient(90deg,#e10613,#ff6a3d);border-radius:8px}.n4pen-record dl{display:grid;grid-template-columns:repeat(5,1fr);grid-gap:6px;gap:6px;margin:0}.n4pen-record dl div{padding:8px 4px;text-align:center;border-radius:10px;background:rgba(255,255,255,.05)}.n4pen-record dt{font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:#98a0a8}.n4pen-record dd{margin:2px 0 0;font-size:20px;font-weight:900}.n4pen-hist{display:flex;gap:6px;margin:12px 0 0;padding:0;list-style:none;overflow-x:auto}.n4pen-hist li{flex:0 0 auto;display:grid;grid-template-columns:auto auto;grid-gap:0 6px;gap:0 6px;align-items:center;padding:6px 9px;border-radius:9px;font-size:12px;background:rgba(255,255,255,.05);border:1px solid transparent}.n4pen-hist li.is-win{border-color:rgba(40,200,110,.45)}.n4pen-hist li.is-loss{border-color:rgba(225,6,19,.45)}.n4pen-hist b{font-size:13px}.n4pen-hist em{grid-column:1/-1;font-style:normal;color:#9aa1a8;font-size:11px;max-width:96px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.n4pen-seg{display:grid;grid-template-columns:1fr 1fr;grid-gap:6px;gap:6px}.n4pen-levels button,.n4pen-seg button{min-height:48px;padding:10px;border:1px solid rgba(255,255,255,.14);border-radius:12px;background:rgba(255,255,255,.04);color:#e6e9ec;font:inherit;font-weight:800;cursor:pointer}.n4pen-levels button.is-on,.n4pen-seg button.is-on{border-color:#e10613;background:rgba(225,6,19,.16);color:#fff}.n4pen-levels{display:grid;grid-gap:6px;gap:6px;margin-top:10px}.n4pen-levels button{display:flex;flex-direction:column;align-items:flex-start;gap:2px;text-align:left}.n4pen-levels small{color:#9aa1a8;font-weight:500;font-size:12px}.n4pen-clubs label{display:block;margin:0 0 12px;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:#aeb4ba;font-weight:800}.n4pen-clubs label>span{display:flex;align-items:center;gap:10px;margin-top:6px}.n4pen select{flex:1 1;min-height:48px;padding:0 12px;border:1px solid rgba(255,255,255,.16);border-radius:12px;background:#12161b;color:#fff;font:inherit;font-size:16px;text-transform:none;letter-spacing:0}.n4pen-swatch{flex:0 0 auto;display:inline-block;width:26px;height:26px;border-radius:7px 7px 10px 10px;border:2px solid #fff}.n4pen-go{display:block;width:100%;min-height:54px;padding:12px;border:0;border-radius:14px;background:linear-gradient(180deg,#f2162a,#c10513);color:#fff;font:inherit;font-size:17px;font-weight:900;letter-spacing:.08em;cursor:pointer;box-shadow:0 8px 24px rgba(225,6,19,.3)}.n4pen-go:disabled{opacity:.4;cursor:not-allowed;box-shadow:none}.n4pen-ghost{display:block;width:100%;min-height:50px;margin-top:8px;border:1px solid rgba(255,255,255,.2);border-radius:14px;background:transparent;color:#e6e9ec;font:inherit;font-weight:800;cursor:pointer}.n4pen-match{padding-top:10px}.n4pen-score{display:grid;grid-template-columns:1fr 1fr;grid-gap:8px;gap:8px}.n4pen-team{position:relative;display:grid;grid-template-columns:auto 1fr auto;grid-template-areas:"sw name goals" "sw who goals" "marks marks marks";grid-gap:0 8px;gap:0 8px;align-items:center;padding:10px;border:1px solid rgba(255,255,255,.1);border-radius:12px;background:rgba(255,255,255,.04)}.n4pen-team.is-up{border-color:#e10613;box-shadow:0 0 0 1px rgba(225,6,19,.4),0 0 22px rgba(225,6,19,.18)}.n4pen-team .n4pen-swatch{grid-area:sw}.n4pen-team strong{grid-area:name;font-size:13px;line-height:1.15;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.n4pen-who{grid-area:who;color:#98a0a8;font-size:11px}.n4pen-goals{grid-area:goals;font-size:34px;line-height:1}.n4pen-marks{grid-area:marks;display:flex;gap:5px;margin-top:8px}.n4pen-marks i{flex:1 1;max-width:22px;height:20px;display:grid;place-items:center;border-radius:50%;border:1.5px solid rgba(255,255,255,.28);font-style:normal;font-size:11px;font-weight:900;color:#fff}.n4pen-marks i.is-goal{background:#1fb760;border-color:#1fb760}.n4pen-marks i.is-saved{background:#e10613;border-color:#e10613}.n4pen-marks i.is-miss{background:#6b7480;border-color:#6b7480}.n4pen-kick{margin:10px 0 8px;text-align:center;font-size:13px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:#cfd4d9}.n4pen-sceneWrap{position:relative;border-radius:16px;overflow:hidden;border:1px solid rgba(255,255,255,.1);touch-action:manipulation}.n4pen-scene{display:block;width:100%;height:auto;-moz-user-select:none;user-select:none;-webkit-user-select:none}.n4pen-zone{fill:rgba(255,255,255,.04);stroke:rgba(255,255,255,.35);stroke-width:1;stroke-dasharray:4 3;cursor:pointer;outline:none}.n4pen-zone:focus,.n4pen-zone:hover{fill:rgba(255,255,255,.16)}.n4pen-zone.is-on{fill:rgba(225,6,19,.38);stroke:#ff3946;stroke-dasharray:none;stroke-width:2}.n4pen-banner{position:absolute;inset:auto 0 18% 0;text-align:center;font-size:clamp(34px,11vw,56px);font-weight:1000;font-style:italic;letter-spacing:.02em;text-shadow:0 4px 24px rgba(0,0,0,.7);animation:n4penPop .45s cubic-bezier(.2,1.4,.4,1) both;pointer-events:none}.n4pen-banner.is-goal{color:#4dff98}.n4pen-banner.is-saved{color:#ff4a58}.n4pen-banner.is-miss{color:#c8ced4}@keyframes n4penPop{0%{transform:scale(.4);opacity:0}to{transform:scale(1);opacity:1}}.n4pen-pass{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:20px;text-align:center;background:rgba(5,6,8,.96)}.n4pen-pass b{font-size:26px}.n4pen-pass span{color:#b9bfc5;font-size:15px}.n4pen-pass .n4pen-go{max-width:300px}.n4pen-controls{min-height:150px;padding-top:10px}.n4pen-tip{margin:0 0 10px;text-align:center;font-size:15px;font-weight:700;color:#e6e9ec}.n4pen-meter{position:relative;height:30px;margin:0 0 12px;border-radius:15px;background:linear-gradient(90deg,#6b1d1d,#a6781a 18%,#2aa05a 35%,#2aa05a 65%,#a6781a 82%,#6b1d1d);border:1px solid rgba(255,255,255,.25);overflow:hidden}.n4pen-meter.is-idle{opacity:.35}.n4pen-sweet{position:absolute;left:42.5%;width:15%;top:0;bottom:0;background:rgba(77,255,152,.38);border-left:2px solid #b8ffd5;border-right:2px solid #b8ffd5}.n4pen-meter b{position:absolute;top:-2px;bottom:-2px;width:6px;margin-left:-3px;border-radius:3px;background:#fff;box-shadow:0 0 12px #fff}.n4pen-quit{display:block;margin:6px auto 0;padding:10px 16px;border:0;background:transparent;color:#8d949b;font:inherit;font-size:13px;text-decoration:underline;cursor:pointer}.n4pen-result{position:fixed;inset:0;z-index:80;display:flex;align-items:center;justify-content:center;padding:18px;background:rgba(3,4,6,.82);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.n4pen-resultBox{width:100%;max-width:420px;padding:22px 18px;border:1px solid rgba(255,255,255,.14);border-radius:18px;background:#101318;text-align:center}.n4pen-resultBox h2{margin:6px 0;font-size:40px;letter-spacing:0;text-transform:uppercase}.n4pen-resultBox h2.is-win{color:#4dff98}.n4pen-resultBox h2.is-loss{color:#ff4a58}.n4pen-final{margin:0 0 6px;font-size:16px}.n4pen-final b{font-size:26px}.n4pen-xp{margin:0 0 16px;color:#b9bfc5;font-size:14px}@media (prefers-reduced-motion:reduce){.n4pen-banner{animation:none}}@media (min-width:700px){.n4pen{padding-top:28px}}.n4p2-stage{position:relative;width:100%;height:100%;background:#060910;overflow:hidden}.n4p2-canvas{display:block;width:100%;height:100%;touch-action:pan-y}.n4p2{max-width:920px}.n4p2 .n4pen-score{max-width:560px;margin:0 auto}.n4p2-wrap{position:relative;width:100%;aspect-ratio:1/1.02;max-height:min(66vh,calc(100svh - 370px));min-height:300px;border-radius:16px;overflow:hidden;border:1px solid rgba(255,255,255,.1);background:#060910;-moz-user-select:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}@media (min-width:760px){.n4p2-wrap{aspect-ratio:16/9}}.n4p2-loading{display:grid;place-items:center;color:#9aa1a8;font-size:14px}.n4p2-stage>.n4p2-loading{position:absolute;inset:0}.n4p2-mute{top:10px;right:10px;width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.25);background:rgba(0,0,0,.45);font-size:18px;line-height:1;cursor:pointer}.n4p2-chip,.n4p2-mute{position:absolute;z-index:3;color:#fff}.n4p2-chip{top:14px;left:12px;padding:6px 10px;border-radius:999px;background:rgba(225,6,19,.88);font-size:11px;font-weight:900;letter-spacing:.1em;animation:n4p2Pulse 1.2s ease-in-out infinite}@keyframes n4p2Pulse{50%{transform:scale(1.06)}}.n4p2-banner{inset:auto 0 20% 0;z-index:3;line-height:1.05}.n4p2-banner small{display:block;margin-top:6px;font-size:13px;font-style:normal;font-weight:800;letter-spacing:.06em;color:#e6e9ec}.n4p2-note{left:0;right:0;top:14%;text-align:center;font-size:20px;color:#fff;text-shadow:0 2px 14px rgba(0,0,0,.8);pointer-events:none}.n4p2-note,.n4p2-replaytag{position:absolute;z-index:3;font-weight:900}.n4p2-replaytag{top:14px;left:12px;padding:5px 10px;border-radius:6px;background:rgba(255,255,255,.9);color:#111;font-size:12px;letter-spacing:.14em}.n4p2 .n4pen-pass{z-index:4}.n4p2-controls{max-width:560px;margin:0 auto;padding-top:10px;min-height:170px}.n4p2-types{display:grid;grid-template-columns:repeat(3,1fr);grid-gap:6px;gap:6px;margin-bottom:10px}.n4p2-types button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:58px;padding:6px 4px;border:1px solid rgba(255,255,255,.14);border-radius:12px;background:rgba(255,255,255,.04);color:#e6e9ec;font:inherit;cursor:pointer;text-align:center}.n4p2-types button b{font-size:14px}.n4p2-types button small{color:#9aa1a8;font-size:10.5px;line-height:1.2}.n4p2-types button.is-on{border-color:#e10613;background:rgba(225,6,19,.18);color:#fff}.n4p2-types button:disabled{opacity:.6}.n4p2-meter{position:relative;height:26px;margin-bottom:10px;border-radius:13px;background:#171c23;border:1px solid rgba(255,255,255,.22);overflow:hidden}.n4p2-fill{left:0;width:0;background:linear-gradient(90deg,#8a1020,#e8662f);opacity:.8}.n4p2-fill,.n4p2-fill:after{position:absolute;top:0;bottom:0}.n4p2-fill:after{content:"";right:0;width:4px;background:#fff;box-shadow:0 0 10px #fff}.n4p2-sweet{position:absolute;z-index:2;top:0;bottom:0;background:rgba(77,255,152,.38);border-left:2px solid #b8ffd5;border-right:2px solid #b8ffd5}.n4p2-shoot{min-height:66px;font-size:19px;touch-action:none;-moz-user-select:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}.n4p2-shoot.is-hold{background:linear-gradient(180deg,#22c768,#128a45);box-shadow:0 8px 24px rgba(31,183,96,.35)}.n4p2-tip{margin:10px 0 0;text-align:center;font-size:15px;font-weight:700;color:#e6e9ec}.n4p2-line{color:#cfd4d9;font-weight:600;font-style:italic}.n4p2-afterBtns{display:grid;grid-template-columns:1fr 1fr;grid-gap:8px;gap:8px;margin-top:10px}.n4p2-afterBtns .n4pen-ghost{margin-top:0}.n4p2-afterBtns .n4pen-go{grid-column:1/-1}.n4p2-how ul{margin:0;padding-left:18px;color:#b9bfc5;font-size:14px;line-height:1.55}.n4p2-how li{margin-bottom:6px}@media (prefers-reduced-motion:reduce){.n4p2-chip{animation:none}}.n4p2-sub{margin:8px 0 0;text-align:center;font-size:12.5px;line-height:1.4;color:#9aa1a8}.n4p2-hint{position:absolute;left:50%;bottom:16%;transform:translateX(-50%);z-index:3;max-width:88%;padding:8px 14px;border-radius:999px;background:rgba(0,0,0,.62);border:1px solid rgba(255,255,255,.35);color:#fff;font-size:14px;font-weight:800;text-align:center;pointer-events:none;animation:n4p2Pulse 1.4s ease-in-out infinite}.n4p2-sweet.n4p2-sweet2{z-index:1;background:rgba(77,255,152,.15);border-left:1px dashed rgba(184,255,213,.55);border-right:1px dashed rgba(184,255,213,.55)}.n4p2-wrap:after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;border-radius:inherit;background:radial-gradient(ellipse at 50% 46%,rgba(0,0,0,0) 52%,rgba(0,0,0,.5) 100%)}