*{box-sizing:border-box}
html,body{margin:0;height:100%;font-family:system-ui,-apple-system,'Noto Sans JP',sans-serif;color:#fff}
body{background:#06070c center/cover fixed no-repeat}
a{text-decoration:none;color:inherit}
#app{min-height:100%;display:flex;align-items:center;justify-content:center;padding:18px}
.panel{width:min(100vw,1280px);min-height:min(100vh - 36px, 900px);border-radius:24px;overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,.55);background:rgba(8,10,16,.78);border:1px solid rgba(255,255,255,.1);backdrop-filter:blur(8px)}
.topbar{display:flex;justify-content:space-between;align-items:center;padding:14px 18px;background:rgba(0,0,0,.3)}
.brand{font-weight:1000;font-size:clamp(22px,3.4vw,42px);color:#f3f5ff;text-shadow:0 0 12px rgba(180,200,255,.25)}
.btn,.iconBtn{background:rgba(0,0,0,.48);color:#fff;border:1px solid rgba(255,255,255,.16);border-radius:999px;padding:.7em 1.1em;font-weight:800;cursor:pointer}
.btn:hover,.iconBtn:hover{background:rgba(255,255,255,.1)}
.hero{position:relative;padding:28px 24px 20px;min-height:250px;background-size:cover;background-position:center}
.hero::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.18),rgba(0,0,0,.68))}
.heroInner{position:relative;z-index:1;max-width:760px}
.hero h1{margin:.15em 0;font-size:clamp(28px,5vw,68px);line-height:1.02}
.hero p{font-size:clamp(16px,2vw,24px);font-weight:700;max-width:900px}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;padding:18px}
.card{position:relative;min-height:220px;border-radius:18px;overflow:hidden;background-size:cover;background-position:center;display:flex;align-items:flex-end;box-shadow:0 10px 30px rgba(0,0,0,.32);transition:transform .18s ease}
.card:hover{transform:translateY(-4px)}
.card::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.05),rgba(0,0,0,.78))}
.cardContent{position:relative;z-index:1;padding:14px}
.cardTitle{font-size:22px;font-weight:1000}
.cardText{font-size:14px;opacity:.95}
.playerWrap{position:relative;aspect-ratio:16/9;background:#0c1220}
#bg{position:absolute;inset:0;background-size:cover;background-position:center;animation:bgMove 8s ease-in-out infinite alternate}
#bg.danger,#bg.boss,#bg.enemy,#bg.battle{animation:bgShake .22s ease-in-out infinite alternate}
#bg.magic{animation:bgMove .18s ease-in-out infinite alternate}
#shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.12),rgba(0,0,0,.08) 55%,rgba(0,0,0,.58))}
@keyframes bgMove{from{transform:scale(1.06) translateX(-1.2%)}to{transform:scale(1.14) translateX(1.2%)}}
@keyframes bgShake{from{transform:scale(1.1) translate(-4px,2px)}to{transform:scale(1.14) translate(4px,-2px)}}
#overlayTop{position:absolute;left:0;right:0;top:0;padding:10px 14px;display:flex;justify-content:space-between;align-items:center;z-index:4}
#progressWrap{height:8px;border-radius:999px;background:rgba(255,255,255,.2);overflow:hidden;width:min(55vw,560px)}
#progress{height:100%;width:0;background:linear-gradient(90deg,#d7dbff,#7f92ff)}
.controls{display:flex;gap:8px}
#portrait{position:absolute;left:2.8%;bottom:14%;width:min(31%,340px);max-height:72%;object-fit:contain;filter:drop-shadow(0 14px 24px rgba(0,0,0,.5));z-index:2;animation:charBob .5s ease-in-out infinite alternate;transform-origin:50% 85%}
#portrait.run{animation:charRun .17s ease-in-out infinite alternate}
#portrait.talk{animation:charTalk .18s ease-in-out infinite alternate}
@keyframes charBob{from{transform:translateY(2px)}to{transform:translateY(-4px)}}
@keyframes charRun{from{transform:translate(-6px,3px) rotate(-1deg)}to{transform:translate(7px,-4px) rotate(1deg)}}
@keyframes charTalk{from{transform:translateY(1px) scale(1)}to{transform:translateY(-2px) scale(1.03)}}
#nameTag{position:absolute;left:4%;bottom:27%;z-index:3;background:#101522dd;border-left:6px solid #c8d1ff;padding:.35em .8em;border-radius:10px;font-size:clamp(16px,2vw,28px);font-weight:900}
#subtitle{position:absolute;left:4%;right:4%;bottom:4%;z-index:3;background:rgba(0,0,0,.62);border:1px solid rgba(255,255,255,.15);border-radius:16px;padding:.8em 1em;font-size:clamp(18px,2.5vw,34px);font-weight:900;line-height:1.35;text-shadow:0 2px 4px #000}
#fx{position:absolute;inset:0;pointer-events:none;z-index:2;overflow:hidden}
.flash{position:absolute;inset:0;background:rgba(255,255,255,.75);animation:flash .4s ease-out forwards}
@keyframes flash{from{opacity:.75}to{opacity:0}}
.fog{position:absolute;left:-10%;bottom:0;width:120%;height:40%;background:radial-gradient(circle at 20% 50%,rgba(255,255,255,.22),transparent 38%),radial-gradient(circle at 60% 60%,rgba(255,255,255,.15),transparent 35%),radial-gradient(circle at 85% 40%,rgba(255,255,255,.17),transparent 28%);animation:fog 6s linear infinite alternate;opacity:.85}
@keyframes fog{from{transform:translateX(-2%)}to{transform:translateX(2%)}}
.ring{position:absolute;left:62%;top:34%;width:90px;height:90px;border-radius:50%;border:8px solid rgba(180,200,255,.65);box-shadow:0 0 35px rgba(180,200,255,.7);animation:ring 1s ease-out forwards}
@keyframes ring{from{transform:scale(.2);opacity:1}to{transform:scale(2.5);opacity:0}}
.infoArea{padding:14px 18px 20px}
.startOverlay{position:absolute;inset:0;z-index:5;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:24px;background:linear-gradient(rgba(8,16,28,.56),rgba(0,0,0,.48))}
.startOverlay h1{font-size:clamp(40px,7vw,88px);margin:.2em;color:#f3f5ff;text-shadow:0 0 18px rgba(180,200,255,.35),0 10px 24px rgba(0,0,0,.55)}
.startOverlay p{font-size:clamp(18px,2.5vw,30px);font-weight:800;max-width:900px}
.playBtn{font-size:clamp(22px,3vw,34px);padding:.7em 1.4em;background:#cfd7ff;color:#131720;border:0;border-radius:999px;font-weight:1000;cursor:pointer;box-shadow:0 8px 0 #6574a9}
.note{font-size:13px;opacity:.82}
.navLinks{display:flex;gap:10px;flex-wrap:wrap}
@media(max-width:800px){#portrait{width:38%;left:0.5%}#nameTag{bottom:31%}}