:root {
  --bg:#f6f5f2;
  --paper:#fff;
  --ink:#1d1d1f;
  --muted:#6d6d72;
  --line:#d5d3cd;
  --soft:#eceae5;
  --accent:#222;
  --danger:#9b2c2c;
  --success:#2f6f46;
  --radius:18px;
}
* { box-sizing:border-box; }
html,body { margin:0; min-height:100%; background:var(--bg); color:var(--ink); font-family:Inter,"Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif; }
button,input { font:inherit; }
button { cursor:pointer; }
.hidden { display:none !important; }
.app-shell { min-height:100vh; }
.screen { min-height:100vh; }
.home-screen { max-width:1050px; margin:0 auto; padding:56px 24px 40px; display:flex; flex-direction:column; justify-content:center; gap:36px; }
.brand-block { display:flex; gap:24px; align-items:center; }
.brand-card { width:92px; height:128px; border:3px solid var(--ink); border-radius:14px; display:grid; place-items:center; font-weight:900; font-size:48px; background:var(--paper); transform:rotate(-3deg); }
h1 { font-size:clamp(42px,8vw,78px); margin:0; letter-spacing:-.04em; }
h2 { margin:0 0 12px; font-size:28px; }
p { line-height:1.65; }
.subtitle { max-width:620px; font-size:18px; margin:8px 0 0; color:var(--muted); }
.eyebrow { letter-spacing:.16em; font-size:11px; font-weight:800; color:var(--muted); margin:0 0 8px; }
.home-grid { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.panel { background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); padding:24px; }
.panel label { display:grid; gap:8px; font-weight:700; }
input { width:100%; min-height:48px; border:1px solid var(--line); border-radius:12px; background:#fff; padding:0 14px; font-size:16px; color:var(--ink); }
input:focus, button:focus-visible { outline:3px solid rgba(40,40,40,.15); outline-offset:2px; }
.icon-picker { display:grid; grid-template-columns:repeat(6,1fr); gap:8px; margin-top:18px; }
.icon-choice { min-height:48px; border:1px solid var(--line); background:#fff; border-radius:12px; font-size:24px; }
.icon-choice.selected { border:2px solid var(--ink); background:var(--soft); }
.action-panel { display:flex; flex-direction:column; gap:14px; justify-content:center; }
.or { text-align:center; color:var(--muted); font-size:13px; }
.btn { min-height:48px; border:1px solid var(--ink); border-radius:12px; padding:0 18px; background:#fff; color:var(--ink); font-weight:800; transition:transform .12s ease, background .12s ease; }
.btn:hover { background:var(--soft); }
.btn:active { transform:translateY(1px); }
.btn:disabled { cursor:not-allowed; opacity:.38; }
.btn.primary { background:var(--ink); color:#fff; }
.btn.primary:hover { background:#333; }
.btn.small { min-height:38px; padding:0 14px; font-size:14px; }
.error { min-height:24px; color:var(--danger); text-align:center; font-weight:700; }
.muted { color:var(--muted); }
.center { text-align:center; }

.topbar { min-height:64px; border-bottom:1px solid var(--line); background:rgba(255,255,255,.96); display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:16px; padding:8px 24px; position:sticky; top:0; z-index:20; }
.topbar > :last-child { justify-self:end; }
.lobby-main { width:min(1000px,calc(100% - 32px)); margin:0 auto; padding:44px 0 80px; }
.lobby-players { margin-top:28px; display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:12px; }
.lobby-player { border:1px solid var(--line); background:var(--paper); border-radius:14px; padding:16px; display:flex; align-items:center; gap:12px; }
.avatar { width:44px; height:44px; border:1px solid var(--line); border-radius:50%; background:#fff; display:grid; place-items:center; font-size:24px; flex:0 0 auto; }
.player-name { font-weight:900; white-space:normal; overflow:visible; text-overflow:clip; overflow-wrap:anywhere; word-break:break-word; line-height:1.25; }
.player-meta { color:var(--muted); font-size:12px; margin-top:3px; }
.host-badge { display:inline-block; margin-left:6px; border:1px solid var(--line); border-radius:999px; padding:2px 6px; font-size:10px; }
.lobby-actions { margin:32px auto 0; width:min(420px,100%); display:grid; gap:10px; }

.game-screen { display:grid; grid-template-rows:auto auto minmax(460px,1fr) auto; min-height:100vh; }
.game-topbar { grid-template-columns:1fr auto auto 1fr; }
.room-title { display:flex; align-items:center; gap:12px; }
.room-title span { color:var(--muted); font-size:13px; }
.turn-top { justify-self:end; font-weight:900; }
.deck-mini { display:flex; align-items:center; gap:8px; }
.deck-icon { font-size:22px; }
.opponents { min-height:150px; max-width:1280px; width:100%; margin:0 auto; padding:18px 24px 6px; display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:10px; align-items:start; }
.player-tile { min-width:0; background:var(--paper); border:1px solid var(--line); border-radius:12px; padding:10px; display:grid; grid-template-columns:34px 1fr auto; gap:8px; align-items:center; position:relative; }
.player-tile.current { border:3px solid var(--ink); padding:8px; }
.player-tile.current::before { content:'現在の手番'; position:absolute; top:-20px; left:8px; background:var(--ink); color:white; border-radius:5px; padding:3px 7px; font-size:10px; font-weight:900; }
.player-tile .avatar { width:34px; height:34px; font-size:19px; }
.tile-main { min-width:0; }
.tile-name { font-size:13px; font-weight:900; white-space:normal; overflow:visible; text-overflow:clip; overflow-wrap:anywhere; word-break:break-word; line-height:1.2; }
.tile-cards { margin-top:4px; font-size:11px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:var(--muted); }
.tile-chips { font-size:12px; font-weight:800; }
.table-area { width:min(1080px,calc(100% - 36px)); margin:0 auto; display:grid; grid-template-columns:190px 1fr 190px; align-items:center; padding:24px 0 28px; min-height:470px; }
.deck-stack { grid-column:1; justify-self:center; text-align:center; color:var(--muted); }
.deck-card { width:100px; height:138px; border:2px solid var(--ink); border-radius:11px; background:repeating-linear-gradient(45deg,#fff,#fff 8px,#f2f1ed 8px,#f2f1ed 16px); display:grid; place-items:center; font-size:40px; color:var(--ink); font-weight:900; }
.deck-caption { margin-top:8px; font-size:13px; }
.center-stack { grid-column:2; justify-self:center; width:min(520px,100%); text-align:center; }
.section-label { font-weight:900; margin-bottom:14px; }
.active-card { width:240px; height:320px; margin:0 auto; background:white; border:3px solid var(--ink); border-radius:16px; display:grid; place-items:center; font-size:112px; font-weight:900; letter-spacing:-.06em; }
.pot { margin-top:12px; font-size:24px; font-weight:900; }
.action-buttons { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:26px; }
.btn.take,.btn.pass { min-height:58px; font-size:18px; }
.waiting { min-height:58px; margin-top:26px; display:grid; place-items:center; border:1px dashed var(--line); border-radius:12px; color:var(--muted); font-weight:700; }
.event-toast { margin-top:14px; min-height:42px; border:1px dashed var(--line); border-radius:12px; display:grid; place-items:center; padding:8px 14px; color:var(--muted); font-size:13px; }
.self-panel { width:min(960px,calc(100% - 36px)); margin:0 auto 20px; border:1px solid var(--line); background:var(--paper); border-radius:16px; min-height:112px; padding:14px 18px; display:grid; grid-template-columns:220px 120px 1fr; align-items:center; gap:14px; }
.self-id { display:flex; align-items:center; gap:12px; min-width:0; }
.self-id .avatar { width:62px; height:62px; font-size:34px; }
.self-name { font-weight:900; font-size:20px; }
.self-chip { margin-top:5px; font-weight:800; }
.score-box { border-left:1px dashed var(--line); border-right:1px dashed var(--line); text-align:center; padding:4px 12px; }
.score-box b { font-size:28px; }
.self-cards-title { font-size:12px; font-weight:800; color:var(--muted); margin-bottom:8px; }
.self-cards { display:flex; flex-wrap:wrap; gap:7px; }
.mini-card { width:54px; height:68px; border:1px solid var(--ink); background:#fff; border-radius:8px; display:grid; place-items:center; font-weight:900; font-size:20px; }
.empty-cards { color:var(--muted); font-size:13px; }

.result-main { width:min(900px,calc(100% - 32px)); margin:0 auto; padding:44px 0 80px; }
.result-hero { text-align:center; margin-bottom:28px; }
.ranking { display:grid; gap:10px; }
.rank-row { background:#fff; border:1px solid var(--line); border-radius:14px; padding:14px 16px; display:grid; grid-template-columns:56px 1fr auto; align-items:center; gap:10px; }
.rank-row.winner { border:3px solid var(--ink); padding:12px 14px; }
.rank-num { font-weight:900; font-size:22px; }
.rank-player { display:flex; gap:10px; align-items:center; min-width:0; }
.rank-score { font-size:24px; font-weight:900; }
.rank-detail { grid-column:2 / 4; color:var(--muted); font-size:12px; padding-left:54px; }
.result-actions { width:min(420px,100%); margin:28px auto 0; }
.result-actions .btn { width:100%; }

.rules-dialog { width:min(680px,calc(100% - 28px)); border:1px solid var(--line); border-radius:18px; padding:0; background:#fff; color:var(--ink); }
.rules-dialog::backdrop { background:rgba(0,0,0,.35); }
.dialog-head { display:flex; justify-content:space-between; align-items:center; gap:20px; padding:20px 22px 14px; border-bottom:1px solid var(--line); }
.dialog-head h2 { margin:0; }
.icon-btn { width:42px; height:42px; border:1px solid var(--line); border-radius:50%; background:#fff; font-size:24px; }
.rules-body { padding:18px 22px 24px; line-height:1.7; }
.rules-body li { margin:7px 0; }
.rule-note { margin-top:18px; background:var(--soft); border-radius:12px; padding:14px; font-size:13px; }

@media (max-width: 760px) {
  .home-screen { min-height:auto; padding:28px 16px; justify-content:flex-start; }
  .brand-block { align-items:flex-start; }
  .brand-card { width:62px; height:86px; font-size:34px; border-width:2px; }
  h1 { font-size:42px; }
  .subtitle { font-size:15px; }
  .home-grid { grid-template-columns:1fr; }
  .icon-picker { grid-template-columns:repeat(6,1fr); }
  .topbar { min-height:56px; padding:6px 10px; gap:8px; font-size:12px; }
  .game-topbar { grid-template-columns:1fr auto auto 1fr; }
  .room-title { display:block; text-align:center; line-height:1.25; }
  .room-title b { display:block; }
  .room-title span { display:block; font-size:11px; }
  .turn-top { font-size:11px; max-width:78px; text-align:right; }
  .btn.small { min-height:34px; padding:0 10px; }
  .deck-mini { gap:4px; }
  .opponents { min-height:182px; padding:16px 12px 4px; grid-template-columns:repeat(5,minmax(0,1fr)); gap:7px 5px; }
  .player-tile { padding:6px 5px; grid-template-columns:26px 1fr; grid-template-areas:'avatar chips' 'main main'; gap:4px; min-height:82px; align-content:center; }
  .player-tile.current { padding:4px 3px; }
  .player-tile.current::before { top:-16px; left:3px; padding:2px 4px; font-size:8px; }
  .player-tile .avatar { width:26px; height:26px; font-size:15px; grid-area:avatar; }
  .tile-main { grid-area:main; min-width:0; }
  .tile-name { font-size:10px; line-height:1.15; text-align:center; min-height:2.3em; display:flex; align-items:center; justify-content:center; } 
  .tile-cards { font-size:9px; margin-top:2px; }
  .tile-chips { position:static; grid-area:chips; justify-self:end; align-self:center; font-size:9px; }
  .table-area { width:calc(100% - 24px); grid-template-columns:76px 1fr; padding:22px 0 18px; min-height:440px; align-items:center; }
  .deck-stack { grid-column:1; }
  .deck-card { width:68px; height:98px; font-size:30px; }
  .deck-caption { font-size:10px; }
  .center-stack { grid-column:2; width:100%; }
  .section-label { font-size:14px; margin-bottom:12px; }
  .active-card { width:180px; height:240px; border-width:2px; font-size:86px; }
  .pot { font-size:20px; }
  .action-buttons { gap:10px; margin-top:20px; }
  .btn.take,.btn.pass { min-height:50px; font-size:14px; padding:0 8px; }
  .waiting { margin-top:20px; min-height:50px; font-size:12px; }
  .event-toast { min-height:38px; font-size:11px; }
  .self-panel { width:calc(100% - 24px); margin-bottom:14px; min-height:132px; padding:12px; grid-template-columns:112px 82px 1fr; gap:8px; }
  .self-id { display:grid; grid-template-columns:48px 1fr; gap:7px; }
  .self-id .avatar { width:48px; height:48px; font-size:27px; grid-row:1 / 3; }
  .self-name { font-size:17px; }
  .self-chip { font-size:14px; margin:0; }
  .score-box { padding:4px 6px; }
  .score-box b { font-size:22px; }
  .self-cards-title { font-size:10px; }
  .mini-card { width:38px; height:48px; border-radius:6px; font-size:15px; }
  .self-cards { gap:5px; }
  .rank-detail { padding-left:0; grid-column:1 / 4; }
}

@media (max-width: 380px) {
  .topbar { font-size:11px; }
  .btn.small { padding:0 8px; font-size:12px; }
  .opponents { padding-left:8px; padding-right:8px; }
  .table-area { width:calc(100% - 16px); grid-template-columns:68px 1fr; }
  .deck-card { width:60px; height:88px; }
  .active-card { width:168px; height:224px; font-size:82px; }
  .self-panel { width:calc(100% - 16px); grid-template-columns:102px 72px 1fr; padding:10px 8px; }
}