@layer base, shell, cards, table;

@layer base {
  :root {
    color-scheme: light;
    --ink: #252622;
    --paper: #d8d4ca;
    --white: #efebe1;
    --muted: #5e5d52;
    --line: #25262235;
    --rust: #963e29;
    --gold: #edc07e;
    --olive: #343b30;
    --grain: url('/grain.svg');
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color: var(--ink);
    background: var(--paper);
  }
  * { box-sizing: border-box; }
  [hidden] { display: none !important; }
  body { margin: 0; min-width: 280px; background: var(--grain), radial-gradient(ellipse at 32% 0%, #eeebe3, #cfcbc0); }
  a { color: inherit; text-underline-offset: .22em; }
  button, input, select, summary { font: inherit; }
  button, select, summary { cursor: pointer; }
  button:disabled { cursor: default; }
  button { touch-action: manipulation; }
  :focus-visible { outline: 3px solid #c86e39; outline-offset: 3px; }
  h1, h2, h3, p { margin: 0; }
  h1, h2, h3 { letter-spacing: -.045em; line-height: 1.05; }
  p { line-height: 1.5; }
  .skip { position: absolute; left: 1rem; top: -6rem; z-index: 9; background: white; padding: .75rem; }
  .skip:focus { top: 1rem; }
  .eyebrow { font-size: .7rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
  .muted { color: var(--muted); }
  .stack { display: grid; gap: 14px; }
  .row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; }
  .actions { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
}

@layer shell {
  .site-head, footer, main { width: min(1200px, calc(100% - 2 * clamp(16px,5vw,64px))); margin-inline: auto; }
  .site-head, footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
  .site-head { min-height: 70px; border-bottom: 1px solid var(--line); }
  .brand { display: flex; align-items: center; gap: .55rem; font-weight: 850; text-decoration: none; white-space: nowrap; }
  .brand span { color: var(--muted); font-weight: 550; }
  nav { display: flex; align-items: center; gap: clamp(8px,2vw,24px); font-size: .85rem; }
  footer { min-height: 64px; border-top: 1px solid var(--line); font-size: .73rem; font-weight: 750; letter-spacing: .06em; }
  main { margin-block: clamp(22px,4vw,48px); min-height: 65vh; outline: none; }
  .hero { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; padding: clamp(24px,5vw,64px); align-items: center;
    border: 1px solid #aaa497; border-radius: 16px; background: var(--grain), radial-gradient(ellipse at 74% 34%, #e2ddd0, #c2bbae);
    box-shadow: 0 20px 55px -35px #211b10; overflow: hidden; }
  .hero h1 { font-size: clamp(4.6rem,13vw,10rem); line-height: .82; margin: 16px 0 23px; font-weight: 920; letter-spacing: -.11em; }
  .hero h1 span { color: var(--rust); }
  .hero p { max-width: 36ch; margin-bottom: 1.2rem; }
  .hero .stack { max-width: 19rem; }
  .showpiece { position: relative; height: clamp(200px,30vw,360px); display: grid; place-items: center; isolation: isolate; }
  .showpiece::before { content: ""; position: absolute; width: 86%; height: 70%; border-radius: 50%; background: #4b433b3b; filter: blur(30px); transform: translateY(24%); }
  .showpiece .card { position: absolute; width: clamp(84px,13vw,150px); font-size: clamp(1rem,2.5vw,2.05rem); }
  .showpiece .card:nth-child(1) { transform: translate(-60%,3%) rotate(-25deg); }
  .showpiece .card:nth-child(2) { transform: translate(60%,8%) rotate(23deg); }
  .showpiece .card:nth-child(3) { transform: translate(1%,-8%) rotate(-6deg); }
  .dashboard, .lobby { display: grid; grid-template-columns: 1.1fr .9fr; gap: 20px; margin-top: 24px; align-items: start; }
  .panel { background: var(--white); border: 1px solid var(--line); border-radius: 12px; padding: clamp(15px,2.5vw,25px); }
  .panel h2 { font-size: clamp(1.4rem,4vw,2rem); }
  .btn, .quiet { min-height: 42px; padding: .55rem .85rem; border: 1px solid var(--ink); border-radius: 6px; font-weight: 750;
    text-decoration: none; display: inline-flex; align-items: center; justify-content: center; line-height: 1.1; }
  .btn { background: var(--ink); color: #faf2e3; }
  .btn.alt { background: #e0dacf; color: var(--ink); }
  .btn.hot { background: var(--rust); border-color: #743420; color: #fff5e8; }
  .btn:disabled { opacity: .48; }
  .quiet { background: transparent; color: inherit; }
  input:not([type=checkbox]), select { min-width: 0; width: 100%; padding: .65rem .7rem; border: 1px solid var(--line); border-radius: 6px; background: #fffdf7; color: var(--ink); }
  input[type=checkbox] { width: 18px; height: 18px; accent-color: var(--rust); margin: 0; flex: 0 0 auto; }
  label { font-weight: 650; }
  .checks { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit,minmax(145px,1fr)); margin-bottom: 10px; }
  .check { display: flex; gap: 8px; align-items: flex-start; font-size: .9rem; }
  fieldset { margin: 0; padding: 12px; border: 1px solid var(--line); border-radius: 8px; }
  legend { font-weight: 800; padding: 0 4px; }
  .seats, .room-list, .log { list-style: none; padding: 0; margin: 0; }
  .seats { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px; }
  .seat { min-width: 105px; padding: .55rem .68rem; border: 1px solid var(--line); border-radius: 7px; overflow-wrap: anywhere; }
  .seat strong, .seat small { display: block; }
  .seat.offline { opacity: .62; }
  .room-list li, .log li { padding: .55rem 0; border-top: 1px solid var(--line); overflow-wrap: anywhere; }
  #notice:not(:empty) { position: fixed; bottom: max(14px,env(safe-area-inset-bottom)); right: max(14px,env(safe-area-inset-right)); z-index: 8;
    max-width: min(400px,calc(100% - 28px)); padding: .68rem .9rem; background: var(--ink); color: white; border: 1px solid #fff5; border-radius: 7px; box-shadow: 0 5px 20px #0005; }
  dialog { border: 1px solid var(--ink); border-radius: 12px; padding: 18px; width: min(460px,calc(100% - 28px)); max-height: calc(100dvh - 24px);
    color: var(--ink); background: var(--white); }
  dialog::backdrop { background: #151713a8; }
  .swatch { background: var(--card); color: var(--card-ink); min-height: 42px; padding: 5px 9px; border: 1px solid #262622; border-radius: 5px; font-weight: 760; }
  @media (max-width: 700px) {
    .hero, .dashboard, .lobby { grid-template-columns: 1fr; }
    .hero { gap: 2px; }
    .showpiece { height: 175px; }
    .brand span { display: none; }
  }
}

@layer cards {
  .card {
    --card: #544d43;
    --card-ink: #fff5e6;
    position: relative; isolation: isolate; display: inline-grid; grid-template-rows: auto 1fr auto;
    width: 86px; aspect-ratio: .684; border: 1px solid #211a17a3; border-radius: 6%; padding: .54em;
    background: linear-gradient(145deg,#ffffff12,transparent 42%,#00000023), var(--card);
    color: var(--card-ink); box-shadow: 0 1px 0 #ffffff27 inset, 0 -2px 0 #1d17175e inset, 0 3px 0 #2e251e, 3px 8px 12px #17131065;
    font-weight: 850; line-height: 1; text-align: left; overflow: hidden;
  }
  .card::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--grain); opacity: .48; mix-blend-mode: soft-light; pointer-events: none; }
  .card-index, .card i, .card-shape { font-size: .67em; font-style: normal; white-space: nowrap; }
  .card-shape { position: absolute; top: .85em; right: .8em; opacity: .8; }
  .card b { align-self: center; justify-self: center; font-size: 2.35em; letter-spacing: -.07em; line-height: .85; }
  .card i { justify-self: end; transform: rotate(180deg); }
  .card:disabled { filter: saturate(.87) brightness(.95); }
  .red { --card: #993f2c; --card-ink: #fff3e4; }
  .yellow { --card: #a47428; --card-ink: #fff9e8; }
  .green { --card: #3d5b44; --card-ink: #fff9ea; }
  .blue { --card: #304653; --card-ink: #fff7e9; }
  .pink { --card: #86465d; --card-ink: #fff7ea; }
  .orange { --card: #a75128; --card-ink: #fff8e8; }
  .teal { --card: #366264; --card-ink: #fff8e8; }
  .purple { --card: #604969; --card-ink: #fff9ea; }
  .wild { --card: #444641; --card-ink: #fff6e7; }
  .back {
    --card: #66452f; color: #fff0d4;
    background: linear-gradient(140deg,#e3ba7d31,transparent 70%), repeating-linear-gradient(17deg,#ffffff05 0 1px,transparent 1px 4px), var(--card);
    border-color: #45301e; box-shadow: 0 1px 0 #f6d49948 inset, 0 3px 0 #493022, 0 6px 0 #65452f, 0 9px 0 #3d2b20, 4px 13px 14px #23170876;
  }
}

@layer table {
  .at-table { background: #242520; }
  .at-table > .site-head, .at-table > footer { display: none; }
  .at-table > main {
    width: min(1500px,100%); min-height: 100dvh; margin: 0 auto; display: grid; grid-template-rows: auto 1fr;
    padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  }
  .table-bar {
    display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; padding: 10px clamp(12px,3vw,28px);
    background: var(--grain), linear-gradient(#2d2e28,#242520); color: #f4ebda; border-bottom: 1px solid #171913;
  }
  .table-brand, .table-meta, .table-links { display: flex; align-items: center; gap: 9px; min-width: 0; }
  .table-brand h1 { font-size: clamp(1.1rem,2.8vw,1.65rem); }
  .table-brand .eyebrow { color: #c8b79e; font-size: .56rem; }
  .table-meta { justify-content: center; color: #ded4c2; font-size: .78rem; white-space: nowrap; }
  .live-status { color: #bfd2ab; font-size: .73rem; }
  .table-links { justify-content: flex-end; }
  .table-links .btn, .table-notes > summary { font-size: .78rem; min-height: 36px; color: #f4ebda; background: #3b3d34; border: 1px solid #69665a; }
  .table-notes > summary { display: grid; place-items: center; padding: .35rem .65rem; border-radius: 6px; list-style: none; font-weight: 750; }
  .table-notes > summary::-webkit-details-marker { display: none; }
  .notes-panel { position: fixed; top: max(49px,calc(env(safe-area-inset-top) + 40px)); right: max(12px,env(safe-area-inset-right)); z-index: 5;
    width: min(350px,calc(100% - 24px)); max-height: calc(100dvh - 60px); overflow: auto; color: var(--ink); box-shadow: 0 14px 35px #0006; }
  .play-surface {
    position: relative; isolation: isolate; display: grid; grid-template-rows: auto minmax(0,1fr) auto;
    padding: clamp(10px,2.8vw,29px) clamp(12px,3vw,33px) 0; gap: clamp(7px,2vh,20px);
    min-width: 0; min-height: 0; overflow: hidden; color: var(--ink);
    background: var(--grain), radial-gradient(ellipse at 49% 38%, #dfdcd3 0%, #c8c5bb 54%, #aaa79e 100%);
    box-shadow: inset 0 6px 20px #37322942;
  }
  .play-surface::before { content: ""; position: absolute; inset: 12% 11% 14%; z-index: -1; border: 1px solid #524b3f26;
    border-radius: 48%; box-shadow: 0 1px 0 #f8f4e154, 0 0 0 6px #e9e5d526; pointer-events: none; }
  .rotate-hint { display: none; }
  .table-seats {
    display: flex; align-content: flex-start; justify-content: center; flex-wrap: wrap; gap: 6px;
    list-style: none; margin: 0; padding: 0; min-width: 0;
  }
  .table-seat { position: relative; display: grid; grid-template-columns: auto minmax(0,1fr); align-items: center; gap: 6px;
    width: clamp(88px,12.3vw,148px); min-height: 36px; padding: 4px 7px; border: 1px solid #6c685d7c; border-radius: 7px;
    color: #252622; background: #e9e4d9d9; box-shadow: 0 2px 5px #342d2323; }
  .table-seat strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .82rem; }
  .table-seat.is-turn { border-color: #566744; background: #dce1ca; box-shadow: 0 0 0 1px #52623d; }
  .table-seat.is-offline { opacity: .62; }
  .seat-count { display: grid; place-items: center; min-width: 25px; min-height: 25px; padding: 1px 4px; color: #f7eee0; background: #3e4138;
    border: 1px solid #252921; border-radius: 4px; font-size: .8rem; font-weight: 850; font-variant-numeric: tabular-nums; }
  .uno-tag { position: absolute; top: calc(100% - 5px); right: 4px; z-index: 2; padding: 2px 5px; border-radius: 3px; background: #3d5b44; color: #fff6e7; font-size: .62rem; font-weight: 900; }
  .table-seat .reaction { position: absolute; top: calc(100% - 3px); left: 0; right: 0; z-index: 3; min-height: 43px; padding: 4px; font-size: .71rem; }
  .table-middle { display: grid; grid-template-columns: minmax(52px,1fr) auto minmax(122px,1fr); align-items: center; justify-items: center; gap: clamp(7px,2vw,27px); min-height: 0; }
  .round-signal { display: grid; gap: 4px; justify-items: center; color: #3e4139; font-weight: 700; }
  .direction { display: grid; place-items: center; width: clamp(40px,8vw,68px); aspect-ratio: 1; border: 1px solid #5b594976; border-radius: 50%;
    background: #efead63a; font-size: clamp(1.4rem,4vw,2.3rem); }
  .turn-clock { min-width: 3ch; font-size: .79rem; font-variant-numeric: tabular-nums; }
  .table-piles { display: flex; align-items: start; gap: clamp(14px,3vw,31px); justify-content: center; }
  .pile-unit { display: grid; justify-items: center; gap: 8px; }
  .pile-unit > span:last-child { white-space: nowrap; font-size: .63rem; font-weight: 850; letter-spacing: .09em; text-transform: uppercase; }
  .pile-unit .card { width: clamp(51px,14dvh,108px); font-size: clamp(.73rem,3.1dvh,1.45rem); }
  .pile-unit[data-anchor="discard"] .card { transform: rotate(5deg); }
  .draw-button { outline: 2px solid #fff3ca; outline-offset: 3px; }
  .draw-button:active { translate: 0 2px; }
  .turn-panel { width: 100%; max-width: 260px; display: grid; gap: 7px; justify-self: start; }
  .turn-panel h2 { font-size: clamp(.94rem,2.5vw,1.55rem); overflow-wrap: anywhere; }
  .turn-panel p { font-size: .77rem; line-height: 1.25; }
  .turn-panel .btn, .turn-panel .swatch { min-height: 38px; padding: .35rem .48rem; font-size: .76rem; }
  .action-box:empty { display: none; }
  .action-box { max-height: 105px; overflow-y: auto; padding: 2px; }
  .hand-rail { --hand-card: clamp(64px,20dvh,114px); display: grid; grid-template-columns: minmax(58px,1fr) minmax(0,8fr) minmax(58px,1fr);
    align-items: end; gap: 9px; padding-bottom: clamp(3px,1vh,10px); min-width: 0; }
  .self-seat { align-self: center; justify-self: center; display: grid; gap: 2px; text-align: center; }
  .self-seat .eyebrow { font-size: .61rem; }
  .self-seat strong { font-size: clamp(1.3rem,4.5vh,2.45rem); font-variant-numeric: tabular-nums; line-height: 1; }
  .self-seat > span:last-child { font-size: .68rem; }
  .hand-scroll { min-width: 0; overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; scrollbar-color: #746a5c #d7d1c4; }
  .hand { height: calc(var(--hand-card) * 1.46 + 38px); position: relative; }
  .hand > p { display: grid; height: 100%; place-items: center; font-weight: 650; }
  .hand .card {
    position: absolute; left: 50%; bottom: 25px; width: var(--hand-card); font-size: clamp(.79rem,3.25dvh,1.65rem);
    transform: translateX(calc(-50% + var(--card-x,0px))) translateY(var(--card-y,0px)) rotate(var(--card-angle,0deg));
    transform-origin: 50% 86%; transition: translate .13s ease-out, filter .13s ease-out;
  }
  .hand .card:not(:disabled) { box-shadow: 0 1px 0 #fff8 inset, 0 0 0 1px #ffefd8, 2px 5px 0 #34271f, 3px 10px 15px #1e1a1570; }
  .hand .card:not(:disabled):focus-visible, .hand .card:not(:disabled):active { z-index: 2; translate: 0 -10px; }
  @media (hover:hover) {
    .hand .card:not(:disabled):hover { z-index: 2; translate: 0 -11px; }
  }
  .reaction-dock { min-width: 0; align-self: center; justify-self: stretch; display: grid; place-items: center; }
  .reaction { min-height: 44px; border: 1px solid #4f2519; border-radius: 7px; font-weight: 900; line-height: 1;
    background: #913a25; color: #fff6e6; box-shadow: 0 3px 0 #4e2a20; padding: 8px; }
  .reaction::after { content: ""; position: absolute; bottom: 3px; left: 7%; width: calc(var(--reaction-left,100%) * .86);
    height: 2px; background: #ffe0a3; border-radius: 1px; pointer-events: none; }
  .reaction-own { position: relative; min-width: clamp(56px,9vw,116px); min-height: clamp(44px,10vh,76px); background: #963e29;
    box-shadow: 0 3px 0 #54291b, 0 0 0 2px #ffe0a3; font-size: clamp(1rem,3vw,1.8rem); }
  .reaction-tray { display: flex; gap: 5px; max-width: 100%; overflow-x: auto; padding: 3px 3px 6px; scrollbar-width: thin; }
  .reaction-tray:not(:has(button:not([hidden]))) { display: none; }
  .reaction-tray .reaction { position: relative; flex: none; min-height: 40px; font-size: .72rem; white-space: nowrap; }
  .reaction-help { background: #435a3d; border-color: #31442c; }
  .reaction:active { translate: 0 2px; }
  #table-motion { position: fixed; inset: 0; z-index: 4; pointer-events: none; overflow: hidden; }
  .flying-card { position: absolute; left: 0; top: 0; opacity: 0; }
  .flying-card .card { width: 100%; font-size: .85rem; }

  @media (orientation: landscape) and (max-height: 560px) {
    .at-table > main { height: 100dvh; min-height: 290px; }
    .table-bar { padding: 4px 10px; gap: 5px; }
    .table-brand img { width: 24px; height: 24px; }
    .table-brand { gap: 5px; }
    .table-brand .eyebrow { display: none; }
    .table-brand h1 { font-size: 1rem; }
    .table-meta, .live-status { font-size: .68rem; }
    .table-links { gap: 5px; }
    .table-links .btn, .table-notes > summary { min-height: 31px; font-size: .68rem; padding: .3rem .45rem; }
    .play-surface { padding: 7px 10px 0; gap: 4px; }
    .table-seats { gap: 4px; }
    .table-seat { width: clamp(69px,12vw,106px); min-height: 28px; padding: 2px 4px; gap: 4px; }
    .table-seat strong { font-size: .7rem; }
    .seat-count { min-width: 21px; min-height: 21px; font-size: .7rem; }
    .table-seat .reaction { min-height: 40px; font-size: .66rem; }
    .seats-many .table-seat { width: clamp(63px,12vw,96px); }
    .table-middle { grid-template-columns: minmax(46px,1fr) auto minmax(120px,1fr); }
    .table-piles { gap: clamp(11px,3vw,24px); }
    .pile-unit { gap: 5px; }
    .pile-unit .card { width: clamp(45px,14dvh,71px); font-size: clamp(.64rem,2.65dvh,.97rem); }
    .hand-rail { --hand-card: clamp(54px,18.5dvh,90px); grid-template-columns: minmax(52px,1fr) minmax(0,10fr) minmax(54px,1fr); gap: 4px; }
    .hand { height: calc(var(--hand-card) * 1.46 + 30px); }
    .hand .card { bottom: 21px; }
    .turn-panel .btn, .turn-panel .swatch { min-height: 35px; }
    .action-box { max-height: min(78px,22dvh); }
    .reaction-own { min-width: 53px; padding-inline: 4px; }
  }

  @media (orientation: portrait) and (max-width: 700px) {
    .table-bar { grid-template-columns: 1fr auto; padding: 7px 10px; }
    .table-meta { grid-column: 1 / -1; grid-row: 2; justify-content: flex-start; }
    .table-links .btn, .table-notes > summary { font-size: .71rem; padding: .34rem .45rem; }
    .play-surface { grid-template-rows: auto auto minmax(180px,1fr) auto; gap: 7px; padding: 10px 9px 0; }
    .rotate-hint { display: block; text-align: center; color: #47463f; font-size: .7rem; }
    .table-seat { width: clamp(69px,23vw,102px); min-height: 30px; padding: 3px 4px; gap: 4px; }
    .table-seat strong { font-size: .69rem; }
    .seat-count { min-width: 21px; min-height: 21px; }
    .table-middle { grid-template-columns: auto 1fr; grid-template-rows: 1fr auto; gap: 7px; }
    .round-signal { padding-left: 4px; }
    .table-piles { justify-self: start; }
    .pile-unit .card { width: clamp(47px,15vw,72px); font-size: .86rem; }
    .turn-panel { grid-column: 1/-1; justify-self: center; text-align: center; margin-bottom: 6px; }
    .turn-panel .actions { justify-content: center; }
    .hand-rail { --hand-card: clamp(58px,17vw,74px); grid-template-columns: 42px minmax(0,1fr) 47px; gap: 4px; }
    .self-seat .eyebrow { font-size: .49rem; }
    .hand .card { font-size: .85rem; }
    .reaction-own { min-width: 45px; font-size: .88rem; padding-inline: 3px; }
  }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
}