:root{
  --bg0:#0b0f14; --bg1:#121821; --card:#1a212c; --card2:#202a37; --line:#2c3846;
  --tx:#dce6f1; --dim:#8fa2b5; --amber:#f5a524; --green:#34d399; --red:#f66a7a; --blue:#6ea8fe;
}
*{box-sizing:border-box; margin:0; padding:0;}
html,body{background:linear-gradient(180deg,var(--bg0),var(--bg1)); color:var(--tx);
  font-family:"Hiragino Kaku Gothic ProN","Yu Gothic UI","Meiryo",system-ui,sans-serif; min-height:100%;}
#app{max-width:1020px; margin:0 auto; padding:10px 14px 40px;}
header{display:flex; align-items:center; gap:14px; padding:8px 2px; border-bottom:1px solid var(--line); margin-bottom:12px;}
#logo{font-weight:800; font-size:19px; letter-spacing:1px; color:var(--amber); white-space:nowrap;}
#stepper{display:flex; gap:6px; flex:1; flex-wrap:wrap;}
.step{font-size:12px; padding:4px 12px; border-radius:99px; border:1px solid var(--line); color:var(--dim); background:var(--card);}
.step.cur{color:#111; background:var(--amber); border-color:var(--amber); font-weight:700;}
.step.done{color:var(--green); border-color:var(--green);}
#muteBtn{background:var(--card); border:1px solid var(--line); color:var(--tx); border-radius:8px; padding:5px 10px; cursor:pointer; font-size:15px;}
.scene{display:none;}
.scene.active{display:block; animation:fadein .35s;}
@keyframes fadein{from{opacity:0; transform:translateY(6px);} to{opacity:1;}}
h1{font-size:34px; letter-spacing:2px;}
h2{font-size:20px; margin-bottom:8px; color:var(--amber);}
.sub{color:var(--dim); font-size:13px; line-height:1.7;}
button.btn{background:var(--amber); color:#161206; border:none; border-radius:10px; padding:10px 22px;
  font-size:15px; font-weight:800; cursor:pointer; letter-spacing:1px; transition:transform .08s, filter .15s;}
button.btn:hover{filter:brightness(1.1);} button.btn:active{transform:scale(.96);}
button.btn:disabled{background:#3a4452; color:#77839a; cursor:not-allowed;}
button.btn.ghost{background:var(--card2); color:var(--tx); border:1px solid var(--line);}
button.btn.small{padding:6px 14px; font-size:13px;}
.card{background:var(--card); border:1px solid var(--line); border-radius:14px; padding:14px;}

/* ---- title ---- */
#sc-title{text-align:center; padding-top:34px;}
#titleArt{font-size:56px; line-height:1.2; margin:10px 0; filter:drop-shadow(0 0 18px rgba(245,165,36,.35));}
#titleCatch{color:var(--dim); margin:6px 0 22px; line-height:1.9;}
.modeBadges{display:flex; gap:10px; justify-content:center; margin:20px 0 30px; flex-wrap:wrap;}
.mb{background:var(--card); border:1px solid var(--line); border-radius:12px; padding:10px 16px; font-size:13px;}
.mb b{color:var(--amber); display:block; font-size:14px; margin-bottom:3px;}

/* ---- story ---- */
#sc-story{padding-top:30px;}
#storyBox{max-width:640px; margin:0 auto; min-height:300px; background:var(--card); border:1px solid var(--line);
  border-radius:14px; padding:30px 34px; font-size:16px; line-height:2.2; cursor:pointer;}
#storyBox p{margin-bottom:10px; min-height:1em;}
#storyHint{text-align:center; color:var(--dim); font-size:12px; margin-top:10px;}
#storySkipWrap{text-align:center; margin-top:16px;}

/* ---- design ---- */
#designWrap{display:grid; grid-template-columns:225px 1fr 250px; gap:12px; align-items:start;}
.chip{display:flex; gap:8px; align-items:center; background:var(--card2); border:1px solid var(--line);
  border-radius:10px; padding:7px 9px; margin-bottom:7px; cursor:pointer; user-select:none;}
.chip:hover{border-color:var(--amber);}
.chip.sel{border-color:var(--amber); box-shadow:0 0 0 2px rgba(245,165,36,.35);}
.chip.used{opacity:.32; cursor:default;}
.chip .ic{font-size:21px;}
.chip .nm{font-size:13px; font-weight:700;}
.chip .rq{font-size:10.5px; color:var(--dim);}
#dGrid{display:grid; grid-template-columns:repeat(5,78px); grid-template-rows:repeat(4,78px); gap:6px;
  justify-content:center; background:var(--card); border:1px solid var(--line); border-radius:14px; padding:16px;}
