*{box-sizing:border-box}
html,body{width:100%;height:100%;margin:0;overflow:hidden;background:#eaf5ff;color:#13253c;font-family:"Yu Gothic UI","Hiragino Sans",Meiryo,sans-serif}
button,input,select{font:inherit}
button{cursor:pointer}
.stage{position:relative;isolation:isolate;width:100%;height:100%;min-height:100dvh;overflow:hidden;display:grid;place-items:end center;background:radial-gradient(circle at 50% 19%,#fff 0 8%,#e9f7ff 33%,#cde9ff 59%,#b4d9f0 100%);touch-action:manipulation;user-select:none;-webkit-user-select:none}
.scene{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.scene::before{content:"";position:absolute;inset:auto -12% -18%;height:47%;border-radius:50% 50% 0 0;background:linear-gradient(180deg,#9fd7b7 0%,#6fbd93 70%,#54a87d 100%);box-shadow:inset 0 18px 35px #ffffff50}
.scene::after{content:"";position:absolute;left:50%;bottom:-19%;width:min(85vw,920px);height:56%;transform:translateX(-50%);border-radius:50% 50% 0 0;background:linear-gradient(180deg,#d6a56a,#bb7b4d 66%,#9f603f);opacity:.88;box-shadow:0 -8px 28px #93593738}
.glow{position:absolute;left:50%;top:47%;width:min(84vmin,740px);aspect-ratio:1;border-radius:50%;transform:translate(-50%,-50%);background:radial-gradient(circle,#fff 0 27%,#ffffffa8 45%,#74c4f033 62%,transparent 70%);filter:blur(1px)}
.avatar-frame{position:relative;z-index:2;width:min(72vw,660px);height:min(94dvh,980px);display:flex;align-items:flex-end;justify-content:center;transform-origin:50% 100%;animation:breathe 4.8s ease-in-out infinite}
.avatar-image{display:block;width:100%;height:100%;object-fit:contain;object-position:center bottom;filter:drop-shadow(0 28px 18px #1536523d);pointer-events:none;-webkit-user-drag:none}
.voice-ring{position:absolute;left:50%;top:43%;width:min(64vmin,570px);aspect-ratio:1;border:5px solid #1879ba2b;border-radius:50%;transform:translate(-50%,-50%) scale(.92);opacity:0}
.ring-two{width:min(76vmin,690px);border-width:3px}
.listening .voice-ring{animation:listen-ring 2s ease-out infinite}
.listening .ring-two{animation-delay:.72s}
.talking .voice-ring{border-color:#ff993f47;animation:talk-ring .85s ease-out infinite}
.talking .ring-two{animation-delay:.33s}
.talking .avatar-frame{animation:talk-bob .58s ease-in-out infinite}
.start-surface{position:absolute;inset:0;z-index:8;width:100%;height:100%;border:0;padding:0;background:transparent;color:transparent;-webkit-tap-highlight-color:transparent}
.waiting .avatar-frame::after{content:"";position:absolute;left:50%;top:44%;width:64%;aspect-ratio:1;border-radius:50%;transform:translate(-50%,-50%);border:4px solid #fff9;box-shadow:0 0 0 8px #258ec11a;animation:ready-pulse 2.2s ease-in-out infinite;pointer-events:none}
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
.admin-backdrop{position:fixed;inset:0;z-index:30;display:flex;align-items:center;justify-content:center;padding:18px;background:#071828c9;user-select:text;-webkit-user-select:text}
.admin-panel{width:min(94vw,680px);max-height:92dvh;overflow:auto;border:1px solid #d8e5ee;border-radius:24px;background:#f8fcff;color:#17324a;padding:22px;box-shadow:0 24px 80px #00101f73}
.admin-panel h1{margin:0 0 6px;font-size:25px}
.admin-state,.admin-note{margin:0 0 16px;color:#516b7d;font-size:13px;line-height:1.6}
.settings-form{display:grid;grid-template-columns:1fr 1fr auto;gap:10px;align-items:end;margin-bottom:16px}
.settings-form label{display:flex;flex-direction:column;gap:5px;font-weight:800;font-size:13px}
.settings-form input,.settings-form select{width:100%;min-height:44px;border:1px solid #b8cedd;border-radius:10px;background:#fff;color:#17324a;padding:8px 10px}
.admin-panel button{min-height:43px;border:1px solid #8ab3ca;border-radius:11px;background:#e4f4fc;color:#174866;padding:8px 13px;font-weight:800;box-shadow:0 2px 0 #aac7d6}
.admin-panel button:active{transform:translateY(1px);box-shadow:none}
.admin-actions{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0}
.admin-panel .danger{background:#fff0f0;color:#8c3030;border-color:#e4abab}
.admin-panel .close{margin-left:auto;background:#244b65;color:#fff}
.score-list{display:grid;gap:7px;margin:14px 0;padding:12px;border-radius:15px;background:#edf6fb}
.score-row{display:flex;justify-content:space-between;align-items:center;gap:9px;min-height:44px}
.score-row span:last-child{display:flex;gap:5px}
.score-row button{min-width:45px;min-height:36px;padding:5px 8px}
@keyframes breathe{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-7px) scale(1.006)}}
@keyframes talk-bob{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-9px) scale(1.012)}}
@keyframes ready-pulse{0%,100%{opacity:.2;transform:translate(-50%,-50%) scale(.9)}50%{opacity:.75;transform:translate(-50%,-50%) scale(1.03)}}
@keyframes listen-ring{0%{opacity:.5;transform:translate(-50%,-50%) scale(.72)}100%{opacity:0;transform:translate(-50%,-50%) scale(1.18)}}
@keyframes talk-ring{0%{opacity:.65;transform:translate(-50%,-50%) scale(.82)}100%{opacity:0;transform:translate(-50%,-50%) scale(1.08)}}
@media(max-width:700px){.avatar-frame{width:min(96vw,610px);height:min(91dvh,880px)}.settings-form{grid-template-columns:1fr}.admin-panel{padding:17px}.score-row{align-items:flex-start;flex-direction:column}.admin-panel .close{margin-left:0}}
@media(max-height:580px) and (orientation:landscape){.avatar-frame{width:min(58vw,520px);height:96dvh}.scene::before{height:38%}.scene::after{width:63vw}.admin-panel{max-height:94dvh}}
@media(prefers-reduced-motion:reduce){.avatar-frame,.voice-ring,.waiting .avatar-frame::after{animation:none!important}}