:root{
  --bg:#0b1020;
  --card:#111a33;
  --panel:#0f1831;
  --text:#e9eefc;
  --muted:rgba(233,238,252,.72);
  --border:rgba(255,255,255,.10);
  --primary:#6aa7ff;
  --primary2:#3e7dff;
  --danger:#ff4d6d;
  --ok:#38d39f;
  --shadow:0 16px 40px rgba(0,0,0,.35);
  --radius:14px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans JP", "Hiragino Kaku Gothic ProN", Meiryo, Arial, sans-serif;
  background:
    radial-gradient(1200px 800px at 10% -10%, rgba(106,167,255,.25), transparent 55%),
    radial-gradient(1000px 700px at 90% 10%, rgba(56,211,159,.18), transparent 50%),
    var(--bg);
  color:var(--text);
}

code{font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace}

.app{max-width:980px;margin:0 auto;min-height:100%;display:flex;flex-direction:column}
.app--wide{max-width:1200px}
.topbar{
  position:sticky;top:0;z-index:5;
  backdrop-filter: blur(10px);
  background: rgba(11,16,32,.55);
  border-bottom:1px solid var(--border);
  padding:14px 16px;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
}
.brand__title{font-weight:800;letter-spacing:.02em}
.brand__sub{font-size:12px;color:var(--muted);margin-top:2px}
.topbar__right{display:flex;align-items:center;gap:10px}
.bgm{display:flex;align-items:center;gap:8px}
.bgm__vol{width:110px}
.bgm__vol input{width:110px}
@media (max-width: 520px){
  .bgm__vol{display:none}
}

.main{padding:18px 16px 28px;flex:1;display:flex;flex-direction:column;gap:0;min-width:0}
.card{
  width:100%;
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border:1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding:18px;
}

.h1{margin:0 0 8px;font-size:22px}
.muted{color:var(--muted);font-size:14px;line-height:1.5}
.mt12{margin-top:12px}
.mt16{margin-top:16px}

.row{display:flex;align-items:center;gap:12px}
.row--between{justify-content:space-between}
.row--wrap{flex-wrap:wrap}

.form{display:grid;gap:12px;margin-top:14px}
.label{display:grid;gap:6px;font-size:13px;color:var(--muted)}
.input{
  height:44px;
  padding:0 12px;
  border-radius:12px;
  border:1px solid var(--border);
  background: rgba(15,24,49,.75);
  color:var(--text);
  outline:none;
}
textarea.input{height:auto;min-height:88px;padding:10px 12px;resize:vertical;line-height:1.45}
.input:focus{border-color: rgba(106,167,255,.55);box-shadow:0 0 0 4px rgba(106,167,255,.12)}

.btn{
  height:44px;
  padding:0 14px;
  border-radius:12px;
  border:1px solid var(--border);
  background: rgba(255,255,255,.06);
  color:var(--text);
  cursor:pointer;
  font-weight:700;
}
.btn:hover{background: rgba(255,255,255,.10)}
.btn:disabled{opacity:.55;cursor:not-allowed}
.btn--primary{
  border-color: rgba(106,167,255,.35);
  background: linear-gradient(180deg, rgba(106,167,255,.28), rgba(62,125,255,.18));
}
.btn--primary:hover{background: linear-gradient(180deg, rgba(106,167,255,.34), rgba(62,125,255,.22))}
.btn--ghost{background:transparent}
.btn--sm{height:34px;border-radius:10px;font-size:12px;padding:0 10px}

.error{
  background: rgba(255,77,109,.15);
  border:1px solid rgba(255,77,109,.35);
  color: rgba(255,210,218,.95);
  padding:10px 12px;
  border-radius: 12px;
  font-size: 13px;
}

.details{margin-top:14px}
.details summary{cursor:pointer;color:var(--muted)}

.grid2{display:grid;grid-template-columns: 1fr 1fr;gap:14px}
@media (max-width: 780px){.grid2{grid-template-columns:1fr}}

.panel{
  background: rgba(15,24,49,.65);
  border:1px solid var(--border);
  border-radius: 14px;
  padding: 14px;
}
.panel__head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}
.panel__title{font-weight:800}