.cell{border:1.5px dashed #3a4756; border-radius:10px; display:flex; flex-direction:column; align-items:center;
  justify-content:center; cursor:pointer; font-size:11px; color:var(--dim); background:rgba(255,255,255,.015);}
.cell:hover{border-color:var(--amber);}
.cell.occ{border-style:solid; border-color:#54657a; background:var(--card2); color:var(--tx);}
.cell.occ .ic{font-size:26px;} .cell.occ .nm{font-size:10px; margin-top:2px;}
.cell.bad{border-color:var(--red);}
#gridEdgeNote{display:flex; justify-content:space-between; max-width:450px; margin:6px auto 0; color:var(--dim); font-size:11px;}
#checkList{font-size:12.5px; line-height:2;}
#checkList .ok{color:var(--green);} #checkList .ng{color:var(--dim);}
#scorePrev{font-size:14px; margin:10px 0; padding:8px; background:var(--card2); border-radius:10px; text-align:center;}
#scorePrev b{color:var(--amber); font-size:22px;}
.sizeRow{display:flex; gap:10px; margin-bottom:14px;}
.sizeCard{flex:1; background:var(--card); border:1.5px solid var(--line); border-radius:12px; padding:10px 12px; cursor:pointer; font-size:12px; line-height:1.8;}
.sizeCard.sel{border-color:var(--amber); box-shadow:0 0 0 2px rgba(245,165,36,.3);}
.sizeCard b{font-size:14px; color:var(--amber);}
.dBtns{display:flex; flex-direction:column; gap:8px; margin-top:10px;}

/* ---- build ---- */
#buildWrap{display:flex; gap:14px; align-items:flex-start; justify-content:center; flex-wrap:wrap;}
#bCanvas{background:#0d141d; border:1px solid var(--line); border-radius:14px; cursor:crosshair;}
#bSide{width:200px;}
#bSide .qrow{display:flex; justify-content:space-between; font-size:12.5px; padding:4px 2px; border-bottom:1px dashed #2b3644;}
#bSide .qv{font-weight:700;}
#bProg{font-size:13px; color:var(--dim); margin:8px 0;}

/* ---- operate ---- */
#opTop{display:flex; gap:14px; align-items:center; flex-wrap:wrap; background:var(--card); border:1px solid var(--line);
  border-radius:12px; padding:8px 14px; margin-bottom:10px; font-size:14px;}
