/*! base.css — 配色変数・リセット・共通パーツ */
:root{
  --wine:#7b1230;
  --wine-lt:#c2334f;
  --gold:#e6c26a;
  --board-bg:#12463a;
  --board-line:#0c3229;
  --cell-hover:#166b55;
  --panel:#2a1620;
  --panel-lt:#3a1e2b;
  --ink:#f6ece9;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{height:100%;}
body{
  margin:0;
  min-height:100dvh;
  display:flex;align-items:center;justify-content:center;
  background:
    radial-gradient(120% 80% at 50% -10%, #4a1224 0%, transparent 60%),
    linear-gradient(170deg,#26101a,#140a10 60%,#0d060a);
  font-family:"Hiragino Sans","Yu Gothic UI","Yu Gothic",system-ui,-apple-system,sans-serif;
  color:var(--ink);
  padding:8px;
  padding-top:max(8px, env(safe-area-inset-top));
  padding-bottom:max(8px, env(safe-area-inset-bottom));
  overscroll-behavior:none;
}
.app{display:flex;flex-direction:column;align-items:center;gap:8px;max-width:520px;width:100%;}

.topbar{width:100%;display:flex;align-items:center;justify-content:space-between;gap:8px;}
.brand{font-weight:800;font-size:1rem;letter-spacing:.04em;color:var(--gold);}

select,button{
  font-size:.9rem;padding:7px 12px;border-radius:10px;
  border:1px solid #5a3040;background:#331c27;color:var(--ink);
  cursor:pointer;font-family:inherit;
}
button.primary{
  background:linear-gradient(180deg,var(--wine-lt),var(--wine));
  border-color:#8d1c3a;font-weight:700;color:#fff;
  box-shadow:0 4px 14px rgba(150,20,50,.4);
}
button.ghost-btn{background:transparent;border-color:#5a3040;padding:5px 10px;font-size:.78rem;opacity:.9;}
button:active{filter:brightness(1.15);}
button:disabled{opacity:.5;}

.footnote{font-size:.68rem;opacity:.45;text-align:center;line-height:1.5;}

@media (max-height:660px){
  .footnote{display:none;}
  .avatar-wrap{width:48px;height:48px;flex-basis:48px;}
}