.list{list-style:none;padding:0;margin:0;display:grid;gap:8px}
.li{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:10px 12px;
  border:1px solid var(--border);
  border-radius:12px;
  background: rgba(0,0,0,.12);
}
.li__left{display:flex;align-items:center;gap:10px;min-width:0}
.li__name{font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.li__sub{font-size:12px;color:var(--muted)}
.li__right{display:flex;align-items:center;gap:8px;flex-shrink:0}

.badge{
  font-size:12px;
  border-radius:999px;
  padding:6px 10px;
  border:1px solid var(--border);
  background: rgba(255,255,255,.06);
  color: var(--text);
}
.badge--muted{color:var(--muted)}
.badge--ok{border-color: rgba(56,211,159,.35);background: rgba(56,211,159,.14)}
.badge--danger{border-color: rgba(255,77,109,.35);background: rgba(255,77,109,.14)}

.pill{
  display:inline-flex;align-items:center;
  padding:4px 10px;border-radius:999px;
  background: rgba(106,167,255,.14);
  border:1px solid rgba(106,167,255,.25);
  font-size:12px;
  margin-left:8px;
}
.pill--muted{opacity:.75;color:var(--muted);border-color:var(--border);background:rgba(255,255,255,.04)}

.seg{
  display:flex;gap:8px;
  background: rgba(0,0,0,.12);
  border:1px solid var(--border);
  border-radius: 14px;
  padding: 6px;
}
.seg__btn{
  flex:1;
  height:40px;
  border-radius: 12px;
  border:1px solid transparent;
  background: transparent;
  color: var(--muted);
  cursor:pointer;
  font-weight:800;
}
.seg__btn.is-active{
  background: rgba(106,167,255,.18);
  border-color: rgba(106,167,255,.25);
  color: var(--text);
}

.hint{margin-top:10px;color:var(--muted);font-size:13px;line-height:1.5}

.topic{
  text-align:center;
  padding:16px 14px;
  border-radius: 16px;
  border:1px solid rgba(106,167,255,.25);
  background:
    radial-gradient(900px 300px at 50% 0%, rgba(106,167,255,.22), transparent 60%),
    rgba(15,24,49,.70);
}
.topic__label{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  font-weight:900;
  letter-spacing:.08em;
  font-size:12px;
  color: rgba(233,238,252,.85);
  text-transform: uppercase;
}
.topic__text{
  margin-top:10px;
  font-size: clamp(18px, 2.6vw, 28px);
  font-weight: 900;
  line-height: 1.25;
  letter-spacing: .01em;
}
.topic__sub{margin-top:8px}

.footer{padding:0 16px 18px}

/* Survivor (solo) */
.survivor__wrap{position:relative}
.survivor:fullscreen{
  width:100%;
  height:100%;
  margin:0;
  border-radius:0;
}
.survivor:fullscreen canvas{
  width:100% !important;
  max-width:none !important;
  height:auto !important;
}
.survivor__overlay{
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  background: rgba(0,0,0,.38);
  backdrop-filter: blur(6px);
  padding: 16px;
}
.survivor__overlayCard{max-width: 520px; width: 100%}
.survivor__upgrades{display:grid;gap:10px;margin-top:12px}
.survivor__upgradeBtn{height:auto;padding:12px 14px;text-align:left}
.survivor__upTitle{font-weight:900}
.survivor__upDesc{margin-top:4px}
.survivor__nameLabel{display:flex;flex-direction:column;gap:4px;align-items:flex-start}
.survivor__nameInput{min-width:140px;max-width:200px}
.survivor__tableWrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.survivor__rankTable{width:100%;border-collapse:collapse;font-size:13px}
.survivor__rankTable th,.survivor__rankTable td{border:1px solid var(--border);padding:8px 10px;text-align:left;vertical-align:middle}
.survivor__rankTable th{background:rgba(0,0,0,.12);font-weight:700;white-space:nowrap}
.survivor__rankTable td:nth-child(3),.survivor__rankTable td:nth-child(4),.survivor__rankTable td:nth-child(5),.survivor__rankTable td:nth-child(6){font-variant-numeric:tabular-nums}

/* Auto-battler (party) */
.abDraftGrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px}
.abChampCard{border:1px solid var(--border);border-radius:14px;padding:12px;background:rgba(0,0,0,.12);cursor:pointer;text-align:left;color:var(--text)}
.abChampCard .muted{color:var(--muted)}
.abChampCard:hover{border-color:rgba(106,167,255,.45)}
.abChampCard--sel{border-color:rgba(56,211,159,.75);box-shadow:0 0 0 2px rgba(56,211,159,.2)}
button.abChampCard,button.abSkillCard{
  appearance:none;-webkit-appearance:none;
  color:var(--text);
  font:inherit;
}
.abCard__title{color:var(--text);font-weight:800}
.abCard__meta{font-size:12px;margin-top:6px}
.abShopGrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:10px}
.abSkillCard{border:1px solid var(--border);border-radius:12px;padding:10px;font-size:13px;background:rgba(0,0,0,.1);color:var(--text)}
.abSkillCard .muted{color:var(--muted)}
.abLog{max-height:320px;overflow:auto;background:rgba(0,0,0,.2);padding:12px;border-radius:12px;font-size:12px;line-height:1.5;white-space:pre-wrap}
.abBattleRow{display:flex;gap:10px;align-items:center;padding:6px 0}
.abBattleNames{flex:1;min-width:0;opacity:.95}
.abBattleDmg{font-variant-numeric:tabular-nums;color:var(--muted);white-space:nowrap}
.abBattleWinner{margin-top:10px;font-weight:800}
.abBattleBadge{display:inline-flex;align-items:center;justify-content:center;min-width:76px;height:30px;border-radius:10px;font-weight:900;letter-spacing:.08em}
.abBattleBadge--win{background:rgba(56,211,159,.18);border:1px solid rgba(56,211,159,.45);color:rgba(233,255,248,.95)}
.abBattleBadge--lose{background:rgba(255,77,109,.16);border:1px solid rgba(255,77,109,.42);color:rgba(255,226,232,.95)}