#opTop .kpi b{font-size:17px;}
#opTop .sep{color:#37455a;}
#dayBarWrap{flex:1; min-width:80px; height:8px; background:#26313f; border-radius:99px; overflow:hidden;}
#dayFill{height:100%; width:0%; background:var(--amber);}
#opGrid{display:grid; grid-template-columns:1fr 1fr 1.1fr; gap:10px;}
.panel{background:var(--card); border:1px solid var(--line); border-radius:12px; padding:12px;}
.panel h3{font-size:13px; color:var(--dim); letter-spacing:1px; margin-bottom:8px; border-bottom:1px solid var(--line); padding-bottom:5px;}
.bigNum{font-size:30px; font-weight:800; line-height:1.1;}
.unit{font-size:12px; color:var(--dim); font-weight:400;}
.gauge{position:relative; height:16px; background:#26313f; border-radius:99px; margin:8px 0 2px; overflow:hidden;}
.gauge .band{position:absolute; top:0; bottom:0; background:rgba(52,211,153,.28);}
.gauge .mark{position:absolute; top:-2px; bottom:-2px; width:4px; background:#fff; border-radius:2px; transition:left .2s;}
.gauge .fillbar{position:absolute; top:0; bottom:0; left:0; background:var(--blue); border-radius:99px;}
.gLabel{display:flex; justify-content:space-between; font-size:10.5px; color:var(--dim);}
.sliderRow{margin:9px 0 2px; font-size:12.5px;}
.sliderRow input[type=range]{width:100%; accent-color:var(--amber);}
.sliderRow .sv{float:right; color:var(--amber); font-weight:700;}
.statusBadge{display:inline-block; padding:3px 12px; border-radius:99px; font-size:12.5px; font-weight:700;}
.st-run{background:rgba(52,211,153,.15); color:var(--green); border:1px solid var(--green);}
.st-stop{background:rgba(246,106,122,.15); color:var(--red); border:1px solid var(--red);}
#flame{font-size:38px; display:inline-block; animation:flick .5s infinite alternate; transform-origin:bottom center;}
@keyframes flick{from{transform:scale(1) rotate(-2deg);} to{transform:scale(1.12) rotate(2deg);}}
#opLog{height:150px; overflow-y:auto; font-size:11.5px; line-height:1.75; background:#131a24; border:1px solid var(--line);
  border-radius:10px; padding:8px 10px; margin-top:10px;}
#opLog .lg-warn{color:var(--red);} #opLog .lg-good{color:var(--green);} #opLog .lg-money{color:var(--amber);}
.mrow{display:flex; justify-content:space-between; font-size:12.5px; padding:2.5px 0;}
.mrow.total{border-top:1px solid var(--line); margin-top:4px; padding-top:5px; font-weight:700;}
select,input[type=checkbox]{accent-color:var(--amber);}
select{background:var(--card2); color:var(--tx); border:1px solid var(--line); border-radius:8px; padding:4px 8px; font-size:12.5px;}
.opCtl{display:flex; align-items:center; gap:8px; margin:8px 0; font-size:12.5px; flex-wrap:wrap;}
.plus{color:var(--green);} .minus{color:var(--red);}

/* ---- result ---- */
#sc-result{text-align:center; padding-top:20px;}
#rankBig{font-size:96px; font-weight:900; line-height:1;
  background:linear-gradient(180deg,#ffe9a8,var(--amber)); -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 0 24px rgba(245,165,36,.4)); margin:8px 0;}
#resTable{max-width:460px; margin:16px auto; text-align:left;}
#resTable .mrow{font-size:13.5px; padding:5px 2px;}
#epilogue{max-width:560px; margin:14px auto 24px; line-height:2.1; font-size:14px; color:var(--tx); text-align:left;
  background:var(--card); border:1px solid var(--line); border-radius:14px; padding:20px 26px;}

/* ---- modal / toast ---- */
#modalBack{position:fixed; inset:0; background:rgba(5,8,12,.72); display:none; z-index:50; align-items:center; justify-content:center;}
#modalBack.open{display:flex;}
#modalCard{width:min(520px,92vw); background:var(--card); border:1px solid #3d4b5e; border-radius:16px; padding:24px 26px;
  box-shadow:0 18px 60px rgba(0,0,0,.55); animation:fadein .25s;}
#modalTitle{font-size:18px; font-weight:800; color:var(--amber); margin-bottom:10px;}
#modalBody{font-size:14px; line-height:2; margin-bottom:18px; white-space:pre-line;}
#modalBtns{display:flex; flex-direction:column; gap:9px;}
#modalBtns button{text-align:left; background:var(--card2); border:1px solid var(--line); color:var(--tx);
  border-radius:10px; padding:11px 14px; font-size:13.5px; cursor:pointer; line-height:1.6;}
#modalBtns button:hover{border-color:var(--amber); background:#273241;}
#modalBtns button b{color:var(--amber);}
#toasts{position:fixed; top:14px; right:14px; z-index:60; display:flex; flex-direction:column; gap:8px;}
.toast{background:#212c3a; border:1px solid #43536a; border-left:4px solid var(--amber); border-radius:10px;
  padding:10px 16px; font-size:13px; box-shadow:0 8px 24px rgba(0,0,0,.4); animation:fadein .2s; max-width:300px;}
