@import url('https://fonts.googleapis.com/css2?family=Inter:wght@500;600;700;800;900&family=Noto+Sans+JP:wght@500;600;700;800&display=swap');
:root{--bg:#07080d;--surface:#10121a;--surface2:#171a24;--ink:#f5f7ff;--muted:#8f95a8;--line:#272b39;--accent:#8b7cff;--accent2:#53e7c5;--danger:#ff7896;--shadow:0 25px 70px rgba(0,0,0,.34)}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;min-height:100vh;background:radial-gradient(circle at 50% -10%,#242044 0,#0c0d14 38%,var(--bg) 75%);color:var(--ink);font-family:Inter,"Noto Sans JP",system-ui,sans-serif;overflow-x:hidden}
body:before{content:"";position:fixed;inset:0;pointer-events:none;opacity:.24;background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);background-size:32px 32px}
.ambient{position:fixed;border-radius:50%;filter:blur(70px);opacity:.18;pointer-events:none}
.ambient-a{width:260px;height:260px;background:var(--accent);left:-120px;top:25%}
.ambient-b{width:220px;height:220px;background:var(--accent2);right:-110px;bottom:12%}
button,input{font:inherit}button{cursor:pointer}.hidden{display:none!important}

/* パンくずリスト */
.breadcrumb { font-size: 11px; color: var(--muted); margin-bottom: 25px; font-weight: 600; letter-spacing: 0.05em; }
.breadcrumb a { color: var(--accent2); text-decoration: none; transition: opacity 0.2s; }
.breadcrumb a:hover { opacity: 0.8; text-decoration: underline; }
.breadcrumb .separator { margin: 0 6px; font-size: 9px; opacity: 0.6; }

