*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:radial-gradient(circle at 16px 16px,rgb(18 108 90 / 8%) 0 2px,transparent 2px 40px),linear-gradient(145deg,#fff9df,#e8f7de 48%,#fff5d7);color:#1f2933;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}body{overscroll-behavior:none}button{min-height:44px;border:1px solid #c8c1b1;border-radius:8px;background:#fffaf0;color:#1f2933;font:inherit;font-weight:700;cursor:pointer;transition:transform .12s ease,box-shadow .12s ease,border-color .12s ease,background .12s ease}button:active:not(:disabled){transform:scale(.98)}button:disabled{cursor:not-allowed;opacity:.45}button[aria-pressed=true],.primary-action{border-color:#126c5a;background:#d9f3eb;color:#0c4f42}.app-shell{width:min(100vw,560px);min-height:100svh;margin:0 auto;padding:calc(16px + env(safe-area-inset-top)) 16px calc(16px + env(safe-area-inset-bottom));display:grid}.home-view,.battle-view,.game-view,.result-view{min-height:calc(100svh - 32px - env(safe-area-inset-top) - env(safe-area-inset-bottom))}.home-view{position:relative;display:grid;align-content:center;gap:16px;isolation:isolate}.home-view:before,.home-view:after{content:"";position:absolute;z-index:-1;border:2px dashed rgb(18 108 90 / 15%);border-radius:8px;transform:rotate(-9deg)}.home-view:before{width:92px;height:92px;top:18px;right:8px}.home-view:after{width:54px;height:54px;left:0;bottom:88px;border-color:#d4af3742;transform:rotate(12deg)}.home-decoration{position:absolute;z-index:-1;width:12px;height:12px;background:#f0c95a;clip-path:polygon(50% 0,62% 35%,100% 50%,62% 65%,50% 100%,38% 65%,0 50%,38% 35%);opacity:.68}.home-decoration-one{top:116px;left:12px}.home-decoration-two{right:34px;bottom:172px;background:#60b99f;transform:rotate(14deg)}.home-copy{display:grid;gap:10px;text-align:center}.home-title{margin:0;color:#0c4f42;font-size:clamp(52px,16vw,76px);line-height:1;letter-spacing:0;text-shadow:0 3px 0 #f7d76a,0 10px 24px rgb(12 79 66 / 16%)}.home-subtitle{margin:0;color:#263238;font-size:18px;font-weight:850;line-height:1.35}.home-tagline{width:fit-content;margin:0 auto;padding:7px 12px;border:1px solid rgb(18 108 90 / 18%);border-radius:999px;background:#fffdf8b3;color:#0c4f42;font-size:14px;font-weight:900}.home-actions,.battle-actions,.result-actions{display:grid;gap:10px}.battle-view{display:grid;align-content:center;gap:16px}.battle-header{display:grid;gap:8px}.battle-title{margin:0;font-size:34px;line-height:1.1;letter-spacing:0}.battle-code-label,.battle-shape-name,.share-link-text{color:#525a61;font-weight:800;line-height:1.4}.battle-preview{padding:14px;border:1px solid #d4cbbb;border-radius:8px;background:#fffdf8;display:grid;justify-items:center;gap:10px}#battle-shape-preview{width:min(64vw,260px);aspect-ratio:1}#battle-shape-path{fill:#f6efe1;stroke:#263238;stroke-width:8}.battle-leaderboard{display:grid;gap:8px}.battle-leaderboard h2{margin:0;font-size:18px;line-height:1.2}.battle-leaderboard ol{margin:0;padding:0;display:grid;gap:8px;list-style:none}.battle-leaderboard li{padding:10px 12px;border:1px solid #d4cbbb;border-radius:8px;background:#fffdf8;color:#525a61;font-weight:800}.shape-selector{display:grid;gap:10px}.home-view .shape-selector{padding:12px;border:1px solid rgb(212 203 187 / 76%);border-radius:8px;background:#fffdf8c7;box-shadow:0 14px 36px #1f293317}.shape-selector-title{color:#0c4f42;font-size:14px;font-weight:900}.shape-selector-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}.shape-choice{min-height:44px;padding:7px 8px;border-color:#e2d7bf;background:#fffaf0;font-size:13px;box-shadow:0 3px #e5dcc8}.shape-choice[aria-pressed=true]{border-color:#126c5a;background:#d9f3eb;box-shadow:0 3px #87c7b7,0 10px 20px #126c5a29;transform:scale(1.03)}.home-primary-action{min-height:56px;border-color:#0c4f42;background:linear-gradient(180deg,#dff8ee,#aee7d5);box-shadow:0 5px #0c4f42,0 16px 34px #126c5a38;color:#063a31;font-size:18px}.battle-entry-card{padding:12px;border:1px solid #d4cbbb;border-radius:8px;background:#fffdf8d6;box-shadow:0 10px 26px #1f293314;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:12px}.battle-entry-card div{display:grid;gap:4px}.battle-entry-card strong{color:#1f2933;font-size:17px;line-height:1.2}.battle-entry-card span{color:#525a61;font-size:13px;font-weight:800;line-height:1.35}.battle-entry-card button,.how-to-action{background:#fffdf8}.how-to-action{color:#0c4f42}.game-view{display:grid;grid-template-rows:auto auto minmax(0,1fr) auto;gap:12px}.compact-selector .shape-selector-grid{grid-template-columns:repeat(7,minmax(0,1fr))}.compact-selector{padding:0;border:0;background:transparent;box-shadow:none}.compact-selector .shape-choice{min-height:36px;padding:5px 4px;font-size:12px}.game-topbar{display:flex;align-items:center;justify-content:space-between;gap:12px}.target-label{min-width:92px;padding:9px 12px;border:1px solid #b7d9d0;border-radius:999px;background:#d9f3eb;color:#0c4f42;text-align:center;font-size:14px;font-weight:800}.canvas-panel{min-height:0;display:grid;place-items:center}.canvas-wrap{width:min(100%,76svh);aspect-ratio:1;border:1px solid #d4cbbb;border-radius:8px;background:#fffdf8;overflow:hidden}canvas{display:block;width:100%;height:100%;touch-action:none}canvas[data-locked]{cursor:default}.toolbar{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}#submit-button{grid-column:1 / -1}.result-view{display:grid;align-content:center;gap:14px}.result-card{position:relative;overflow:hidden;padding:16px;border:1px solid #d4cbbb;border-radius:8px;background:#fffdf8;display:grid;gap:10px;animation:result-panel-fade .18s ease-out}.result-card[data-emotion-level=SSS],.result-card[data-emotion-level=SS],.result-card[data-emotion-level=S]{border-color:#d4af37;background:#fff8df}.result-card[data-emotion-level="A+"],.result-card[data-emotion-level=A],.result-card[data-emotion-level="B+"],.result-card[data-emotion-level=B]{border-color:#7dc4b1;background:#f3fffb}.result-card[data-emotion-level=F],.result-card[data-emotion-level=G],.result-card[data-emotion-level=H]{border-color:#e1a56b;background:#fff7ed}.result-card[data-emotion-level=X]{border-color:#b75b6b;background:#fff1f4}.result-level-label{color:#6b7280;font-size:13px;font-weight:850}.rating-text{font-size:28px;line-height:1.1}.result-view.is-level-exploded .rating-text{animation:level-explosion .26s ease-out}.result-card[data-emotion-level=SSS] .rating-text,.result-card[data-emotion-level=X] .rating-text{font-size:34px}.result-view[data-animation-type=clean-glow].is-level-exploded .rating-text{text-shadow:0 0 18px rgb(212 175 55 / 58%)}.emotion-message{margin:0;color:#1f2933;font-size:18px;font-weight:800;line-height:1.35}.result-view.is-result-revealing .emotion-message{opacity:0;transform:translateY(4px)}.result-view.is-emotion-visible .emotion-message{animation:emotion-line-in .22s ease-out}.result-view[data-animation-type=light-shake].is-level-exploded .result-card{animation:light-shake .18s ease-out}.result-view[data-animation-type=shake].is-level-exploded .result-card,.result-view[data-animation-type=flash-shake].is-level-exploded .result-card{animation:result-shake .24s ease-out}.result-view[data-animation-type=extreme-shake-flash].is-level-exploded .result-card{animation:extreme-shake .32s ease-out}.result-view[data-animation-type=flash-shake].is-level-exploded,.result-view[data-animation-type=extreme-shake-flash].is-level-exploded{animation:result-background-flash .36s ease-out}.result-metrics{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px 10px;color:#525a61;font-size:14px;line-height:1.35}.trend-text,.replay-hint,.screenshot-hint{line-height:1.4}.trend-text{width:fit-content;padding:6px 10px;border-radius:8px;background:#d9f3eb;color:#0c4f42;font-weight:850}.battle-result-panel{display:grid;gap:10px;padding:12px;border:1px solid #b7d9ce;border-radius:8px;background:#f5fffb}.battle-result-title{color:#0c4f42;font-size:14px;font-weight:900}.battle-outcome{width:fit-content;padding:7px 12px;border-radius:8px;background:#126c5a;color:#fff;font-size:24px;line-height:1}.battle-versus{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:8px}.battle-versus>div:not(.battle-versus-mark){display:grid;gap:4px;min-height:66px;padding:10px;border-radius:8px;background:#fff;color:#525a61}.battle-versus strong{color:#1f2933;font-size:20px}.battle-versus-mark{color:#0c4f42;font-size:13px;font-weight:900}.battle-result-rankings{margin:0;padding-left:20px;color:#1f2933;font-weight:750;line-height:1.45}.replay-hint{font-weight:800}.screenshot-hint{color:#7c5b14;font-weight:850}.result-reveal-mask{position:absolute;top:0;right:0;bottom:0;left:0;z-index:2;pointer-events:none;background:#fffdf8;animation:reveal-mask-fade .72s ease-out forwards}.result-card[data-emotion-level=SSS] .result-reveal-mask,.result-card[data-emotion-level=SS] .result-reveal-mask,.result-card[data-emotion-level=S] .result-reveal-mask{background:#fff8df}.result-card[data-emotion-level=X] .result-reveal-mask{background:#fff1f4}.record-badge{width:fit-content;padding:6px 10px;border-radius:8px;background:#d9f3eb;color:#0c4f42;font-size:13px;font-weight:850;animation:result-pop .18s ease-out}.dialog-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;z-index:10;padding:20px;display:grid;place-items:center;background:#1f29337a}.dialog-panel{width:min(100%,420px);padding:18px;border-radius:8px;background:#fffdf8;box-shadow:0 20px 80px #1f293338;display:grid;gap:14px}.dialog-title{margin:0;font-size:20px;line-height:1.25}.dialog-body{color:#525a61;line-height:1.55}.dialog-body p{margin:0 0 6px}.nickname-field,.battle-code-field{display:grid;gap:8px;color:#1f2933;font-weight:800}.nickname-field input,.battle-code-field input{min-height:44px;width:100%;padding:8px 10px;border:1px solid #c8c1b1;border-radius:8px;background:#fffaf0;color:#1f2933;font:inherit}.nickname-error,.battle-code-message{min-height:20px;color:#b75b6b;font-weight:800}.battle-code-message.is-ready{color:#0c4f42}.dialog-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.dialog-actions button:only-child{grid-column:1 / -1}.is-hidden{display:none}@keyframes result-pop{0%{opacity:0;transform:scale(.96)}to{opacity:1;transform:scale(1)}}@keyframes result-panel-fade{0%{opacity:0;transform:scale(.98)}to{opacity:1;transform:scale(1)}}@keyframes reveal-mask-fade{0%{opacity:1}to{opacity:0}}@keyframes level-explosion{0%{transform:scale(.86)}58%{transform:scale(1.08)}to{transform:scale(1)}}@keyframes emotion-line-in{0%{opacity:0;transform:translateY(8px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes light-shake{0%,to{transform:translate(0)}35%{transform:translate(-2px)}70%{transform:translate(2px)}}@keyframes result-shake{0%,to{transform:translate(0)}20%{transform:translate(-4px)}45%{transform:translate(4px)}70%{transform:translate(-3px)}}@keyframes extreme-shake{0%,to{transform:translate(0) rotate(0)}18%{transform:translate(-6px) rotate(-.6deg)}42%{transform:translate(6px) rotate(.6deg)}66%{transform:translate(-5px) rotate(-.4deg)}}@keyframes result-background-flash{0%,to{background:transparent}42%{background:#ffdc6952}}@media (prefers-reduced-motion: reduce){.result-card,.record-badge,.result-view.is-level-exploded .rating-text,.result-view.is-emotion-visible .emotion-message,.result-view[data-animation-type].is-level-exploded,.result-view[data-animation-type].is-level-exploded .result-card,.result-reveal-mask{animation:none}.result-reveal-mask{opacity:0}button,.shape-choice{transition:none}}@media (max-width: 380px){.home-title{font-size:48px}button{font-size:14px}.app-shell{padding-right:12px;padding-left:12px}.home-view{gap:12px}.home-subtitle{font-size:16px}.shape-selector-grid,.compact-selector .shape-selector-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.shape-selector{padding:10px}.battle-entry-card{grid-template-columns:1fr}}