.toast.warn{border-left-color:var(--red);} .toast.good{border-left-color:var(--green);}
/* ---- beginner assists ---- */
#diffRow{display:flex; gap:10px; max-width:720px; margin:0 auto 20px;}
#diffRow .sizeCard{text-align:left;}
#bestLine{color:var(--amber);}
#hintBar{background:linear-gradient(90deg,#1c2a24,#1a212c); border:1px solid #2f4a3c; border-left:4px solid var(--green);
  border-radius:12px; padding:10px 14px; font-size:13.5px; margin-bottom:10px; line-height:1.7;}
.cell.cand{border-style:solid; border-color:var(--green); background:rgba(52,211,153,.10); box-shadow:inset 0 0 12px rgba(52,211,153,.18);}
.cell.bad{border-color:var(--red); box-shadow:inset 0 0 10px rgba(246,106,122,.2);}
#adviceBar{display:flex; gap:8px; align-items:center; background:linear-gradient(90deg,#1b2533,#1a212c); border:1px solid var(--line);
  border-left:4px solid var(--green); border-radius:12px; padding:9px 14px; font-size:13px; margin-bottom:10px;}
#adviceTx{animation:fadein .4s;}
.panel.attention{border-color:var(--amber); animation:attnGlow 1.4s ease-in-out infinite;}
@keyframes attnGlow{0%,100%{box-shadow:0 0 0 1.5px var(--amber),0 0 12px rgba(245,165,36,.15);}50%{box-shadow:0 0 0 1.5px var(--amber),0 0 26px rgba(245,165,36,.4);}}
#flowPanel{grid-column:1/-1; padding:8px 10px 2px;}
#flowCv,#bCanvas{max-width:100%; height:auto;}
#cfLayer{position:fixed; inset:0; pointer-events:none; z-index:70; overflow:hidden;}
.cf{position:absolute; top:-14px; width:9px; height:14px; border-radius:2px; opacity:.95; animation:cfFall linear forwards;}
@keyframes cfFall{to{transform:translateY(106vh) rotate(720deg); opacity:.65;}}
@media(max-width:900px){ #diffRow{flex-direction:column;} }
/* ---- まちの記憶 (album / letters) ---- */
#modalBody{max-height:56vh; overflow-y:auto;}
.letterBody{background:#241f15; border:1px solid #4a4232; border-radius:10px; padding:14px 16px;
  font-family:"Yu Mincho","Hiragino Mincho ProN",serif; line-height:2.1; font-size:13.5px; color:#e8dfc8;}
.albumList{display:flex; flex-direction:column; gap:5px; margin-top:6px;}
.albumLetter{display:block; width:100%; text-align:left; background:var(--card2); border:1px solid var(--line);
  border-radius:8px; padding:7px 10px; font-size:12.5px; color:var(--tx); cursor:pointer; font-family:inherit;}
.albumLetter:hover{border-color:var(--amber);}
.albumLetter.locked{opacity:.45; cursor:default;}
.badgeGrid{display:grid; grid-template-columns:repeat(5,1fr); gap:6px; margin-top:6px;}
.badge{background:var(--card2); border:1px solid var(--line); border-radius:10px; text-align:center;
  padding:8px 2px; font-size:20px;}
.badge div{font-size:9.5px; color:var(--dim); margin-top:3px;}
.badge.locked{opacity:.4;}
#townStrip{filter:drop-shadow(0 0 10px rgba(245,165,36,.25));}
.integrationBar{display:flex; align-items:center; justify-content:space-between; gap:12px; margin:2px 0 8px;
  padding:8px 10px; background:rgba(26,33,44,.82); border:1px solid var(--line); border-radius:10px;}
.integrationBar a{color:var(--tx); text-decoration:none; font-size:12.5px; font-weight:700;}
.integrationBar a:hover{text-decoration:underline; text-underline-offset:3px;}
#language-toggle{background:var(--card2); color:var(--tx); border:1px solid var(--line); border-radius:8px;
  padding:5px 9px; font:700 12px/1.2 inherit; cursor:pointer; letter-spacing:.05em;}
#language-toggle .is-active{color:var(--amber);}
footer{margin-top:26px; text-align:center; color:#556479; font-size:11px;}
@media(max-width:900px){ #designWrap,#opGrid{grid-template-columns:1fr;} }