/* ensure HTML hidden always wins */
[hidden]{display:none !important}

/* Memory (2p) */
.mem-board{display:grid;grid-template-columns:repeat(6, 1fr);gap:12px;overflow:visible}
@media (max-width: 980px){.mem-board{grid-template-columns:repeat(4, 1fr)}}
.mem-win{
  padding: 12px 14px;
  border-radius: var(--radius);
  background: rgba(106,167,255,.14);
  border: 1px solid rgba(106,167,255,.35);
  font-size: 15px;
  line-height: 1.55;
}
.mem-card{
  position:relative;
  aspect-ratio: 1/1.1;
  border-radius: 16px;
  border:1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.06);
  cursor:pointer;
  user-select:none;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}
/* disabled でも「表向き」は薄くしない（絵文字が霞んで見える原因になる） */
.mem-card:disabled{
  cursor: not-allowed;
}
.mem-card:disabled:not(.is-up):not(.is-matched){
  /* 「押せない」状態で不透明度を落とすと、裏面の星まで薄く見える */
  opacity: 1;
}
.mem-card__face{
  display:flex;
  align-items:center;
  justify-content:center;
  width: 100%;
  height: 100%;
  padding: 6px;
  transform: translateZ(0);
}
.mem-card__face--img{
  background: rgba(255,255,255,.92);
  border-radius: 14px;
  box-shadow: 0 10px 22px rgba(0,0,0,.14);
  position: relative;
  overflow: hidden;
}
.mem-food-img{
  width: 100%;
  height: 100%;
  max-height: 100%;
  object-fit: contain;
  image-rendering: auto;
  filter: none;
  border-radius: 12px;
  /* 画像自体に余白があるのでズームして見やすくする */
  transform: scale(var(--mem-img-zoom, 2.5));
  transform-origin: 50% 50%;
}
.mem-food-fallback{
  display: none;
  position: absolute;
  inset: 0;
  padding: 12px;
  font-weight: 900;
  letter-spacing: .06em;
  color: rgba(10, 14, 30, 0.9);
  text-shadow: 0 1px 0 rgba(255,255,255,.65);
  align-items: center;
  justify-content: center;
  text-align: center;
}
.mem-card__face--img.is-missing{
  background: rgba(255,255,255,.18);
  border: 1px dashed rgba(255,255,255,.28);
  box-shadow: none;
}
.mem-card__face--img.is-missing .mem-food-fallback{
  display: flex;
}
.mem-card__back{
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  background:
    radial-gradient(220px 160px at 30% 20%, rgba(255, 160, 210, .38), transparent 58%),
    radial-gradient(240px 180px at 70% 78%, rgba(140, 190, 255, .34), transparent 60%),
    linear-gradient(180deg, rgba(34, 48, 92, 0.78), rgba(16, 24, 52, 0.88));
  border:1px solid rgba(255,255,255,.10);
}
.mem-card__back span{font-size:24px;opacity:.9}
.mem-card.is-up{
  /* ほぼ白だと絵文字の淡い色と溶ける → 中間トーンでコントラストを確保 */
  background: linear-gradient(180deg, #e2eeff 0%, #cfe3ff 45%, #b7d3ff 100%);
  border: 1px solid rgba(40, 70, 120, 0.38);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    0 10px 24px rgba(0, 0, 0, 0.18);
  overflow: hidden;
  z-index: 1;
}
.mem-board .mem-card.is-up:focus-within,
.mem-board .mem-card.is-up:hover{
  z-index: 2;
}
.mem-card.is-matched{
  outline: 3px solid rgba(40, 180, 130, 0.95);
  outline-offset: 1px;
}

/* Itadaki-style street board（円周マップ + 中央サイコロ） */
.street-board{
  display:grid;
  grid-template-columns:repeat(6, 1fr);
  gap:8px;
  max-width:900px;
}
.street-ring-wrap{
  position:relative;
  width:min(100%, 640px);
  height:min(88vw, 640px);
  max-height:85vh;
  margin-left:auto;
  margin-right:auto;
  flex-shrink:0;
  overflow:visible;
}
.street-board--ring{
  display:block;
  position:absolute;
  inset:0;
  max-width:none;
  margin:0;
  /* ネストした min() は一部ブラウザで transform ごと無効になるため px 固定 */
  --ring-r: 200px;
}
@media (min-width: 640px){
  .street-ring-wrap{ width:min(100%, 680px); height:min(82vw, 680px); }
  .street-board--ring{ --ring-r: 238px; }
}
@media (min-width: 900px){
  .street-board--ring{ --ring-r: 252px; }
}
@media (max-width: 420px){
  .street-ring-wrap{ width:100%; height:min(92vw, 380px); max-height:78vh; }
  .street-board--ring{ --ring-r: 118px; }
}
.street-tile--ring{
  position:absolute;
  left:50%;
  top:50%;
  width: clamp(52px, 9.5vw, 80px);
  min-height:0;
  padding:5px 4px 6px;
  font-size:10px;
  transform: translate(-50%, -50%)
    rotate(var(--ring-a))
    translateY(calc(-1 * var(--ring-r)))
    rotate(calc(-1 * var(--ring-a)));
  z-index:1;
}
.street-tile__ring-inner{
  display:flex;
  flex-direction:column;
  gap:2px;
  min-height:0;
}
.street-tile--ring .street-tile__name{font-size:9px;line-height:1.15}
.street-tile--ring .street-tile__sub{font-size:8px;line-height:1.2;margin-top:0;max-height:2.5em;overflow:hidden}
.street-tile--ring .street-tile__fork{color:var(--primary);font-weight:800}
.street-tile{
  border:1px solid var(--border);
  border-radius:12px;
  padding:8px 8px 10px;
  font-size:11px;
  background: rgba(15,24,49,.55);
  min-height:64px;
  position:relative;
}
/* .street-tile が後勝ちするため、円周マスは常に absolute を維持 */
.street-tile.street-tile--ring{
  position:absolute;
}
.street-tile__name{font-weight:800;font-size:12px;line-height:1.2}
.street-tile__sub{margin-top:4px;color:var(--muted);font-size:10px;line-height:1.3}
.street-tile.is-start{border-color: rgba(56,211,159,.45)}
.street-tile.is-shop{border-color: rgba(106,167,255,.35)}
.street-tile.is-hazard{border-color: rgba(255,77,109,.35)}
.street-tile.is-casino{border-color: rgba(230,190,90,.45)}
.street-tile.is-fork{border-color: rgba(180,140,255,.45)}
.street-tile.is-broker{border-color: rgba(140,200,255,.5)}
.street-tile.is-card{border-color: rgba(255,200,120,.45)}
.street-tile.is-mini{border-color: rgba(255,160,200,.45)}
.street-tile.district-0{border-left:3px solid rgba(106,167,255,.85)}
.street-tile.district-1{border-left:3px solid rgba(56,211,159,.85)}
.street-tile.district-2{border-left:3px solid rgba(255,140,200,.65)}
.street-tile.is-here{
  outline:2px solid rgba(255,210,218,.55);
  box-shadow:0 0 12px rgba(255,210,218,.12);
  z-index:2;
}
.street-tile.is-turn-spot{
  outline:3px solid rgba(255, 210, 120, .85);
  box-shadow:0 0 18px rgba(255, 200, 100, .2);
  z-index:3;
}
.street-tile__own{display:block;margin-top:4px;font-size:10px;color:var(--muted);line-height:1.3}
.street-choice{border:1px solid var(--border);border-radius:var(--radius);background:var(--panel);padding:4px 4px 12px}
.street-win{margin-bottom:14px;padding:12px 14px;border-radius:var(--radius);background:rgba(56,211,159,.12);border:1px solid rgba(56,211,159,.35);font-size:15px}
.street-tile__pawns{margin-top:4px;display:flex;flex-wrap:wrap;gap:3px;justify-content:center}
.street-tile__pawn{
  font-size:9px;padding:2px 5px;border-radius:999px;
  background: hsla(var(--pawn-h, 200), 72%, 40%, .92);
  border:1px solid rgba(255,255,255,.18);
  max-width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.street-tile__pawn--turn{
  box-shadow:0 0 0 2px rgba(255, 240, 160, .95);
  font-weight:900;
}
.street-dice-center{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%, -50%);
  z-index:10;
  width: clamp(108px, 26vw, 188px);
  height: clamp(108px, 26vw, 188px);
  border-radius:18px;
  background: radial-gradient(140% 100% at 50% 0%, rgba(45,62,110,.96), rgba(10,14,30,.94));
  border:1px solid rgba(255,255,255,.14);
  box-shadow: var(--shadow);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:2px;
  padding:8px;
  pointer-events:none;
}
.street-dice-center__label{font-size:10px;color:var(--muted);letter-spacing:.08em}
.street-dice-center__sub{font-size:10px;text-align:center;line-height:1.35;max-width:100%;padding:0 4px}
.street-dice-face{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:3px;
}
.street-dice-num{
  font-size:clamp(2rem, 7vw, 3.2rem);
  font-weight:900;
  line-height:1;
  color: var(--text);
  text-shadow: 0 2px 18px rgba(106,167,255,.45);
}
.street-dice-num--small{
  font-size:clamp(1.1rem, 4vw, 1.6rem);
  opacity:.85;
}
.street-dice-placeholder{font-size:2rem;opacity:.4;line-height:1}
.street-dice-pips{
  display:grid;
  grid-template-columns:repeat(3, 9px);
  grid-template-rows:repeat(3, 9px);
  gap:2px;
}
.street-dice-pip{
  width:9px;height:9px;border-radius:50%;
  background: rgba(255,255,255,.06);
}
.street-dice-pip.is-on{
  background: radial-gradient(circle at 35% 28%, #fff, var(--primary));
  box-shadow:0 0 6px rgba(106,167,255,.55);
}
.street-dice-face--pop{ animation: streetDicePop .48s ease-out; }
@keyframes streetDicePop{
  0%{ transform:scale(.65); opacity:.35; }
  50%{ transform:scale(1.06); }
  100%{ transform:scale(1); opacity:1; }
}
.street-log{max-height:180px;overflow:auto;font-size:13px;line-height:1.45;color:var(--muted);white-space:pre-wrap}

/* Tools: tarot / MBTI */
.tools-tarot__cards{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;max-width:520px}
@media (max-width:520px){.tools-tarot__cards{grid-template-columns:1fr}}
.tools-tarot__card{
  border:1px solid var(--border);
  border-radius:14px;
  padding:12px;
  background: rgba(15,24,49,.55);
  min-height:120px;
}
.tools-tarot__card.is-back{
  background: linear-gradient(145deg, rgba(106,167,255,.18), rgba(62,125,255,.08));
  display:flex;align-items:center;justify-content:center;
  font-weight:900;color:var(--muted);
}
.tools-tarot__out{white-space:pre-wrap;font-size:14px;line-height:1.65;color:var(--text)}
.tools-mbti__q{margin-top:14px;padding:12px;border:1px solid var(--border);border-radius:12px;background:rgba(0,0,0,.12)}
.tools-mbti__opts{display:grid;gap:8px;margin-top:10px}
.tools-mbti__result{font-size:15px;line-height:1.65}