:root {
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans JP", sans-serif;
  color: #f4f5f7;
  background: #0c1017;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
}
* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; min-height: 100vh; background: radial-gradient(circle at 50% -20%, #283348 0, #121824 34%, #0b0f16 75%); }
button, input { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .5; }
.shell { width: min(1320px, calc(100% - 28px)); margin: 0 auto; padding: 22px 0 40px; }
.topbar { display: flex; gap: 20px; align-items: flex-start; justify-content: space-between; margin-bottom: 14px; }
.eyebrow { margin: 0 0 4px; color: #ff7f72; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; }
h1 { margin: 0; font-size: clamp(24px, 3.6vw, 36px); letter-spacing: -.03em; }
.subtitle { margin: 6px 0 0; color: #98a2b3; font-size: 14px; }
.connection-box { flex: 0 0 auto; display: grid; justify-items: end; gap: 5px; }
.status { display: flex; align-items: center; gap: 8px; padding: 8px 11px; border: 1px solid #2e3746; border-radius: 999px; color: #aab3c2; background: #101722; font-size: 13px; }
.status span { width: 8px; height: 8px; border-radius: 99px; background: #6b7280; }
.status.online span { background: #4ade80; box-shadow: 0 0 0 4px #4ade8020; }
.status.warning span { background: #f6bd60; box-shadow: 0 0 0 4px #f6bd6020; }
.status.offline span { background: #f97066; box-shadow: 0 0 0 4px #f9706620; }
.status-meta { color: #707d90; font-size: 10px; }
.status-retry { min-height: 30px; padding: 4px 9px; font-size: 11px; border-radius: 999px; background: #1b2432; }
.notice { border-left: 3px solid #f97066; background: #f970660d; color: #cfd5df; padding: 10px 13px; border-radius: 0 8px 8px 0; margin-bottom: 14px; font-size: 13px; }
.session-notice { margin-bottom: 14px; padding: 10px 13px; border: 1px solid #f9706655; border-radius: 10px; color: #f1c1bc; background: #f9706610; font-size: 13px; }
.layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 14px; align-items: start; }
.main-column, .side-column { display: grid; gap: 14px; min-width: 0; }
.panel { border: 1px solid #293244; background: #111722e8; border-radius: 14px; padding: 15px; box-shadow: inset 0 1px #ffffff08; }
.panel-title { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 12px; }
.panel-title span { font-weight: 750; }
.panel-title small { color: #8d98aa; font-size: 11px; }
.lobby-grid { max-width: 570px; display: grid; gap: 11px; }
label { display: grid; gap: 6px; color: #bac3d0; font-size: 13px; }
input { width: 100%; min-height: 42px; padding: 9px 11px; color: #f6f7f9; background: #0c121b; border: 1px solid #323c4d; border-radius: 9px; outline: none; }
input:focus { border-color: #75839a; box-shadow: 0 0 0 3px #7d8ca61d; }
button { min-height: 42px; padding: 9px 15px; color: #edf1f7; background: #222b3a; border: 1px solid #394457; border-radius: 9px; font-weight: 700; }
button.primary { background: #cf453d; border-color: #e36158; }
button.ghost { background: transparent; }
.mini-button { min-height: 30px; padding: 5px 9px; font-size: 11px; background: #161f2c; }
.divider { position: relative; text-align: center; color: #7f899a; font-size: 12px; }
.divider::before { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: #293244; }
.divider span { position: relative; padding: 0 12px; background: #111722; }
.help, .muted, .room-help { color: #8792a4; font-size: 12px; }
.room-help { margin: 9px 0 0; }
.rule-summary { display: grid; gap: 8px; }
.rule-summary > div { display: grid; grid-template-columns: 58px 1fr; gap: 10px; align-items: start; color: #c8cfda; font-size: 13px; }
.rule-summary b { color: #61d896; font-size: 12px; }
.rule-summary .draft b { color: #f6bd60; }
.inline-details { margin-top: 13px; border-top: 1px solid #293244; padding-top: 10px; }
.inline-details summary, .reference-details summary, .compact-details summary { color: #aeb8c7; cursor: pointer; }
.todo-list { color: #9ea8b8; padding-left: 20px; line-height: 1.65; font-size: 12px; }
.room-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.room-heading { flex: 1; min-width: 0; }
.room-title-line { display: flex; align-items: flex-start; gap: 10px; }
.room-title-line .panel-title { justify-content: flex-start; margin-bottom: 8px; }
.players { display: flex; flex-wrap: wrap; gap: 7px; }
.player { display: flex; align-items: center; gap: 6px; padding: 5px 8px; border: 1px solid #2e394a; border-radius: 999px; color: #cbd2dc; font-size: 12px; }
.player.me { border-color: #8f514c; background: #cf453d14; }
.player em { font-style: normal; font-size: 8px; letter-spacing: .08em; color: #f5a49d; }
.avatar { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: #293244; font-weight: 700; }
.table-panel { padding: 14px 15px; }
.phase-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 14px; }
.phase-row > div { padding: 9px 10px; background: #0d131d; border: 1px solid #252f40; border-radius: 9px; }
.phase-row small { display: block; color: #7f8999; margin-bottom: 2px; font-size: 10px; }
.phase-row strong { font-size: 14px; }
h2 { font-size: 13px; margin: 0 0 8px; color: #d7dce5; }
.community { text-align: center; padding: 3px 0 15px; }
.card-row { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.card { display: grid; place-items: center; width: 68px; aspect-ratio: 2/3; border: 1px solid #465168; border-radius: 9px; background: linear-gradient(145deg, #f6f1e7, #d9d3c9); color: #17202d; font-size: 26px; font-weight: 900; box-shadow: 0 7px 16px #0006; }
.card.empty { color: #5f6b7d; background: #151d29; border-style: dashed; box-shadow: none; }
.card-row.small .card { width: 64px; }
.card.art { aspect-ratio: 530 / 742; overflow: hidden; padding: 0; background: #090c11; border-color: #3a4558; }
.card.art img { width: 100%; height: 100%; display: block; object-fit: contain; user-select: none; }
.card-row.small .card.art { width: 66px; }
.my-area { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; padding: 13px 0; border-top: 1px solid #293244; border-bottom: 1px solid #293244; }
.own-cards { justify-content: flex-start; }
.special-placeholder { min-height: 104px; border: 1px dashed #49546a; border-radius: 10px; color: #8994a6; background: #0d131d; }
.art-placeholder { display: flex; align-items: center; justify-content: center; gap: 12px; }
.art-placeholder .special-back-art { width: 76px; flex: 0 0 auto; }
.art-placeholder > span { color: #8994a6; font-size: 12px; }
.start-box { margin-top: 13px; display: flex; justify-content: space-between; align-items: center; gap: 13px; padding: 11px 12px; border-radius: 10px; }
.start-box p { margin: 3px 0 0; color: #99a4b4; font-size: 12px; }
.start-box.blocked { background: #ef9b3b0d; border: 1px solid #ef9b3b42; }
.start-box.ready { background: #4ade8010; border: 1px solid #4ade8045; }
.special-reference { padding-bottom: 12px; }
.special-preview-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 9px; }
.special-preview-grid article { min-width: 0; text-align: center; padding: 8px; background: #0d131d; border: 1px solid #293244; border-radius: 9px; }
.special-card-art { width: min(100%, 108px); aspect-ratio: 530 / 742; display: block; margin: 0 auto 7px; object-fit: contain; border-radius: 7px; box-shadow: 0 5px 13px #0007; }
.special-preview-grid strong, .special-preview-grid span { display: block; }
.special-preview-grid strong { color: #f0b0aa; font-size: 12px; }
.special-preview-grid span { color: #8290a5; font-size: 10px; margin-top: 2px; }
.reference-details { margin-top: 10px; border-top: 1px solid #293244; padding-top: 9px; font-size: 12px; }
.special-description-grid { margin-top: 10px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.special-description-grid article { padding: 9px 10px; background: #0d131d; border: 1px solid #293244; border-radius: 8px; }
.special-description-grid strong { color: #f0b0aa; font-size: 12px; }
.special-description-grid p { color: #b5bdca; font-size: 11px; line-height: 1.55; margin: 5px 0 0; }
.compact-details { padding: 12px 15px; }
.compact-details > summary { display: flex; justify-content: space-between; gap: 12px; list-style-position: inside; font-weight: 700; }
.compact-details > summary small { color: #8d98aa; font-weight: 400; }
.compact-details p { margin: 10px 0 0; color: #b5bdca; line-height: 1.65; font-size: 12px; }
.draft-panel { border-color: #4c4231; }
.chat-panel { position: sticky; top: 12px; }
.chat-log { min-height: 310px; max-height: min(500px, calc(100vh - 250px)); overflow: auto; padding: 3px 1px 9px; display: grid; align-content: start; gap: 9px; }
.message { max-width: 90%; }
.message.mine { justify-self: end; }
.message > div { display: flex; gap: 7px; align-items: baseline; margin: 0 5px 3px; color: #9da8b8; font-size: 10px; }
.message time { color: #687486; }
.message p { margin: 0; padding: 8px 10px; border-radius: 11px 11px 11px 3px; background: #202a39; color: #e5e9f0; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 12px; }
.message.mine p { background: #87352f; border-radius: 11px 11px 3px 11px; }
.chat-form { display: grid; grid-template-columns: 1fr auto; gap: 7px; border-top: 1px solid #293244; padding-top: 10px; }
.chat-form input { min-height: 40px; }
.chat-form button { min-height: 40px; }
.center { text-align: center; margin-top: 70px; }
@media (max-width: 980px) {
  .layout { grid-template-columns: 1fr; }
  .chat-panel { position: static; }
  .chat-log { min-height: 220px; max-height: 360px; }
}
@media (max-width: 720px) {
  .shell { width: min(100% - 18px, 1320px); padding-top: 16px; }
  .topbar, .room-header, .start-box { flex-direction: column; }
  .connection-box { justify-items: start; }
  .phase-row { grid-template-columns: 1fr 1fr 1fr; }
  .my-area { grid-template-columns: 1fr; }
  .special-preview-grid { grid-template-columns: repeat(3, 1fr); }
  .special-description-grid { grid-template-columns: 1fr; }
  .room-title-line { flex-wrap: wrap; }
}
@media (max-width: 480px) {
  .phase-row { grid-template-columns: 1fr; }
  .special-preview-grid { grid-template-columns: repeat(2, 1fr); }
  .card { width: 54px; }
  .card-row.small .card.art { width: 60px; }
}

/* v0.4.0 playtest game UI */
select { min-height: 36px; padding: 6px 8px; color: #eef2f7; background: #0c121b; border: 1px solid #384457; border-radius: 8px; }
.playtest-notice { border-left-color: #61d896; background: #4ade800a; }
.player strong { color: #f6bd60; font-size: 10px; margin-left: 2px; }
.player i { color: #f97066; font-size: 9px; font-style: normal; font-weight: 800; }
.player.folded { opacity: .58; }
.game-phase-row { grid-template-columns: repeat(4, 1fr); }
.game-my-area { align-items: start; }
.special-hand { display: flex; gap: 8px; flex-wrap: wrap; }
.hand-special { width: 82px; text-align: center; }
.hand-special img { width: 72px; aspect-ratio: 530/742; object-fit: contain; border-radius: 7px; box-shadow: 0 5px 12px #0007; }
.hand-special span { display: block; color: #d7dce5; font-size: 10px; margin-top: 3px; }
.peek-result { margin-top: 8px; padding: 8px 10px; border-radius: 8px; background: #5d4a161c; border: 1px solid #d6aa4a44; color: #e7d8ad; font-size: 12px; }
.peek-result b { font-size: 16px; color: #ffd477; }
.action-panel { margin-top: 13px; padding: 12px; border: 1px solid #334055; border-radius: 11px; background: #0d141f; display: grid; gap: 10px; }
.action-heading { display: flex; justify-content: space-between; gap: 12px; align-items: center; }
.action-heading span { color: #8f9bad; font-size: 11px; }
.action-buttons { display: flex; gap: 8px; flex-wrap: wrap; }
.action-wait { margin: 0; color: #f6bd60; font-size: 11px; }
.action-error { margin: 0; padding: 7px 9px; border-radius: 7px; color: #ffc2bc; background: #f9706612; border: 1px solid #f9706638; font-size: 11px; }
.danger-action { border-color: #d96e624f; background: #7e302811; }
.result-action, .final-action { border-color: #5bc88a4b; background: #2c77591a; }
.special-action-list { display: grid; gap: 8px; }
.special-action-card { display: grid; grid-template-columns: 54px minmax(0, 1fr); gap: 9px; align-items: center; padding: 8px; border: 1px solid #293244; border-radius: 9px; background: #111a26; }
.special-action-card > img { width: 50px; aspect-ratio: 530/742; object-fit: contain; border-radius: 5px; }
.special-action-card > div { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px; align-items: center; }
.special-action-card p { grid-column: 1 / -1; margin: 0; color: #8995a7; font-size: 10px; }
.special-action-card button { min-height: 34px; padding: 6px 10px; font-size: 11px; }
.special-action-card select { min-width: 120px; }
.pickup-selects { display: flex; gap: 6px; flex-wrap: wrap; }
.pickup-selects label { font-size: 10px; }
.select-card-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.card-button { padding: 0; min-height: 0; border: 0; background: transparent; }
.card-button .card { width: 64px; }
.round-result { margin-top: 13px; padding: 11px; border-top: 1px solid #293244; }
.round-result > p { margin: 4px 0 9px; color: #c4ccd7; font-size: 12px; }
.showdown-list { display: flex; gap: 8px; flex-wrap: wrap; }
.showdown-list article { min-width: 130px; padding: 8px; border: 1px solid #2b3648; border-radius: 8px; background: #0d141f; }
.showdown-list article > strong, .showdown-list article > span { display: block; }
.showdown-list article > span { color: #f6bd60; font-size: 10px; margin: 2px 0 6px; }
.mini-card-row { display: flex; gap: 4px; }
.mini-card-row img { width: 34px; aspect-ratio: 530/742; object-fit: contain; border-radius: 4px; }
.final-result { margin-top: 12px; padding: 12px; border-radius: 10px; background: #0b121c; border: 1px solid #3b485c; }
.ranking { display: grid; grid-template-columns: 28px 1fr auto; gap: 8px; padding: 7px 8px; border-bottom: 1px solid #252f40; align-items: center; }
.ranking:last-child { border-bottom: 0; }
.ranking.winner { color: #ffe09a; background: #f6bd600c; }
.ranking > b { color: #8d98aa; }
.game-side { display: grid; gap: 9px; }
.side-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.side-stats > div { padding: 7px 8px; border: 1px solid #293244; border-radius: 8px; background: #0d141f; }
.side-stats span, .side-stats b { display: block; }
.side-stats span { color: #7f8999; font-size: 9px; }
.side-stats b { margin-top: 2px; font-size: 11px; }
.game-log { max-height: 170px; overflow: auto; border-top: 1px solid #293244; padding-top: 6px; }
.game-log p { margin: 0; padding: 5px 2px; color: #9ea9b9; font-size: 10px; border-bottom: 1px solid #202a38; }
.game-error { border-color: #f9706666; }
@media (max-width: 720px) {
  .game-phase-row { grid-template-columns: 1fr 1fr; }
  .special-action-card { grid-template-columns: 48px minmax(0, 1fr); }
  .special-action-card > div { grid-template-columns: 1fr; }
}

/* v0.5.0 latest-spec additions */
.game-phase-row { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.player.out { opacity: .36; filter: grayscale(.55); }
.player i { margin-left: 3px; }
.audio-settings { display: grid; grid-template-columns: auto 1fr; gap: 8px 10px; align-items: center; }
.audio-settings .panel-title, .audio-settings small { grid-column: 1 / -1; }
.audio-settings label { font-size: 11px; color: #d7dce5; white-space: nowrap; }
.audio-settings input[type="range"] { width: 100%; accent-color: #d45449; }
.tutorial-backdrop { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: 20px; background: #05080dcf; backdrop-filter: blur(3px); }
.tutorial-card { width: min(560px, 100%); border: 1px solid #455166; border-radius: 16px; background: #111925; box-shadow: 0 24px 70px #000b; padding: 22px; }
.tutorial-progress { color: #f39b91; font-size: 11px; font-weight: 800; letter-spacing: .08em; }
.tutorial-card h2 { margin: 8px 0 10px; color: #f5f7fa; font-size: 22px; }
.tutorial-card p { min-height: 82px; margin: 0; color: #c8d0db; line-height: 1.75; font-size: 14px; }
.tutorial-actions { display: grid; grid-template-columns: auto 1fr auto auto; gap: 8px; align-items: center; margin-top: 18px; }
@media (max-width: 720px) {
  .game-phase-row { grid-template-columns: 1fr 1fr; }
  button, .mini-button, .status-retry, .special-action-card button, .chat-form button { min-height: 48px; }
  select, input { min-height: 48px; }
  .tutorial-backdrop { align-items: end; padding: 10px; }
  .tutorial-card { padding: 18px; border-radius: 14px; }
  .tutorial-card p { min-height: 118px; }
  .tutorial-actions { grid-template-columns: 1fr 1fr; }
  .tutorial-actions span { display: none; }
}

.current-hand {
  margin: .6rem 0 0;
  display: flex;
  gap: .6rem;
  align-items: baseline;
}
.current-hand small { opacity: .72; }
.current-hand strong { font-size: 1.05rem; }

/* v0.6.0 accessibility hardening */
:where(button, input, select, textarea, a[href], [tabindex]):focus-visible {
  outline: 3px solid currentColor;
  outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}