:root{
  --ink:#4a3428; --ink-soft:#8a6a55; --panel:#fffaf0; --line:#f0d9bc;
  --accent:#ff8a3d; --accent-dark:#e0661a; --sun:#ffb703;
  --blue:#4a9be0; --green:#4fb556; --pink:#f48fb1; --purple:#9b7ede; --red:#e85d5d; --gray:#b9a898; --yellow:#ffc93c;
  --t-cute:#f06b9a; --t-cool:#3f8fd6; --t-emo:#8b6bd6; --t-age:#f07a2a;
  --shadow:0 5px 0 rgba(130,80,30,.18),0 10px 24px rgba(130,80,30,.14);
}
*{box-sizing:border-box}
html,body{margin:0}
body{
  font-family:'M PLUS Rounded 1c',system-ui,sans-serif;color:var(--ink);
  background:radial-gradient(circle at 85% -10%,#fff6c9 0,#fff6c900 40%),linear-gradient(180deg,#fff3d6,#ffd9b5 60%,#ffc49b);
  min-height:100vh;overflow-x:hidden;
}
button{font-family:inherit;cursor:pointer}
.screen{display:none;min-height:100vh;padding:16px;flex-direction:column;align-items:center}
.screen.active{display:flex}
.panel{background:var(--panel);border-radius:20px;box-shadow:var(--shadow);border:2px solid var(--line)}
.btn{
  border:none;border-radius:999px;padding:12px 28px;font-size:17px;font-weight:800;color:#fff;
  background:linear-gradient(180deg,#ffa25e,var(--accent));box-shadow:0 5px 0 var(--accent-dark);
  transition:transform .08s,box-shadow .08s,filter .2s;
}
.btn:hover{filter:brightness(1.06)}
.btn:active{transform:translateY(4px);box-shadow:0 1px 0 var(--accent-dark)}
.btn:disabled{filter:grayscale(.8) opacity(.55);cursor:not-allowed;transform:none}
.btn.sub{background:linear-gradient(180deg,#fff,#f5e6d3);color:var(--ink);box-shadow:0 5px 0 #d9bf9f}
.btn.small{padding:6px 14px;font-size:13px;box-shadow:0 3px 0 #d9bf9f}
.btn.small:not(.sub){box-shadow:0 3px 0 var(--accent-dark)}
.btn.pink{background:linear-gradient(180deg,#ff8fbf,#ec5b9a);box-shadow:0 5px 0 #c03f7a}

/* ---------- タイトル ---------- */
#title{justify-content:center;gap:22px;text-align:center}
.sun-logo{font-size:92px;animation:spin 18s linear infinite;filter:drop-shadow(0 6px 10px rgba(255,150,0,.4))}
@keyframes spin{to{transform:rotate(360deg)}}
.game-title{font-size:clamp(36px,8vw,64px);font-weight:800;margin:0;letter-spacing:.06em;
  color:#fff;-webkit-text-stroke:2px var(--accent-dark);text-shadow:0 5px 0 var(--accent-dark),0 10px 20px rgba(200,90,20,.3)}
.subtitle{margin:-10px 0 0;color:var(--ink-soft);font-weight:700}
.title-box{padding:24px;max-width:520px;width:100%}
.title-box h3{margin:0 0 12px}
.year-select{display:flex;gap:10px;justify-content:center;margin-bottom:20px}
.year-btn{flex:1;border:3px solid var(--line);background:#fff;border-radius:16px;padding:14px 6px;font-size:22px;font-weight:800;color:var(--ink);transition:.15s}
.year-btn small{display:block;font-size:12px;color:var(--ink-soft);font-weight:700}
.year-btn.selected{border-color:var(--accent);background:#fff1e3;transform:translateY(-3px);box-shadow:0 4px 0 var(--accent)}
.rules{text-align:left;font-size:14px;line-height:1.8;color:var(--ink-soft);margin:16px 0 0;padding-left:20px}

/* ---------- ボード（日本地図） ---------- */
#board{gap:10px}
.hud{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center;justify-content:space-between;padding:10px 16px;width:100%;max-width:980px}
.hud-date{font-size:20px;font-weight:800}
.hud-date span{color:var(--accent)}
.hud-stats{display:flex;gap:12px;align-items:center;flex-wrap:wrap;font-weight:800;font-size:14px}
.money{color:#b8860b}
.hpbar{width:90px;height:14px;background:#f1e2d0;border-radius:99px;overflow:hidden;border:2px solid #e8cfb0;display:inline-block;vertical-align:middle}
.hpbar>i{display:block;height:100%;background:linear-gradient(90deg,#7ad37f,#4fb556);transition:width .4s}
.hpbar.low>i{background:linear-gradient(90deg,#ff8f8f,var(--red))}
.trip{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;justify-content:space-between;padding:10px 16px;width:100%;max-width:980px}
.trip-info{display:flex;gap:14px;flex-wrap:wrap;font-weight:800;font-size:15px;align-items:center}
.trip-info .dest{color:#c4413a}
.trip-ctrl{display:flex;gap:10px;align-items:center}
.dice{min-width:58px;padding:0 4px;height:58px;border-radius:14px;background:#fff;border:3px solid var(--line);display:flex;align-items:center;justify-content:center;
  font-size:36px;font-weight:800;color:var(--accent);box-shadow:0 4px 0 #e2c9a8;flex-shrink:0}
.dice.rolling{animation:shake .12s infinite}
.dice.pop{animation:pop .35s}
@keyframes shake{25%{transform:rotate(-10deg)}75%{transform:rotate(10deg)}}
@keyframes pop{50%{transform:scale(1.25)}}
.msg{width:100%;max-width:980px;text-align:center;font-weight:800;color:var(--ink-soft);font-size:14px;min-height:20px}
.reach-list{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;width:100%;max-width:980px}
.reach-chip{border:2px solid var(--accent);background:#fff;border-radius:99px;padding:5px 12px;font-size:13px;font-weight:800;color:var(--ink)}
.reach-chip:hover{background:#fff1e3}
.reach-chip.goal{border-color:#c4413a;background:#ffeaea}
.map-wrap{position:relative;width:100%;max-width:980px;height:min(64vh,720px);overflow:auto;border-radius:20px;border:3px solid #fff;box-shadow:var(--shadow);background:#a9dcf2}
.map-tools{position:sticky;top:8px;left:8px;z-index:3;display:inline-flex;gap:6px;margin:8px}
#map{display:block}
.land{fill:#fff6e0;stroke:#d9b98f;stroke-width:3;stroke-linejoin:round}
.route{stroke:#d1a873;stroke-width:6;stroke-linecap:round}
.route.sea{stroke:#6fb7d9;stroke-dasharray:4 10;stroke-width:5}
.sq{stroke:#fff;stroke-width:3}
.sq-ic{font-size:12px;font-weight:800;fill:#fff;pointer-events:none}
.st-dot{fill:#fff;stroke:#e0661a;stroke-width:4}
.st-dot.cap{fill:#ffe9d6;stroke-width:5}
.st-label{font-size:17px;font-weight:800;fill:#4a3428;paint-order:stroke;stroke:#fff;stroke-width:5;stroke-linejoin:round;pointer-events:none}
.dest-ring{fill:none;stroke:#e85d5d;stroke-width:5;animation:pulse 1.2s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
.reach{fill:rgba(255,138,61,.35);stroke:#ff8a3d;stroke-width:4;cursor:pointer;animation:pulse 1s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
.reach.goal{fill:rgba(232,93,93,.4);stroke:#e85d5d}
@keyframes pulse{50%{transform:scale(1.25)}}
.inset{fill:none;stroke:#7fb6cf;stroke-width:3;stroke-dasharray:8 6}
.legend{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;font-size:12px;font-weight:700;color:var(--ink-soft)}
.legend b{display:inline-block;width:12px;height:12px;border-radius:50%;margin-right:3px;vertical-align:-2px;border:2px solid #fff;box-shadow:0 0 0 1px #ccc}

/* ---------- カード（グッズ） ---------- */
.card{
  width:118px;min-height:176px;border-radius:14px;background:#fff;border:3px solid var(--gray);position:relative;
  display:flex;flex-direction:column;align-items:center;padding:18px 6px 8px;text-align:center;flex-shrink:0;
  box-shadow:0 4px 0 rgba(0,0,0,.12);transition:transform .15s,box-shadow .15s,opacity .2s;user-select:none
}
.card .cost{position:absolute;top:-10px;left:-10px;min-width:32px;height:30px;border-radius:99px;background:var(--green);color:#fff;
  font-weight:800;font-size:13px;display:flex;align-items:center;justify-content:center;border:3px solid #fff;box-shadow:0 2px 0 rgba(0,0,0,.2);padding:0 5px}
.card .rar{position:absolute;top:4px;right:6px;font-size:10px;font-weight:800;color:#fff;padding:1px 6px;border-radius:6px;background:var(--gray)}
.card .lv{position:absolute;top:20px;right:6px;font-size:10px;color:#f2a400;letter-spacing:-1px}
.card .em{font-size:34px;line-height:1.2}
.card .cname{font-weight:800;font-size:12.5px;margin:3px 0;line-height:1.2}
.card .ctype{font-size:10px;font-weight:800;color:#fff;border-radius:99px;padding:1px 8px;margin-bottom:4px}
.card .vals{display:flex;gap:3px;justify-content:center;flex-wrap:wrap;font-size:11px;font-weight:800}
.card .vals span{border-radius:6px;padding:0 4px;background:#f6efe6}
.card .cdesc{font-size:10.5px;color:var(--ink-soft);font-weight:700;line-height:1.35;margin-top:4px}
.card.r-R{border-color:#5aa9e6} .card.r-R .rar{background:#5aa9e6}
.card.r-SR{border-color:var(--purple);background:linear-gradient(180deg,#fff,#f4eeff)} .card.r-SR .rar{background:var(--purple)}
.card.r-SSR{border-color:#f2a400;background:linear-gradient(180deg,#fffbe8,#ffeeb8)} .card.r-SSR .rar{background:linear-gradient(90deg,#ff8a3d,#ffb703)}
.card.clickable{cursor:pointer}
.card.clickable:hover{transform:translateY(-10px);box-shadow:0 12px 18px rgba(0,0,0,.18)}
.card.selected{box-shadow:0 0 0 4px var(--accent),0 8px 14px rgba(0,0,0,.15)}
.card.off{opacity:.42}
.card.mini{width:96px;min-height:146px;padding:16px 4px 6px}
.card.mini .em{font-size:26px} .card.mini .cname{font-size:11px}
.card .count{position:absolute;bottom:-9px;right:-9px;background:var(--ink);color:#fff;font-size:12px;font-weight:800;border-radius:99px;padding:2px 8px}
.card .check{position:absolute;bottom:-10px;left:50%;transform:translateX(-50%);background:var(--accent);color:#fff;font-size:12px;font-weight:800;border-radius:99px;padding:1px 10px}
.card.get{animation:getCard .7s cubic-bezier(.2,1.6,.4,1)}
@keyframes getCard{from{transform:scale(.2) rotate(-20deg);opacity:0}}

/* ---------- モーダル ---------- */
.overlay{position:fixed;inset:0;background:rgba(74,52,40,.45);display:none;align-items:center;justify-content:center;z-index:50;padding:16px;backdrop-filter:blur(3px)}
.overlay.show{display:flex}
.modal{width:100%;max-width:560px;max-height:92vh;overflow:auto;padding:22px;text-align:center;animation:modalIn .3s cubic-bezier(.2,1.4,.4,1)}
@keyframes modalIn{from{transform:translateY(30px) scale(.9);opacity:0}}
.ev-tag{display:inline-block;padding:3px 14px;border-radius:99px;color:#fff;font-weight:800;font-size:13px}
.ev-icon{font-size:58px;margin:6px 0}
.modal h2{margin:4px 0 6px}
.modal p{line-height:1.8;margin:6px 0 12px}
.question{font-weight:800;font-size:17px;margin:4px 0 14px}
.choices{display:flex;flex-direction:column;gap:10px}
.choice{border:3px solid var(--line);background:#fff;border-radius:14px;padding:12px;font-size:16px;font-weight:800;color:var(--ink);transition:.15s}
.choice:hover:not(:disabled){border-color:var(--accent);background:#fff4e8}
.choice.correct{border-color:var(--green);background:#e8f8e9}
.choice.wrong{border-color:var(--red);background:#ffeaea}
.result-box{background:#fff4e6;border-radius:14px;padding:12px;margin:10px 0 14px;font-weight:700;line-height:1.6}
.delta{font-weight:800} .delta.plus{color:#3d9f43} .delta.minus{color:var(--red)}
.reward{display:flex;flex-direction:column;align-items:center;gap:8px;margin:8px 0 18px}
.reward-title{font-weight:800;color:var(--accent);font-size:17px}
.card-list{display:flex;flex-wrap:wrap;gap:18px 12px;justify-content:center;padding:14px 4px}
.tabs{display:flex;gap:6px;flex-wrap:wrap;justify-content:center;margin-bottom:10px}
.tab{border:2px solid var(--line);background:#fff;border-radius:99px;padding:5px 14px;font-weight:800;font-size:13px;color:var(--ink)}
.tab.on{background:var(--accent);border-color:var(--accent);color:#fff}
.dest-list{display:flex;flex-direction:column;gap:8px;max-height:46vh;overflow:auto;padding:4px}
.dest-item{display:flex;justify-content:space-between;align-items:center;gap:10px;border:2px solid var(--line);background:#fff;border-radius:14px;padding:10px 14px;text-align:left;color:var(--ink)}
.dest-item:hover{border-color:var(--accent);background:#fff4e8}
.dest-item b{font-size:17px}
.dest-item small{display:block;color:var(--ink-soft);font-weight:700}
.venue-chip{font-size:12px;font-weight:800;border-radius:99px;padding:3px 10px;color:#fff;white-space:nowrap}

/* ---------- 駅のお店・売買 ---------- */
.wallet{display:flex;gap:14px;justify-content:center;font-weight:800;margin:4px 0 10px;flex-wrap:wrap}
.shop-body{min-height:180px}
.shop-row{display:flex;justify-content:space-between;align-items:center;gap:10px;background:#fff;border:2px solid var(--line);border-radius:14px;padding:10px 12px;margin-bottom:8px;text-align:left}
.shop-row .ic{font-size:30px;width:40px;text-align:center}
.shop-row .info{flex:1;min-width:0}
.shop-row b{font-size:15px}
.shop-row small{display:block;color:var(--ink-soft);font-weight:700}
.shop-row.owned{background:#eef9ef;border-color:#a7dcab}
.shop-note{font-size:13px;font-weight:700;color:var(--ink-soft);margin:4px 0 10px}
.goods-shop{display:flex;flex-wrap:wrap;gap:16px 12px;justify-content:center;padding:12px 0}
.goods-item{display:flex;flex-direction:column;align-items:center;gap:8px}

/* ---------- 持ち込みグッズ選択 ---------- */
#prep{gap:14px}
.prep-head{width:100%;max-width:900px;padding:16px 20px;display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between}
.prep-head h2{margin:0}
.prep-count{font-size:20px;font-weight:800}
.prep-body{width:100%;max-width:900px;padding:12px}

/* ---------- ライブ ---------- */
#live{gap:10px;padding-bottom:24px;background:radial-gradient(ellipse at 50% 0,#6a3fa0 0,#2c1b4a 60%,#1b1030);color:#fff}
.stage{width:100%;max-width:860px;border-radius:22px;padding:14px 18px;position:relative;overflow:hidden;
  background:linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,.04));border:2px solid rgba(255,255,255,.2)}
.stage::before{content:"";position:absolute;inset:-40% 20% auto;height:200%;background:conic-gradient(from 160deg at 50% 0,transparent 0 40deg,rgba(255,230,150,.18) 45deg 60deg,transparent 65deg);pointer-events:none}
.venue-name{font-size:13px;font-weight:800;opacity:.85}
.song{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:4px}
.song-no{font-size:13px;font-weight:800;background:rgba(255,255,255,.18);border-radius:99px;padding:2px 10px}
.song-title{font-size:22px;font-weight:800;text-shadow:0 2px 8px rgba(0,0,0,.4)}
.type-chip{font-size:12px;font-weight:800;border-radius:99px;padding:2px 10px;color:#fff}
.setlist{display:flex;gap:6px;margin-top:8px}
.setlist i{flex:1;height:6px;border-radius:99px;background:rgba(255,255,255,.2)}
.setlist i.done{background:#ffd166} .setlist i.now{background:#fff;box-shadow:0 0 8px #fff}
.idol{display:flex;align-items:center;gap:12px;margin-top:10px}
.idol .av{font-size:54px;filter:drop-shadow(0 0 12px rgba(255,220,120,.7));animation:dance 1.2s ease-in-out infinite}
@keyframes dance{25%{transform:rotate(-6deg) translateY(-3px)}75%{transform:rotate(6deg) translateY(-3px)}}
.bubble{background:#fff;color:var(--ink);border-radius:16px;padding:8px 14px;font-weight:800;font-size:14px;position:relative;min-height:20px}
.bubble::before{content:"";position:absolute;left:-8px;top:12px;border:8px solid transparent;border-right-color:#fff;border-left:0}
.bubble.fansa{animation:fansa .6s}
@keyframes fansa{30%{transform:scale(1.15);background:#ffe0ef}}
.live-stats{width:100%;max-width:860px;display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
.ls{background:rgba(255,255,255,.1);border:2px solid rgba(255,255,255,.15);border-radius:14px;padding:8px;text-align:center;position:relative}
.ls small{display:block;font-size:11px;font-weight:800;opacity:.8}
.ls b{font-size:22px}
.ls .bar{height:6px;border-radius:99px;background:rgba(255,255,255,.2);overflow:hidden;margin-top:4px}
.ls .bar i{display:block;height:100%;background:linear-gradient(90deg,#ff9ac4,#ff5c9c);transition:width .4s}
.ls .bar.st i{background:linear-gradient(90deg,#7ad37f,#4fb556)}
.float{position:absolute;left:50%;top:0;transform:translateX(-50%);font-size:20px;font-weight:800;pointer-events:none;animation:floatUp 1s forwards;color:#ffd166;z-index:5;white-space:nowrap;text-shadow:0 2px 4px rgba(0,0,0,.5)}
@keyframes floatUp{from{opacity:0;transform:translate(-50%,10px)}20%{opacity:1}to{opacity:0;transform:translate(-50%,-30px)}}
.live-mid{width:100%;max-width:860px}
.log{padding:8px 14px;font-size:13px;line-height:1.6;overflow:auto;height:110px;font-weight:700;border-radius:14px;background:rgba(0,0,0,.25)}
.log div{border-bottom:1px dashed rgba(255,255,255,.15);padding:1px 0}
.log .hi{color:#ffd166}.log .pk{color:#ff9ac4}.log .sys{opacity:.7}
.hand-area{width:100%;max-width:860px;padding:12px;border-radius:20px;background:rgba(255,255,255,.08);border:2px solid rgba(255,255,255,.15)}
.hand-head{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:6px;font-weight:800;font-size:13px}
.cheer{display:flex;gap:4px;align-items:center}
.cheer i{width:16px;height:16px;border-radius:50%;background:#ff5c9c;box-shadow:0 0 8px #ff5c9c}
.cheer i.used{background:rgba(255,255,255,.2);box-shadow:none}
.hand{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;min-height:190px;padding-top:14px;color:var(--ink)}
.combo-pop{position:fixed;left:50%;top:38%;transform:translate(-50%,-50%);font-size:44px;font-weight:800;color:#ffd166;z-index:60;pointer-events:none;
  text-shadow:0 0 18px #ff5c9c,0 4px 0 #a0306a;animation:comboPop .9s forwards}
@keyframes comboPop{0%{opacity:0;transform:translate(-50%,-50%) scale(.4)}30%{opacity:1;transform:translate(-50%,-50%) scale(1.15)}100%{opacity:0;transform:translate(-50%,-80%) scale(1)}}

/* ---------- リザルト ---------- */
#result{justify-content:center;gap:16px;background:radial-gradient(ellipse at 50% 0,#6a3fa0 0,#2c1b4a 60%,#1b1030)}
.result-card{width:100%;max-width:560px;padding:22px;text-align:center}
.rank{font-size:96px;font-weight:800;line-height:1;margin:6px 0 2px;animation:rankIn .8s cubic-bezier(.2,1.6,.4,1)}
@keyframes rankIn{from{transform:scale(3) rotate(-10deg);opacity:0}}
.rank.SSS{background:linear-gradient(90deg,#ff5c9c,#ffb703,#5aa9e6,#9b7ede);-webkit-background-clip:text;background-clip:text;color:transparent}
.rank.SS{color:#9b4fd6} .rank.S{color:#e8456b} .rank.A{color:#f07a2a} .rank.B{color:#3d9f43} .rank.C{color:#3f8fd6} .rank.D{color:#9a8a7a}
.score-table{width:100%;border-collapse:collapse;margin:12px 0;font-weight:800}
.score-table td{padding:7px 6px;border-bottom:1px dashed var(--line)}
.score-table td:nth-child(2){text-align:right;font-size:18px}
.score-table td:nth-child(3){text-align:right;color:var(--ink-soft);font-size:13px;width:90px}
.score-table tr.total td{border-bottom:none;font-size:18px;color:var(--accent-dark)}
.rank-scale{display:flex;gap:4px;justify-content:center;flex-wrap:wrap;font-size:11px;font-weight:800;color:var(--ink-soft);margin-bottom:12px}
.rank-scale span{background:#f6efe6;border-radius:6px;padding:2px 6px}
.rank-scale span.me{background:var(--accent);color:#fff}

/* ---------- エンディング ---------- */
#ending{justify-content:center;text-align:center;gap:16px}
.big-icon{font-size:100px}
.end-box{padding:24px;max-width:760px;width:100%}
.end-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:12px 0 18px}
.end-stats div{background:#fff4e6;border-radius:14px;padding:10px;font-weight:800;font-size:13px}
.end-stats b{display:block;font-size:20px;color:var(--accent)}
.live-history{width:100%;border-collapse:collapse;font-weight:700;font-size:14px;margin-bottom:12px}
.live-history td,.live-history th{padding:6px;border-bottom:1px dashed var(--line)}
.live-history .r{font-weight:800;font-size:16px}

.toast{position:fixed;top:20px;left:50%;transform:translateX(-50%);background:var(--ink);color:#fff;padding:10px 22px;border-radius:99px;
  font-weight:800;z-index:80;animation:toast 2.2s forwards;pointer-events:none;white-space:nowrap}
@keyframes toast{0%{opacity:0;transform:translate(-50%,-20px)}12%,80%{opacity:1;transform:translate(-50%,0)}100%{opacity:0}}

@media (max-width:600px){
  .screen{padding:10px}
  .hud-date{font-size:17px}
  .map-wrap{height:54vh}
  .card{width:100px;min-height:160px}
  .card .em{font-size:26px}
  .live-stats{grid-template-columns:repeat(3,1fr)}
  .ls b{font-size:18px}
  .song-title{font-size:18px}
  .rank{font-size:76px}
  .end-stats{grid-template-columns:repeat(2,1fr)}
}