@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.css');
:root{color-scheme:dark;--bg:#111317;--panel:#1a1d22;--line:#34383f;--muted:#a0a7b2;--ink:#f3f4ef;--lime:#d2f76b;--blue:#8bb8ff;font-family:Pretendard,-apple-system,BlinkMacSystemFont,sans-serif;font-synthesis:none}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink)}button,input,select{font:inherit}a{color:inherit;text-decoration:none}button,a,input,select,summary{-webkit-tap-highlight-color:transparent}button,select,summary{cursor:pointer}button{color:var(--ink);background:#262a31;border:1px solid var(--line);border-radius:8px;padding:13px 16px;font-weight:650}button:hover:not(:disabled){border-color:var(--lime);color:var(--lime)}button:disabled{opacity:.4;cursor:not-allowed}button:focus-visible,a:focus-visible,summary:focus-visible{outline:2px solid var(--lime);outline-offset:5px}input,select{width:100%;background:#111317;color:var(--ink);border:1px solid #4a505a;border-radius:8px;padding:15px;outline:none}input:focus,select:focus{border-color:var(--lime);box-shadow:0 0 0 2px #d2f76b22}input::placeholder{color:#858d98}input:disabled{opacity:.55}[hidden]{display:none!important}.site-header{height:80px;max-width:1240px;margin:auto;padding:0 40px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);font-size:13px;letter-spacing:.04em;font-weight:800}.site-header span{color:var(--muted);font-weight:450}.site-header .version{font-size:12px}main{max-width:1160px;margin:auto;padding:0 28px}.panel{background:var(--panel);border:1px solid var(--line);border-radius:16px}.eyebrow{color:var(--muted);font-size:11px;letter-spacing:.13em;font-weight:700}.dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--lime);margin-right:7px}#lobby{display:grid;grid-template-columns:1.2fr 1fr;gap:70px;padding:76px 0 64px;align-items:center}h1{font-size:clamp(46px,5.6vw,72px);line-height:1.14;letter-spacing:-.055em;margin:24px 0}h1 em{font-style:normal;color:var(--lime)}.intro{color:var(--muted);line-height:1.9;font-size:16px}.hero-meta{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px;font-size:11px;color:#c3c9d1}.hero-meta span{padding-left:10px;border-left:1px solid #4c535e}.setup{padding:30px}.setup h2{font-size:23px;letter-spacing:-.04em;margin:16px 0 32px}.setup label{display:block;font-size:13px;margin:20px 0 10px}.setup label span{float:right;color:var(--muted);font-size:11px}.primary{background:var(--lime);border-color:var(--lime);color:#17210c!important;min-height:52px}.primary:hover:not(:disabled){background:#e1ff97!important}.setup .primary{width:100%;display:flex;justify-content:space-between;margin-top:28px}.small,#data-status{font-size:12px;line-height:1.7;color:var(--muted)}#data-status{min-height:36px}#data-status.error{color:#ffafa1}.learn-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:24px 0 40px}details{padding:21px}summary{font-size:14px;font-weight:650}summary span{font-size:11px;color:var(--muted);display:block;margin:10px 0 0 17px;font-weight:400}details input[type=search]{margin-top:20px}details[open] summary{margin-bottom:20px}.word-list{display:flex;gap:6px;flex-wrap:wrap;max-height:230px;overflow:auto}.word-list span{font-size:12px;border:1px solid var(--line);padding:6px 9px;border-radius:5px;color:#c5ccd4}.rule-copy{font-size:13px;line-height:1.8;color:#b5bdc7}.sound{display:flex;align-items:center;gap:10px}.sound input{width:auto}footer{border-top:1px solid var(--line);padding:24px 0 36px;font-size:11px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;color:var(--muted)}footer a{color:var(--ink)}footer p{width:100%;font-size:10px;line-height:1.7;overflow-wrap:anywhere;margin:0}.battle-top{display:flex;justify-content:space-between;align-items:center;margin:38px 0 24px}.battle-top h2{font-size:40px;letter-spacing:-.05em;margin:10px 0}.round-box{text-align:right;display:grid;gap:10px}.round-box span{font-size:11px;letter-spacing:.12em;color:var(--muted)}.round-box strong{font-size:14px;color:var(--lime)}.arena{display:grid;grid-template-columns:1fr 100px 1fr;border:1px solid var(--line);border-radius:16px;background:radial-gradient(ellipse at 10% 100%,#d2f76b08,transparent 65%),var(--panel);padding:30px;position:relative;overflow:hidden}.fighter{min-width:0}.fighter-label{font-size:12px;display:flex;justify-content:space-between;gap:10px}.fighter-label b{font-size:18px;font-variant-numeric:tabular-nums}.player .fighter-label{color:var(--lime)}.bot .fighter-label{color:var(--blue)}progress{appearance:none;-webkit-appearance:none;width:100%;height:7px;border:0;border-radius:10px;margin-top:13px;overflow:hidden;background:#373c44}progress::-webkit-progress-bar{background:#373c44}progress::-webkit-progress-value{background:var(--lime);transition:width .4s}progress::-moz-progress-bar{background:var(--lime)}.bot progress::-webkit-progress-value{background:var(--blue)}.bot progress::-moz-progress-bar{background:var(--blue)}.stack{font-size:11px;color:var(--muted);margin:8px 0}.word-face{min-height:130px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:20px 0}.word-face>span{font-weight:750;font-size:clamp(20px,3vw,34px);letter-spacing:-.05em;text-align:center;overflow-wrap:anywhere}.word-face strong{font-size:14px;min-height:17px}.tier-S{color:#f5a5ff}.tier-A{color:var(--lime)}.tier-B{color:var(--blue)}.tier-C{color:var(--muted)}.versus{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:15px;color:var(--muted)}.versus>span:first-child{font-size:11px;letter-spacing:.1em}.versus strong{font-size:40px;color:var(--ink);font-variant-numeric:tabular-nums;line-height:1}.versus>span:last-child{font-size:10px}.attack-detail{font-size:11px;color:var(--muted);line-height:1.7;min-height:55px;text-align:center}.input-panel{margin-top:16px;padding:24px 28px}.input-heading{display:flex;justify-content:space-between;font-size:12px;margin-bottom:16px;color:var(--muted)}#lock-state{color:var(--lime)}form{display:flex;gap:10px}#word{font-size:19px}#submit{flex-shrink:0;min-width:145px}.actions{display:flex;gap:10px;margin-top:12px}.actions button{font-size:12px;padding:12px}.actions button span{font-weight:400;color:var(--muted);margin-left:8px}#feedback{font-size:13px;line-height:1.6;min-height:21px;color:var(--lime);margin:18px 0 0}.input-panel .small{margin-bottom:0;font-size:11px}.section-label{display:flex;justify-content:space-between;align-items:center;margin:24px 0 12px}.section-label h3{font-size:14px}.section-label>span{font-size:11px;color:var(--muted)}#round-log{list-style:none;padding:0;margin:0}#round-log li{border-top:1px solid var(--line);padding:15px 4px;font-size:12px;display:grid;grid-template-columns:52px 1fr 1fr;gap:12px;line-height:1.8}#round-log li>span:first-child{color:var(--muted);font-size:10px}#round-log small{display:block;color:var(--muted);font-size:10px}.result{margin:28px 0;padding:40px;text-align:center}.result h2{font-size:50px;color:var(--lime);margin:16px 0}.result>p{color:var(--muted);font-size:14px;line-height:1.7}.result-stats{display:flex;justify-content:center;gap:40px;padding:28px 0;flex-wrap:wrap}.result-stats div{display:grid;gap:10px}.result-stats small{color:var(--muted);font-size:11px}.result-stats strong{font-size:22px}.result .primary{margin-top:10px;min-width:250px}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}#fatal{margin:30px 0;padding:30px}.impact{animation:shake .4s ease-out}.impact-A{animation:heavy .55s ease-out}.impact-S{animation:special .7s ease-out}.particle{position:absolute;width:5px;height:5px;left:50%;top:48%;background:var(--lime);border-radius:1px;pointer-events:none;animation:scatter .85s ease-out forwards}.bot-hit{background:var(--blue)}@keyframes scatter{to{transform:translate(var(--x),var(--y)) rotate(180deg);opacity:0}}@keyframes shake{20%,60%{transform:translateX(-3px)}40%,80%{transform:translateX(3px)}}@keyframes heavy{20%{transform:scale(1.015) translateX(-4px);border-color:var(--lime)}50%{transform:scale(1.01) translateX(4px)}}@keyframes special{10%{background:#e6e7b1;color:#111}30%{transform:scale(1.025);box-shadow:inset 0 0 60px #f5a5ff99}65%{transform:translateX(-5px)}}
@media(max-width:760px){.site-header{height:65px;padding:0 20px}.site-header>a span{display:none}main{padding:0 18px}#lobby{grid-template-columns:1fr;gap:28px;padding:40px 0 24px}h1{font-size:54px;margin:20px 0}.hero-meta{margin-top:22px}.setup{padding:24px}.setup h2{margin-bottom:24px}.learn-grid{grid-template-columns:1fr}.battle-top{margin-top:25px}.battle-top h2{font-size:32px}.arena{grid-template-columns:1fr 54px 1fr;padding:18px 14px}.fighter-label{font-size:10px;gap:5px;align-items:center}.fighter-label b{font-size:16px}.word-face{min-height:120px}.word-face>span{font-size:24px}.versus strong{font-size:32px}.versus>span:last-child{font-size:9px}.attack-detail{font-size:10px;min-height:76px}.input-panel{padding:20px 16px}form{flex-wrap:wrap}#submit{width:100%;min-height:48px}#word{font-size:18px}.actions{flex-wrap:wrap;gap:8px}.actions button{font-size:11px}.actions button span{margin-left:5px}#round-log li{grid-template-columns:28px 1fr 1fr;gap:8px;font-size:11px}.result{padding:28px 16px}.result-stats{gap:20px}.result-stats strong{font-size:19px}.result h2{font-size:42px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.particle{display:none}}

/* manipulation suppresses double-tap zoom in iOS Safari while retaining pinch zoom. */
html,body{touch-action:manipulation}button,a,input,select,summary{touch-action:manipulation}input,select{font-size:16px}
/* Semantic scene entities: only transform / opacity animate. */
.word-entity{position:absolute;z-index:3;pointer-events:none;width:138px;height:110px;color:var(--lime);transform:translate(-50%,-50%);will-change:transform,opacity;text-align:center}
.word-entity.bot{color:var(--blue);--facing:-1}
.scene-art{position:relative;width:100%;height:90px;transform:scaleX(var(--facing,1));border-radius:50%;background:radial-gradient(ellipse,#1689b940,transparent 70%)}
.scene-water{position:absolute;inset:18px 0 0;opacity:.7;animation:water-rock .65s ease-in-out infinite alternate}.scene-water svg{width:100%;height:100%}
.scene-actor{position:absolute;left:30px;top:8px;font-size:57px;line-height:1.2;font-family:"Apple Color Emoji","Segoe UI Emoji",sans-serif;animation:swim .45s ease-in-out infinite alternate}
.scene-label{display:inline-block;font-size:11px;line-height:18px;background:#111d; border-radius:8px;padding:0 8px;color:inherit}
.scene-bubbles{position:absolute;left:2px;top:20px;color:#befaff;font-size:28px;font-style:normal;animation:bubbles .8s infinite}
.scene-claws{display:none;position:absolute;inset:0;top:-5px;color:#ffb088;font-size:28px;font-style:normal;animation:claws .3s infinite alternate}
.scene-hit{display:none;position:absolute;inset:-15px;color:#dcfbff;font-size:100px;line-height:1;font-style:normal}
[data-scene=claw] .scene-claws{display:block}
[data-scene=surfer] .scene-actor{font-size:47px;top:-10px;left:58px;animation:surf .45s infinite alternate}
[data-scene=surfer] .scene-water,[data-scene=surge] .scene-water{opacity:1}
[data-scene=surge] .scene-actor{font-size:40px;left:15px;top:20px}
[data-scene=pulse] .scene-actor{animation:pulse .5s infinite alternate}
[data-scene=sway] .scene-actor{transform-origin:50% 90%;animation:sway .5s infinite alternate}
[data-scene=spin] .scene-actor,[data-scene=spark] .scene-actor{animation:spin 1.2s linear infinite}
[data-scene=shore] .scene-actor,[data-scene=depth] .scene-actor,[data-scene=harbor] .scene-actor{animation:water-rock .65s infinite alternate}
[data-scene=shell] .scene-actor{animation:pulse .4s infinite alternate}
[data-scene=crawl] .scene-actor{animation:crawl .35s infinite alternate}
[data-scene=beacon] .scene-bubbles{font-size:50px;top:0;animation:beam .5s infinite alternate}
[data-scene=submarine] .scene-actor{background:#f4c550;border-radius:45%;font-size:35px;top:25px;padding:0 9px}
[data-materialization=summon] .word-entity{animation:summon-body 1.2s both}
[data-materialization=rush] .word-entity{animation:word-rush .8s cubic-bezier(.42,0,1,1) both}
[data-materialization=impact] .word-entity{animation:scene-dissolve .6s ease-out both}
[data-materialization=impact] .scene-hit{display:block;animation:hit-burst .6s ease-out both}
[data-materialization=impact] .scene-actor,[data-materialization=impact] .scene-water{opacity:.5}
[data-materialization=summon] .word-face>span,[data-materialization=rush] .word-face>span{opacity:.15}
@keyframes summon-body{0%{transform:translate(-50%,-50%) scale(.15);opacity:0}65%{transform:translate(-50%,-50%) scale(1.1);opacity:1}100%{transform:translate(-50%,-50%) scale(1);opacity:1}}
@keyframes word-rush{0%{transform:translate(-50%,-50%) translateX(0)}25%{transform:translate(-50%,-50%) translateX(calc(var(--travel)*-.08)) scale(.9)}100%{transform:translate(-50%,-50%) translateX(var(--travel)) scale(1.12)}}
@keyframes scene-dissolve{0%{transform:translate(-50%,-50%) translateX(var(--travel)) scale(1.12);opacity:1}100%{transform:translate(-50%,-50%) translateX(var(--travel)) scale(1.5);opacity:0}}
@keyframes hit-burst{from{transform:scale(.3) rotate(0);opacity:1}to{transform:scale(1.5) rotate(65deg);opacity:0}}
@keyframes swim{to{transform:translate(7px,-7px) rotate(-8deg)}}
@keyframes surf{to{transform:translate(-9px,9px) rotate(-16deg)}}
@keyframes pulse{to{transform:scale(.82,1.12) translateY(-5px)}}
@keyframes sway{to{transform:rotate(15deg) scaleX(.9)}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes crawl{to{transform:translateX(8px) scaleX(.8)}}
@keyframes claws{to{transform:scaleX(1.3) rotate(12deg)}}
@keyframes bubbles{to{transform:translate(-12px,-24px);opacity:0}}
@keyframes beam{to{transform:scaleX(2.2);opacity:.2}}
@keyframes water-rock{to{transform:translateY(4px) rotate(-5deg)}}
.impact-A,.impact-S{animation:heavy .55s ease-out}
@keyframes heavy{20%{transform:translateX(-4px) scale(1.01)}50%{transform:translateX(4px) scale(1.01)}}
@media(max-width:760px){.word-entity{width:116px;height:105px}.scene-actor{font-size:50px}}
@media(prefers-reduced-motion:reduce){.word-entity{will-change:auto}}

.word-entity:not([data-topic=ocean]) .scene-water{display:none}