:root {
  color-scheme: light;
  --paper: #f7f8fa;
  --surface: #ffffff;
  --ink: #24282e;
  --muted: #69717b;
  --line: #e3e7ec;
  --accent: #4c668c;
  --accent-soft: #eaf0f8;
  --green: var(--accent);
  --sun: #dcaa60;
  --display: Georgia, "Songti SC", "STSong", serif;
  --serif: var(--display);
  --body: "PingFang SC", "Avenir Next", "Microsoft YaHei", sans-serif;
  --board: #eaf0f5;
  --board-grid: #cad4e480;
  --shadow: 0 12px 36px #21354d07;
  --tile-wood: #a8baa1;
  --tile-brick: #cda58e;
  --tile-wool: #d1d9ad;
  --tile-grain: #e1c58d;
  --tile-ore: #b1bbbd;
  --tile-desert: #e1d6ba;
}
html.dark {
  color-scheme: dark;
  --paper: #0c0e12;
  --surface: #13161c;
  --ink: #eceef2;
  --muted: #a4acb8;
  --line: #282d37;
  --accent: #abc0e0;
  --accent-soft: #202a3a;
  --board: #1b222c;
  --board-grid: #77869b38;
  --shadow: 0 12px 36px #00000018;
  --tile-wood: #687e66;
  --tile-brick: #a17967;
  --tile-wool: #8c9b72;
  --tile-grain: #ae935e;
  --tile-ore: #7e8d96;
  --tile-desert: #a29678;
}
body { --green: var(--accent); --action: color-mix(in srgb, var(--accent) 84%, #16202c); --action-ink: #ffffff; --board: color-mix(in srgb, var(--accent-soft) 65%, var(--paper)); --board-grid: color-mix(in srgb, var(--accent) 20%, transparent); background: var(--paper); color: var(--ink); font-family: var(--body); -webkit-font-smoothing: antialiased; }
body.game-carcassonne { --accent: #697d9d; --accent-soft: #e7edf5; }
body.game-catan { --accent: #aa7641; --accent-soft: #f4e9d6; }
html.dark body { --action: var(--accent); --action-ink: var(--paper); }
html.dark body.game-carcassonne { --accent: #a9bfdb; --accent-soft: #293646; }
html.dark body.game-catan { --accent: #d6ae7a; --accent-soft: #3e3528; }
button, input, select, output { font-family: var(--body); }
h1, h2, h3 { font-family: var(--display); color: var(--ink); }
button, input, select { border-radius: 12px; }
button, .home-link { transition: background .18s, border-color .18s, box-shadow .18s, transform .18s; }
button { background: var(--surface); border-color: var(--line); color: var(--ink); }
button:hover:not(:disabled) { background: var(--accent-soft); border-color: var(--accent); }
button:active:not(:disabled) { transform: translateY(1px); }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 3px;
}
input, select { background: var(--paper); color: var(--ink); border: 1px solid var(--line); }
input[type="range"], input[type="checkbox"] { accent-color: var(--accent); }
header { background: var(--paper); border-color: var(--line); gap: 16px; }
.brand { align-items: center; font-family: var(--display); font-weight: 400; gap: 12px; letter-spacing: 1px; }
.brand .brand-mark {
  display: grid; place-items: center; flex: 0 0 38px; width: 38px; height: 38px;
  border: 1px solid color-mix(in srgb, var(--accent) 25%, var(--line)); border-radius: 12px 12px 4px 12px; background: var(--accent-soft); color: var(--accent);
  font: italic 25px/1 var(--display); letter-spacing: -2px; padding-right: 2px;
}
.brand small { font-family: var(--body); color: var(--muted); letter-spacing: 1.5px; }
.room, #connection, .quiet { color: var(--muted); }
header nav { gap: 6px; min-width: 0; }
header nav button, .home-link {
  min-width: 34px; min-height: 34px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 11px; background: var(--surface); border: 1px solid var(--line); color: var(--ink);
}
.home-link { padding: 0 11px; gap: 5px; text-decoration: none; font: 11px var(--body); white-space: nowrap; }
.home-link:hover { background: var(--accent-soft); border-color: var(--accent); }
[data-theme-toggle] { font-size: 17px; }
.skip-link { position: fixed; top: -60px; left: 16px; z-index: 200; background: var(--surface); color: var(--ink); padding: 12px; border: 1px solid var(--accent); border-radius: 12px; }
.skip-link:focus { top: 12px; }
.eyebrow { color: var(--muted); font-family: var(--body); letter-spacing: 2.4px; }
.muted, .subtle, .sidebar-foot, .rule-note, .settings-note { color: var(--muted); }
.primary { background: var(--action); border-color: var(--action); color: var(--action-ink); border-radius: 12px; }
html.dark .primary { color: var(--paper); }
.primary:hover:not(:disabled) { background: var(--ink); border-color: var(--ink); color: var(--surface); }
.secondary, .choice-row input { background: var(--surface); border-color: var(--line); color: var(--ink); }
.pill, .phase-pill, #lobbySettings { background: var(--accent-soft); color: var(--accent); border: 1px solid var(--line); border-radius: 10px; }
.player { border-radius: 14px; }
.player.active { background: var(--accent-soft); border-color: var(--line); }
.player strong, .player .score, .score, .number-text, .resource strong, .resource small, #playerCount,
#roomCount, #tileCounter, #zoomValue, #zoomLabel { font-family: var(--body); font-variant-numeric: lining-nums tabular-nums; }
.player .score, .resource strong { font-weight: 600; }
.player small, .seat small, .tile-hint, .board-help, .bottom-status, .hand-heading, .bank-status, .board-caption, .compass { color: var(--muted); }
.badge { color: var(--accent); }
.activity, .host-settings, .room-management, .seat, #log>div, .bottom-status { border-color: var(--line); }
.dice-panel, .offer, .resource, .resource-card, .catalog-tile, .audio-settings, .audio-option, .audio-volume {
  background-color: var(--accent-soft); border-color: var(--line); border-radius: 14px; color: var(--ink);
}
.catalog-tile strong, .catalog-tile p, .catalog-tile small, .audio-note, #audioStatus { color: var(--muted); }
.rule-note, .audio-section { background: var(--accent-soft); border-color: var(--line); border-radius: 14px; }
.rule-note p, .rule-note strong, .audio-section p, .audio-volume-label { color: var(--muted); }
.audio-section input[type="range"], .audio-toggle input { accent-color: var(--accent); }
.tile-preview { background-color: var(--paper); background-image: radial-gradient(var(--line) 1px, transparent 1px); border-radius: 16px; }
#boardViewport {
  background-color: var(--board); border-color: var(--line); border-radius: 20px;
  background-image: linear-gradient(var(--board-grid) 1px, transparent 1px), linear-gradient(90deg, var(--board-grid) 1px, transparent 1px);
  background-size: 38px 38px; box-shadow: inset 0 0 50px #fcfcf812;
}
.board-grain { opacity: .12; }
.board-toolbar button { background: var(--surface); border-color: var(--line); color: var(--ink); }
.empty-island { fill: var(--accent-soft); stroke: var(--line); }
.number { fill: var(--surface); stroke: var(--line); }
.number-text, .dots { fill: var(--ink); }
.number-text.hot { fill: #b55143; }
html.dark .number-text.hot { fill: #efac8d; }
.tile-label { fill: #263b30; font-family: var(--body); font-weight: 600; paint-order: stroke; stroke: #fcfcf840; stroke-width: 2px; }
.port { fill: var(--surface); stroke: var(--line); }
.port-label { fill: var(--ink); font-family: var(--body); }
.terrain-hex { stroke: var(--surface); stroke-width: 2.5; stroke-linejoin: round; }
.terrain-wood { fill: var(--tile-wood); }
.terrain-brick { fill: var(--tile-brick); }
.terrain-wool { fill: var(--tile-wool); }
.terrain-grain { fill: var(--tile-grain); }
.terrain-ore { fill: var(--tile-ore); }
.terrain-desert { fill: var(--tile-desert); }
.terrain-illustration { fill: none; stroke: #263b30; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; opacity: .55; }
.resource .resource-image { display: grid; place-items: center; background-image: none; background-color: transparent; }
.resource-image svg { width: 34px; height: 34px; fill: none; stroke: var(--accent); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
dialog, #lobby, #undoPanel { background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow); }
dialog::backdrop { background: #17181b7a; backdrop-filter: blur(4px); }
dialog p, dialog small, dialog li, .audio-toggle span, .audio-slider span { color: var(--muted); }
dialog h2, dialog h3, dialog strong, dialog label { color: var(--ink); }
#lobby { max-width: 640px; padding: clamp(24px, 5vw, 40px); margin-top: clamp(24px, 6vh, 68px); }
#lobby h1 { font-size: clamp(25px, 3vw, 32px); line-height: 1.5; letter-spacing: -.5px; }
#lobby>p { color: var(--muted); }
#nickname { background: var(--paper); border-color: var(--line); color: var(--ink); border-radius: 12px; }
#lobbySettings { line-height: 1.8; padding: 12px 14px; }
#lobbyActions button, #joinForm button { border-radius: 12px; }
.toast, #toast { background: var(--ink); color: var(--surface); border-radius: 14px; }
html.dark .board-help span, html.dark .board-help, html.dark .board-caption { background-color: transparent; }
html.dark #undoPanel { background: var(--surface); }
html.dark .legal-slot { background: #6c94782e; }
html.dark .selected-preview>span { background: #222428e8; color: var(--ink); }
html.dark .steps>div>span, html.dark .steps span { background: var(--accent-soft); border-color: var(--line); color: var(--ink); }
html.dark kbd { background: var(--accent-soft); color: var(--ink); border-color: var(--line); }
html.dark .follower-handle, html.dark #claimChoices, html.dark #desktopClaimChoices { background-color: var(--surface); border-color: var(--line); }
html.dark .audio-option small, html.dark .audio-settings small { color: var(--muted); }
html.dark .game-carcassonne .player { background: var(--surface); border-color: var(--line); }
html.dark .game-carcassonne .player.active { background: var(--accent-soft); }
.game-carcassonne .mobile-controls button { background: var(--surface); color: var(--ink); border-color: var(--line); }
.game-carcassonne .mobile-controls .primary { background: var(--action); color: var(--action-ink); }
html.dark .game-carcassonne .mobile-controls .primary { color: var(--paper); }
html.dark .game-carcassonne:not(.in-lobby) .bottom-status { background: var(--surface); color: var(--muted); }
@media (min-width: 1101px) {
  header { height: 88px; padding: 0 max(28px, calc((100vw - 1640px) / 2)); }
  main { max-width: 1680px; margin: 0 auto; padding: 24px; gap: 18px; grid-template-columns: 218px minmax(340px, 1fr) 276px; min-height: calc(100dvh - 88px); }
  .players-panel, .action-panel, .play-area { min-width: 0; padding: 23px 20px; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow); }
  .play-area { padding: 23px 22px; }
  .board-heading { gap: 12px; }
  .board-heading h1 { font-size: clamp(18px, 1.5vw, 25px); line-height: 1.55; }
  .board-toolbar { gap: 8px; }
  #turnLabel { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .board-toolbar>div { min-width: 0; }
}
@media (min-width: 851px) and (max-width: 1100px) {
  header { padding-left: 20px; padding-right: 20px; }
  .players-panel, .play-area, .action-panel { background: var(--surface); }
  .play-area { padding-left: 16px; padding-right: 16px; }
}
@media (max-width: 850px), (max-width: 1000px) and (max-height: 500px) {
  header { gap: 7px; }
  .brand { letter-spacing: 0; gap: 7px; }
  .brand .brand-mark { width: 29px; height: 29px; flex-basis: 29px; font-size: 21px; }
  .brand small { letter-spacing: .6px; }
  header nav { gap: 3px; }
  header nav button, .home-link { min-width: 29px; min-height: 30px; padding: 5px 6px; }
  .home-link span { display: none; }
  header #connection { display: none; }
  #boardViewport { border-radius: 14px; }
  body.in-game header, body:not(.in-lobby).game-carcassonne header { background: color-mix(in srgb, var(--paper) 94%, transparent); }
  body.in-game .players-panel, body.in-game .action-panel, body:not(.in-lobby).game-carcassonne .action-panel,
  body:not(.in-lobby).game-carcassonne .players-panel { background: var(--surface); border-color: var(--line); }
  body:not(.in-lobby).game-carcassonne .action-panel, body:not(.in-lobby).game-carcassonne .players-panel { border-radius: 18px; }
  body.in-game #handPanel .resource { background: var(--surface); border-color: var(--line); }
  body.in-game #actions button { border-radius: 9px; }
  body.in-game #actions .action-grid button { background: var(--surface); }
  body.in-game #actions .action-grid button.active { background: var(--accent-soft); border-color: var(--accent); }
  body.in-game #mobileNav { border-color: var(--line); }
  body.in-game #mobileNav span { background: var(--accent-soft); }
  .game-carcassonne .board-toolbar>div:first-child { min-width: 0; flex: 1; display: block; background: var(--surface); }
  .game-carcassonne .board-toolbar .live-dot { display: none; }
  .game-carcassonne .board-toolbar #turnLabel { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .game-carcassonne .board-actions { flex-shrink: 0; }
  .game-carcassonne #rotate { background: var(--surface); border-color: var(--line); }
  .game-carcassonne .tile-preview { background-color: transparent; }
  #lobby { margin-top: 24px; }
  #lobby h1 { font-size: 25px; }
}
@media (max-width: 390px) {
  .game-carcassonne header .brand { font-size: 20px; gap: 6px; }
  .game-carcassonne header nav button { font-size: 10px; padding: 4px; }
  .game-carcassonne header #catalogButton { min-width: 27px; }
}
body.in-lobby { min-height: 100dvh; background: radial-gradient(ellipse at 74% 0%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 58%), var(--paper); background-repeat: no-repeat; }
body > header { background: var(--paper); }
body.in-lobby > header { position: relative; width: min(1120px, calc(100% - 96px)); height: auto; min-height: 78px; padding: 14px 22px; margin: 22px auto 0; gap: 20px; border: 1px solid color-mix(in srgb, var(--line) 72%, transparent); border-radius: 40px; box-shadow: 0 8px 28px #21354d0c, inset 0 1px 0 #ffffffa6; }
body.in-lobby > header .brand { font-size: 22px; letter-spacing: .04em; gap: 12px; flex-shrink: 0; }
body.in-lobby > header .brand-mark { width: 35px; height: 38px; flex-basis: 35px; font-size: 29px; background: transparent; border-radius: 10px 10px 3px 10px; }
body.in-lobby > header .brand small { display: none; }
body.in-lobby > header nav { display: flex; flex-wrap: wrap; gap: 7px; justify-content: flex-end; }
body.in-lobby > header nav button, body.in-lobby > header .home-link { min-height: 40px; padding-inline: 11px; border-radius: 22px; font-size: 12px; background: transparent; }
body.in-lobby > header nav button:hover:not(:disabled), body.in-lobby > header .home-link:hover { background: var(--accent-soft); }
body.in-lobby > header .home-link span { display: inline; }
body.in-lobby > header .room { font-size: 11px; gap: 8px; }
body.in-lobby #lobby { padding: clamp(28px, 5vw, 44px); border-radius: 22px; box-shadow: 0 16px 48px #21354d05; }
body.in-lobby #lobby .eyebrow { display: none; }
body.in-lobby #lobby h1 { margin-top: 0; font-size: clamp(28px, 3.2vw, 36px); font-weight: 700; letter-spacing: -.04em; }
body.in-lobby #lobbySettings { background: var(--paper); color: var(--muted); font-size: 12px; border-radius: 9px; }
body.in-lobby #joinForm { gap: 10px; margin-top: 24px; }
body.in-lobby #nickname, body.in-lobby #joinForm button { min-height: 48px; border-radius: 12px; font-size: 16px; }
body.in-lobby .subtle { font-family: var(--body); }
html.dark body.in-lobby > header { box-shadow: 0 8px 28px #0000002b, inset 0 1px 0 #ffffff1f; }
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  body > header { background: color-mix(in srgb, var(--paper) 72%, transparent); backdrop-filter: blur(22px) saturate(125%); -webkit-backdrop-filter: blur(22px) saturate(125%); }
}
@media (prefers-reduced-transparency: reduce) {
  body > header { background: var(--paper); backdrop-filter: none; -webkit-backdrop-filter: none; }
}
@media (max-width: 1000px) {
  body.in-lobby > header { flex-wrap: wrap; gap: 16px; }
  body.in-lobby > header nav { width: 100%; justify-content: flex-start; }
  body.in-lobby > header #connection { display: none; }
}
@media (max-width: 620px) {
  body.in-lobby > header { width: calc(100% - 28px); margin-top: 14px; padding: 18px 16px; gap: 16px 8px; border-radius: 26px; }
  body.in-lobby > header .brand { font-size: 21px; gap: 11px; }
  body.in-lobby > header .brand-mark { width: 32px; height: 36px; flex-basis: 32px; font-size: 27px; }
  body.in-lobby > header .room { margin-left: auto; font-size: 10px; gap: 4px; }
  body.in-lobby > header nav { gap: 6px; }
  body.in-lobby > header nav button, body.in-lobby > header .home-link { min-width: 32px; padding-inline: 8px; font-size: 11px; }
  body.in-lobby #lobby { width: calc(100% - 36px); margin-block: 28px; padding: 24px 20px; }
  body.in-lobby #lobby h1 { font-size: 25px; }
  body.in-lobby #joinForm { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 820px), (max-width: 1000px) and (max-height: 500px) {
  body.game-carcassonne .brand { flex-shrink: 0; white-space: nowrap; }
  body.game-carcassonne > header .header-controls #audioButton { width: auto; min-width: 44px; min-height: 44px; padding: 4px; }
  body.game-carcassonne.in-lobby { height: auto; overflow: visible; padding-top: env(safe-area-inset-top); }
  body.game-carcassonne.in-lobby > header { display: grid; grid-template-columns: minmax(0, 1fr) auto; height: auto; min-height: 0; flex-shrink: 0; width: calc(100% - 24px); margin: 12px auto 0; padding: 14px; gap: 12px; border-radius: 24px; }
  body.game-carcassonne.in-lobby > header .room { display: flex; margin: 0; gap: 4px; font-size: 10px; }
  body.game-carcassonne.in-lobby > header nav { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(58px, 1.2fr) repeat(5, minmax(44px, 1fr)); width: 100%; gap: 4px; }
  body.game-carcassonne.in-lobby > header nav button, body.game-carcassonne.in-lobby > header .home-link { display: inline-flex; align-items: center; justify-content: center; width: 100%; min-width: 0; min-height: 44px; padding: 6px; margin: 0; font-size: 12px; white-space: nowrap; }
  body.game-carcassonne.in-lobby #lobby { width: calc(100% - 24px); margin: 16px auto calc(28px + env(safe-area-inset-bottom)); padding: clamp(18px, 5vw, 26px); }
  body.game-carcassonne.in-lobby #lobby h1 { font-size: clamp(23px, 6.5vw, 29px); line-height: 1.45; text-wrap: balance; }
  body.game-carcassonne.in-lobby #lobby > p { font-size: 14px; line-height: 1.8; }
  body.game-carcassonne.in-lobby #lobbySettings { font-size: 12px; }
  body.game-carcassonne.in-lobby .seat { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 5px 8px; min-height: 54px; }
  body.game-carcassonne.in-lobby .seat strong { min-width: 0; max-width: none; font-size: 14px; }
  body.game-carcassonne.in-lobby .seat small { grid-column: 2; margin: 0; font-size: 11px; line-height: 1.5; }
  body.game-carcassonne.in-lobby .seat button { grid-column: 3; grid-row: 1 / 3; min-height: 44px; margin: 0; }
  body.game-carcassonne.in-lobby #lobbyActions > button { min-height: 48px; }
  body.game-carcassonne #retryConnection { min-height: 44px; padding: 8px 0; font-size: 13px; }
  body.game-carcassonne dialog { width: min(520px, calc(100% - 24px)); max-height: calc(100dvh - 32px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); margin: auto; padding: 30px 20px 22px; overscroll-behavior: contain; }
  body.game-carcassonne dialog input, body.game-carcassonne dialog select { font-size: 16px; }
  body.game-carcassonne dialog button { min-height: 44px; }
}
@media (max-width: 374px) {
  body.game-carcassonne.in-lobby > header { padding: 12px 6px; }
  body.game-carcassonne.in-lobby > header nav { grid-template-columns: repeat(6, minmax(44px, 1fr)); gap: 0; }
  body.game-carcassonne.in-lobby > header .home-link span { display: none; }
}
@media (max-width: 820px) and (min-height: 501px), (max-width: 539px) {
  body.game-carcassonne { --mobile-header-height: 56px; --mobile-panel-height: 196px; }
  body.game-carcassonne.has-preview, body.game-carcassonne.has-pending { --mobile-panel-height: 244px; }
  body.game-carcassonne:not(.in-lobby) > header { height: calc(var(--mobile-header-height) + env(safe-area-inset-top)); min-height: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px; padding: calc(4px + env(safe-area-inset-top)) 8px 4px; }
  body.game-carcassonne:not(.in-lobby) > header .brand { font-size: 19px; gap: 6px; }
  body.game-carcassonne:not(.in-lobby) > header .brand-mark { width: 28px; height: 32px; flex-basis: 28px; font-size: 25px; }
  body.game-carcassonne:not(.in-lobby) > header .brand small, body.game-carcassonne:not(.in-lobby) > header .room { display: none; }
  body.game-carcassonne:not(.in-lobby) .header-controls { display: grid; grid-template-columns: repeat(6, minmax(44px, 1fr)); gap: 4px; min-width: 0; }
  body.game-carcassonne:not(.in-lobby) .header-controls button, body.game-carcassonne:not(.in-lobby) .home-link { display: inline-flex; align-items: center; justify-content: center; width: 100%; min-width: 0; min-height: 44px; padding: 4px; margin: 0; font-size: 12px; white-space: nowrap; }
  body.game-carcassonne:not(.in-lobby) .players-panel { top: calc(var(--mobile-header-height) + env(safe-area-inset-top)); padding: 4px 10px; border-radius: 0; }
  body.game-carcassonne:not(.in-lobby) .player { min-width: 148px; padding: 6px 9px; }
  body.game-carcassonne:not(.in-lobby) .player-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; font-size: 12px; }
  body.game-carcassonne:not(.in-lobby) .board-heading { top: calc(var(--mobile-header-height) + 64px + env(safe-area-inset-top)); left: 12px; height: 24px; margin: 0; }
  body.game-carcassonne:not(.in-lobby) .phase-pill { max-width: 104px; margin: 0; padding: 4px 6px; font-size: 10px; }
  body.game-carcassonne:not(.in-lobby) .board-toolbar { top: calc(var(--mobile-header-height) + 62px + env(safe-area-inset-top)); left: 12px; right: 12px; height: auto; display: flex; flex-wrap: wrap; gap: 8px; }
  body.game-carcassonne:not(.in-lobby) .board-toolbar > div:first-child { flex: 0 1 auto; display: flex; flex-direction: row; align-items: center; justify-content: flex-end; flex-wrap: nowrap; gap: 5px; width: calc(100% - 112px); max-width: none; min-height: 28px; margin-left: auto; background: transparent; }
  body.game-carcassonne:not(.in-lobby) .board-toolbar #turnLabel { font-size: 12px; line-height: 1.5; }
  body.game-carcassonne:not(.in-lobby) .board-actions { display: flex; align-items: center; justify-content: flex-end; width: 100%; gap: 4px; }
  body.game-carcassonne:not(.in-lobby) .board-actions button { width: 44px; height: 44px; min-width: 44px; min-height: 44px; margin: 0; padding: 4px; border-radius: 12px; }
  body.game-carcassonne:not(.in-lobby) .board-actions > span { flex: 1; min-width: 32px; max-width: 44px; font-size: 12px; }
  body.game-carcassonne:not(.in-lobby) .action-panel { height: calc(var(--mobile-panel-height) + env(safe-area-inset-bottom)); padding: 8px 12px calc(60px + env(safe-area-inset-bottom)); grid-template-columns: 72px minmax(0, 1fr); grid-template-rows: 20px 22px 30px 44px; gap: 4px 10px; border-radius: 20px 20px 0 0; }
  body.game-carcassonne:not(.in-lobby) #currentPlayer { min-width: 0; overflow: hidden; white-space: nowrap; font-size: 12px; }
  body.game-carcassonne:not(.in-lobby) #currentPlayer > span { flex-shrink: 0; font-size: 11px; }
  body.game-carcassonne:not(.in-lobby) .tile-preview { width: 72px; height: 104px; margin: 0; }
  body.game-carcassonne:not(.in-lobby) .tile-preview svg { width: 66px; height: 66px; }
  body.game-carcassonne:not(.in-lobby) .tile-name { min-width: 0; }
  body.game-carcassonne:not(.in-lobby) .tile-name h3 { min-width: 0; max-width: 100%; font-size: 14px; }
  body.game-carcassonne:not(.in-lobby) .tile-hint { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; font-size: 12px; line-height: 15px; }
  body.game-carcassonne:not(.in-lobby) #rotate { min-height: 44px; font-size: 13px; }
  body.game-carcassonne:not(.in-lobby) .mobile-controls { grid-template-columns: 86px minmax(0, 1fr) 44px; gap: 6px; }
  body.game-carcassonne:not(.in-lobby) .mobile-controls button { min-height: 44px; font-size: 12px; }
  body.game-carcassonne.has-preview #claimChoices, body.game-carcassonne.has-pending #claimChoices { left: 94px; right: 12px; max-height: 44px; bottom: calc(60px + env(safe-area-inset-bottom)); }
  body.game-carcassonne.has-preview #claimChoices button, body.game-carcassonne.has-pending #claimChoices button { min-height: 44px; font-size: 12px; }
  body.game-carcassonne:not(.in-lobby) #followerTools { bottom: calc(60px + env(safe-area-inset-bottom)); }
  body.game-carcassonne:not(.in-lobby) .follower-handle { width: 72px; height: 44px; }
  body.game-carcassonne:not(.in-lobby) .bottom-status { bottom: calc(var(--mobile-panel-height) + 8px + env(safe-area-inset-bottom)); font-size: 11px; }
  body.game-carcassonne:not(.in-lobby) .toast { bottom: calc(var(--mobile-panel-height) + 16px + env(safe-area-inset-bottom)); }
}
@media (max-width: 539px) {
  body.game-carcassonne:not(.in-lobby) > header .brand { min-height: 44px; font-size: 17px; letter-spacing: 0; }
  body.game-carcassonne:not(.in-lobby) > header .brand-mark { display: none; }
  body.game-carcassonne:not(.in-lobby) .header-controls { gap: 2px; }
}
@media (max-width: 359px) {
  body.game-carcassonne:not(.in-lobby) > header .brand-mark { display: grid; }
  body.game-carcassonne:not(.in-lobby) > header .brand > span:not(.brand-mark) { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  body.game-carcassonne:not(.in-lobby) .header-controls { gap: 1px; }
}
@media (min-width: 540px) and (max-width: 820px) and (min-height: 501px) {
  body.game-carcassonne { --mobile-header-height: 56px; }
  body.game-carcassonne:not(.in-lobby) > header { grid-template-columns: auto minmax(0, 1fr); }
  body.game-carcassonne:not(.in-lobby) .header-controls { grid-template-columns: repeat(6, 44px); justify-content: end; }
}
@media (min-width: 540px) and (max-width: 1000px) and (max-height: 500px) {
  body.game-carcassonne:not(.in-lobby) > header { height: calc(56px + env(safe-area-inset-top)); min-height: 0; padding: calc(4px + env(safe-area-inset-top)) 10px 4px; }
  body.game-carcassonne:not(.in-lobby) .header-controls { gap: 4px; }
  body.game-carcassonne:not(.in-lobby) .header-controls button, body.game-carcassonne:not(.in-lobby) .home-link { min-width: 44px; min-height: 44px; padding: 4px; font-size: 12px; white-space: nowrap; }
  body.game-carcassonne:not(.in-lobby) .players-panel { top: calc(56px + env(safe-area-inset-top)); padding: 4px 10px; border-radius: 0; }
  body.game-carcassonne:not(.in-lobby) .board-heading { top: calc(116px + env(safe-area-inset-top)); left: 12px; height: 24px; margin: 0; }
  body.game-carcassonne:not(.in-lobby) .board-toolbar { top: calc(114px + env(safe-area-inset-top)); left: 12px; right: 280px; height: auto; display: flex; flex-wrap: wrap; gap: 6px; }
  body.game-carcassonne:not(.in-lobby) .board-toolbar > div:first-child { flex: 0 1 auto; display: flex; flex-direction: row; align-items: center; flex-wrap: nowrap; width: calc(100% - 112px); min-height: 28px; margin-left: auto; background: transparent; }
  body.game-carcassonne:not(.in-lobby) .board-toolbar #turnLabel { font-size: 12px; }
  body.game-carcassonne:not(.in-lobby) .board-actions { display: flex; justify-content: flex-end; width: 100%; gap: 4px; }
  body.game-carcassonne:not(.in-lobby) .board-actions button { width: 44px; height: 44px; min-width: 44px; min-height: 44px; padding: 4px; border-radius: 10px; }
  body.game-carcassonne:not(.in-lobby) .board-actions > span { min-width: 32px; font-size: 12px; }
  body.game-carcassonne:not(.in-lobby) .action-panel { top: calc(112px + env(safe-area-inset-top)); right: 8px; bottom: calc(8px + env(safe-area-inset-bottom)); left: auto; width: 260px; height: auto; padding: 8px 12px 60px; grid-template-columns: 72px minmax(0, 1fr); grid-template-rows: 20px 22px 30px 44px; gap: 4px 10px; }
  body.game-carcassonne:not(.in-lobby) #currentPlayer { min-width: 0; overflow: hidden; white-space: nowrap; font-size: 12px; }
  body.game-carcassonne:not(.in-lobby) #currentPlayer > span { flex-shrink: 0; }
  body.game-carcassonne:not(.in-lobby) .tile-preview { width: 72px; height: 104px; margin: 0; }
  body.game-carcassonne:not(.in-lobby) .tile-preview svg { width: 66px; height: 66px; }
  body.game-carcassonne:not(.in-lobby) .tile-name { min-width: 0; }
  body.game-carcassonne:not(.in-lobby) .tile-name h3 { min-width: 0; max-width: 100%; font-size: 13px; }
  body.game-carcassonne:not(.in-lobby) .tile-hint { font-size: 12px; line-height: 15px; overflow: hidden; }
  body.game-carcassonne:not(.in-lobby) #rotate { min-height: 44px; font-size: 12px; }
  body.game-carcassonne:not(.in-lobby) .mobile-controls { left: auto; right: 20px; bottom: calc(18px + env(safe-area-inset-bottom)); width: 236px; grid-template-columns: 74px minmax(0, 1fr) 44px; gap: 5px; }
  body.game-carcassonne:not(.in-lobby) .mobile-controls button { min-height: 44px; font-size: 12px; }
  body.game-carcassonne.has-preview #claimChoices, body.game-carcassonne.has-pending #claimChoices { left: auto; right: 20px; bottom: calc(70px + env(safe-area-inset-bottom)); width: 154px; max-height: 44px; }
  body.game-carcassonne.has-preview #claimChoices button, body.game-carcassonne.has-pending #claimChoices button { min-height: 44px; font-size: 12px; }
  body.game-carcassonne:not(.in-lobby) #followerTools { bottom: 62px; }
  body.game-carcassonne:not(.in-lobby) .follower-handle { width: 72px; height: 44px; }
  body.game-carcassonne:not(.in-lobby) .bottom-status { max-width: calc(100% - 292px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}
@media (min-width: 540px) and (max-width: 1000px) and (max-height: 360px) {
  body.game-carcassonne:not(.in-lobby) .action-panel { grid-template-rows: 16px 18px 0 44px; gap: 0 10px; }
  body.game-carcassonne:not(.in-lobby) .tile-hint { display: none; }
  body.game-carcassonne:not(.in-lobby) .tile-preview { height: 68px; }
}
@media (prefers-reduced-motion: reduce) {
  button, .home-link { transition: none; }
}