.app-shell{position:relative;width:min(820px,calc(100% - 30px));margin:0 auto;padding:40px 0 42px}
.landing-hero{text-align:center; padding-top: 20px;}
.brand-mark{position:relative;width:72px;height:44px;margin:0 auto 20px;display:grid;place-items:center;transform:rotate(-8deg)}
.brand-mark:before{content:"";position:absolute;inset:1px 0;border:2px solid rgba(255,255,255,.75);border-radius:65% 35% 65% 35%/55% 55% 45% 45%;box-shadow:0 0 28px rgba(139,124,255,.25)}
.eye-orbit{position:absolute;width:27px;height:27px;border:1px solid var(--accent);border-radius:50%;animation:orbit 4s linear infinite}
.eye-core{width:8px;height:8px;border-radius:50%;background:var(--accent2);box-shadow:0 0 18px var(--accent2);animation:pulse 1.8s ease-in-out infinite}
.eyebrow{margin:0 0 10px;font-size:11px;font-weight:900;letter-spacing:.28em;color:var(--accent2)}
.jp-title{display:block; font-size:12px; color:var(--muted); letter-spacing:0.15em; margin-top:4px; font-weight:700;}
h1{margin:0;font-size:clamp(44px,9vw,78px);line-height:.92;letter-spacing:-.06em}h1 span{color:var(--accent)}
.hero-copy{margin:19px auto 25px;color:var(--muted);font-size:13px;line-height:1.85}
.start-button{border:0;border-radius:14px;padding:15px 32px;background:var(--ink);color:#090a0e;font-size:12px;font-weight:900;letter-spacing:.14em;box-shadow:0 12px 35px rgba(255,255,255,.1);transition:.2s}
.start-button:hover{transform:translateY(-3px);box-shadow:0 16px 42px rgba(139,124,255,.2)}
.start-button span{margin-left:12px}

.landing-games{margin:55px auto 40px;width:min(560px,100%);display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.landing-game-card{padding:13px 15px;border:1px solid var(--line);border-radius:14px;background:rgba(16,18,26,.65);display:grid;grid-template-columns:35px 1fr;grid-template-rows:auto auto;text-align:left; cursor:pointer; transition:all 0.2s ease;}
.landing-game-card:hover{transform:translateY(-3px); border-color:var(--accent); background:rgba(23,26,36,.8); box-shadow:0 8px 25px rgba(139,124,255,.15);}
.landing-game-card b{grid-row:1/3;color:var(--accent2);font-size:9px;padding-top:2px}
.landing-game-card strong{font-size:10px;letter-spacing:.08em}
.landing-game-card small{font-size:8px;color:var(--muted);margin-top:4px}
.landing-footer{text-align:center;color:#5d6272;font-size:8px;letter-spacing:.16em}

.game-shell{position:relative;width:min(900px,calc(100% - 30px));margin:0 auto;padding:24px 0 42px}
.game-topbar{height:36px;display:flex;align-items:center;justify-content:space-between;color:#666c7e;font-size:8px;font-weight:900;letter-spacing:.16em}
.back-button{border:1px solid var(--line);background:rgba(16,18,26,.75);color:var(--muted);border-radius:9px;padding:7px 10px;font-size:8px;font-weight:900}
.back-button:hover{color:var(--ink);border-color:#44495a}
.game-select{display:grid;grid-template-columns:repeat(6,1fr);gap:7px;margin:12px 0}
.game-tab{border:1px solid var(--line);background:rgba(16,18,26,.8);border-radius:13px;padding:11px 5px;display:grid;gap:4px;color:var(--muted);transition:.2s ease;box-shadow:inset 0 1px rgba(255,255,255,.04)}
.game-tab:hover{transform:translateY(-2px);border-color:#41465a}
.game-tab.active{color:var(--ink);border-color:rgba(139,124,255,.65);background:linear-gradient(135deg,rgba(139,124,255,.16),rgba(83,231,197,.06));box-shadow:0 8px 35px rgba(139,124,255,.12)}
.tab-icon{font-size:19px;color:var(--accent2);line-height:1}
.game-tab strong{font-size:9px;letter-spacing:.1em}
.game-tab small{font-size:7px;color:var(--muted)}
.game-card,.score-panel{background:linear-gradient(145deg,rgba(19,21,31,.97),rgba(11,13,20,.97));border:1px solid var(--line);border-radius:24px;box-shadow:var(--shadow)}
.game-card{padding:clamp(20px,5vw,34px);min-height:540px;position:relative;overflow:hidden}
.game-card:before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:linear-gradient(90deg,transparent,var(--accent),transparent);opacity:.7}
.game-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}
.game-kicker{margin:0 0 4px;color:var(--accent2);font-size:9px;font-weight:900;letter-spacing:.16em}
.game-head h2{margin:0;font-size:28px;letter-spacing:-.04em}
.round{padding:7px 10px;background:#181b26;border:1px solid #2a2e3d;border-radius:999px;font-size:9px;font-weight:900;color:var(--muted);white-space:nowrap}
#gameContent{min-height:325px;display:grid;place-items:center;padding:23px 0}
.game-instruction{text-align:center;margin:0 0 17px;color:var(--muted);font-size:12px}
.game-actions{display:flex;justify-content:center;gap:8px;flex-wrap:wrap}
.primary-button,.ghost-button,.share-button,.save-button,.result-button{border-radius:12px;padding:12px 18px;font-size:10px;font-weight:900;transition:.18s ease}
.primary-button{border:0;background:var(--ink);color:#090a0e;min-width:132px}
.primary-button:hover,.share-button:hover,.ghost-button:hover,.save-button:hover,.result-button:hover{transform:translateY(-2px)}
.primary-button span{margin-left:7px}
.ghost-button{background:rgba(139,124,255,.14);border:1px solid rgba(139,124,255,.3);color:#b9b1ff}
.share-button{background:rgba(83,231,197,.1);border:1px solid rgba(83,231,197,.3);color:var(--accent2)}
.save-button{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);color:var(--ink)}

.feedback{min-height:70px;padding-top:12px;text-align:center;font-weight:800}
.feedback .score{display:block;color:var(--accent2);font-size:25px;letter-spacing:-.04em;animation:pop .32s ease-out}
.feedback .rank{display:block;margin-top:2px;font-size:10px;letter-spacing:.15em;color:var(--ink);text-transform:uppercase}
.feedback .detail{display:block;margin-top:3px;color:var(--muted);font-size:9px;font-weight:500}
.perfect-burst{padding:8px 0;animation:perfectIn .45s cubic-bezier(.2,.9,.2,1)}
.perfect-burst span{display:block;color:var(--accent2);font-size:28px;text-shadow:0 0 22px rgba(83,231,197,.6)}
.perfect-burst strong{display:block;font-size:13px;letter-spacing:.12em;margin-top:2px}
.perfect-burst small{display:block;color:var(--muted);font-size:8px;margin-top:5px}

.color-stage,.angle-stage,.center-stage,.length-stage,.difference-stage,.area-stage{width:min(100%,560px)}
.color-swatches{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:16px}
.swatch{min-height:145px;border-radius:17px;border:1px solid rgba(255,255,255,.08);display:grid;place-items:end center;padding:12px}
.swatch-label{background:rgba(8,9,13,.72);color:#fff;border:1px solid rgba(255,255,255,.13);backdrop-filter:blur(8px);border-radius:999px;padding:5px 9px;font-size:8px;font-weight:900;letter-spacing:.1em}
.picker-label{display:flex;justify-content:space-between;color:var(--muted);font-size:8px;font-weight:900;letter-spacing:.1em;margin:0 2px 6px}
.picker-label span{color:var(--ink);font-variant-numeric:tabular-nums}
.color-picker-wrap{display:flex;justify-content:center}
.color-picker{width:100%;height:56px;padding:3px;border-radius:13px;border:1px solid #3b4051;background:#0c0e14;cursor:pointer}
.color-picker::-webkit-color-swatch{border:0;border-radius:9px}
.color-picker::-moz-color-swatch{border:0;border-radius:9px}
.color-mode{display:flex;justify-content:center;margin:7px 0 0;color:var(--muted);font-size:8px}

.angle-compare{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:18px}
.angle-reference,.angle-answer-board{position:relative;aspect-ratio:1.25;border-radius:17px;background:#0c0e14;border:1px solid #262a37;overflow:hidden}
.angle-reference:before,.angle-answer-board:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent 49.8%,rgba(255,255,255,.04) 50%,transparent 50.2%),linear-gradient(0deg,transparent 49.8%,rgba(255,255,255,.04) 50%,transparent 50.2%)}
.angle-reference>span,.angle-answer-board>span{position:absolute;top:10px;left:12px;font-size:7px;font-weight:900;letter-spacing:.12em;color:var(--muted);z-index:3}
.angle-reference i,.angle-answer-board .angle-center{position:absolute;left:50%;top:50%;width:7px;height:7px;transform:translate(-50%,-50%);border-radius:50%;background:var(--accent2);box-shadow:0 0 12px var(--accent2)}
.angle-reference b{position:absolute;right:10px;bottom:9px;font-size:9px;color:var(--muted)}
.angle-mini-line{position:absolute;left:50%;top:50%;width:36%;height:3px;transform-origin:0 50%;border-radius:99px;background:var(--accent2);opacity:.35;box-shadow:0 0 12px rgba(83,231,197,.3)}
.angle-line{position:absolute;left:50%;top:50%;width:36%;height:3px;transform-origin:0 50%;border-radius:99px;background:var(--ink);box-shadow:0 0 12px rgba(255,255,255,.25)}
.angle-controls{text-align:center}
.angle-controls>strong{display:block;font-size:18px;margin-bottom:7px}
.angle-slider{width:100%;accent-color:var(--accent)}
.angle-values{display:flex;justify-content:space-between;color:var(--muted);font-size:8px;margin-top:5px}
.angle-values strong{color:var(--ink);font-size:11px}

.center-stage{text-align:center}
.center-board{position:relative;width:min(100%,520px);aspect-ratio:1.7;margin:0 auto 15px;border-radius:18px;background:radial-gradient(circle at 50% 50%,rgba(139,124,255,.06),transparent 50%),#0c0e14;border:1px solid #262a37;overflow:hidden;cursor:crosshair}
.center-board:before,.center-board:after{content:"";position:absolute;background:rgba(255,255,255,.045);pointer-events:none}
.center-board:before{width:1px;height:100%;left:50%;top:0}
.center-board:after{height:1px;width:100%;top:50%;left:0}
.center-shape{position:absolute;transform:translate(-50%,-50%);filter:drop-shadow(0 15px 25px rgba(0,0,0,.28));animation:floatShape 3s ease-in-out infinite}
.center-cross{position:absolute;width:18px;height:18px;transform:translate(-50%,-50%);pointer-events:none;z-index:3;animation:marker .35s ease-out}
.center-cross:before,.center-cross:after{content:"";position:absolute;background:var(--accent2);box-shadow:0 0 8px rgba(83,231,197,.7)}
.center-cross:before{width:18px;height:2px;top:8px;left:0}
.center-cross:after{width:2px;height:18px;top:0;left:8px}
.center-stage small{color:var(--muted);font-size:9px}

.length-board{height:190px;position:relative;border-radius:18px;background:#0c0e14;border:1px solid #262a37;margin-bottom:17px;display:flex;flex-direction:column;justify-content:center;gap:34px;overflow:hidden}
.length-board:before{content:"";position:absolute;left:8%;right:8%;top:50%;height:1px;background:rgba(255,255,255,.05)}
.length-reference,.length-answer{height:6px;border-radius:99px;position:relative;margin-left:8%;max-width:84%;transition:width .08s}
.length-reference{background:var(--accent2);opacity:.32}
.length-answer{background:var(--ink)}
.length-reference span,.length-answer span{position:absolute;left:0;top:-18px;font-size:7px;letter-spacing:.12em;font-weight:900;color:var(--muted);white-space:nowrap}
.length-answer span{color:var(--ink)}

.difference-stage{text-align:center}
.diff-grid{width:min(410px,94%);margin:0 auto 13px;display:grid;gap:5px}
.diff-1{grid-template-columns:repeat(4,1fr)}
.diff-2{grid-template-columns:repeat(5,1fr);gap:4px}
.diff-3{grid-template-columns:repeat(6,1fr);gap:3px}
.diff-tile{aspect-ratio:1;border:1px solid rgba(255,255,255,.035);border-radius:8px;transition:transform .12s,filter .12s;padding:0}
.diff-tile:hover{transform:scale(1.05);filter:brightness(1.12)}
.difference-hint{font-size:8px;color:var(--muted)}

.area-stage{text-align:center}
.area-layout{display:grid;grid-template-columns:1.2fr .8fr;gap:14px;align-items:center}
.area-reference{aspect-ratio:1;border:1px solid #262a37;border-radius:17px;background:#0c0e14;display:grid;place-items:center;overflow:hidden}
.area-shape{background:linear-gradient(135deg,var(--accent),#5d4fe1);box-shadow:0 0 30px rgba(139,124,255,.16)}
.area-answer{display:grid;gap:11px;text-align:left}
.area-answer strong{font-size:27px}
.area-answer small{color:var(--muted);font-size:9px}
.area-range{width:100%;accent-color:var(--accent)}

.score-panel{margin-top:12px;padding:20px}
.score-title{display:flex;justify-content:space-between;align-items:center;margin-bottom:11px;font-size:10px;font-weight:900;letter-spacing:.12em}
.score-hint{color:var(--muted);font-size:8px;letter-spacing:.05em}
.score-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}
.score-item{background:#0d0f16;border:1px solid #20232f;border-radius:13px;padding:12px;display:grid;gap:7px}
.score-item span{font-size:8px;color:var(--muted);font-weight:900}
.score-item strong{font-size:18px;font-variant-numeric:tabular-nums}
.total-score{margin-top:7px;padding:15px;border-radius:14px;background:linear-gradient(100deg,#171927,#10121a);border:1px solid #2a2d3d;display:flex;justify-content:space-between;align-items:center}
.total-score span{font-size:9px;font-weight:900;letter-spacing:.13em;color:var(--muted)}
.total-score strong{font-size:24px;color:var(--accent2)}
.result-button{width:100%;background:rgba(139,124,255,0.15);border:1px solid rgba(139,124,255,0.4);color:#b9b1ff;margin-top:15px;}
.result-button:hover{background:rgba(139,124,255,0.25);}
footer{padding:25px 0 0;text-align:center;color:#5d6272;font-size:8px;letter-spacing:.16em}

/* リザルト画面用の追加CSS */
.result-shell { position: relative; width: min(480px, calc(100% - 30px)); margin: 0 auto; padding: 40px 0; text-align: center; }
.result-card { background: linear-gradient(145deg, rgba(19,21,31,.97), rgba(11,13,20,.97)); border: 1px solid var(--line); border-radius: 24px; padding: 40px 30px; box-shadow: var(--shadow); margin-bottom: 20px; }
.result-brand { font-size: 11px; font-weight: 900; color: var(--accent2); letter-spacing: 0.15em; }
.result-kicker { font-size: 10px; color: var(--muted); margin: 6px 0 25px; letter-spacing: 0.05em; font-weight: 600;}
.result-total { font-size: 72px; font-weight: 900; color: var(--ink); line-height: 1; letter-spacing: -0.04em; }
.result-rank { font-size: 14px; color: var(--accent); font-weight: 900; margin-top: 15px; letter-spacing: 0.1em; }
.result-divider { height: 1px; background: linear-gradient(90deg, transparent, var(--line), transparent); margin: 25px 0; }
.result-highlight { display: flex; justify-content: space-between; padding: 0 10px; }
.result-highlight div { text-align: left; }
.result-highlight span { display: block; font-size: 9px; color: var(--muted); font-weight: 800; letter-spacing: 0.1em; margin-bottom: 5px; }
.result-highlight strong { font-size: 18px; color: var(--ink); }
.result-actions { display: flex; flex-direction: column; gap: 10px; align-items: center; }

@keyframes pulse{0%,100%{transform:scale(.8);opacity:.65}50%{transform:scale(1.3);opacity:1}}
@keyframes orbit{to{transform:rotate(360deg)}}
@keyframes pop{0%{transform:scale(.75);opacity:0}100%{transform:scale(1);opacity:1}}
@keyframes marker{0%{transform:translate(-50%,-50%) scale(1.8);opacity:0}100%{transform:translate(-50%,-50%) scale(1);opacity:1}}
@keyframes floatShape{0%,100%{filter:drop-shadow(0 15px 25px rgba(0,0,0,.28));transform:translate(-50%,-50%)}50%{filter:drop-shadow(0 20px 28px rgba(0,0,0,.38));transform:translate(-50%,-53%)}}
@keyframes perfectIn{0%{transform:scale(.55);opacity:0;filter:blur(5px)}55%{transform:scale(1.12)}100%{transform:scale(1);opacity:1;filter:none}}

@media(max-width:760px){.game-select{grid-template-columns:repeat(3,1fr)}}
@media(max-width:560px){.app-shell{width:min(100% - 20px,820px);padding-top:24px}.landing-games{margin-top:42px}.game-shell{width:min(100% - 20px,900px);padding-top:12px}.game-select{grid-template-columns:repeat(2,1fr);gap:6px}.game-tab{border-radius:12px;padding:10px 5px}.game-tab small{display:none}.game-card{border-radius:20px;padding:19px 14px}.game-head{align-items:center}.game-head h2{font-size:24px}.swatch{min-height:118px}.color-picker{height:52px}.angle-compare{gap:7px}.area-layout{grid-template-columns:1fr}.area-reference{max-width:250px;width:100%;margin:auto}.length-board{height:170px}.score-grid{grid-template-columns:repeat(2,1fr)}.landing-games>div{padding:11px}}