/*
 * Adria Summer — shared design tokens for every Adria Island site.
 * Source of truth: /root/projects/infra/brand/ (see README.md there).
 * Copy this block into a product stylesheet and map the product's own
 * variables onto it; keep the values identical across products.
 */
:root {
  /* Surfaces: Dalmatian limestone, sand and shallow water */
  --adria-paper: #fbf7ef;
  --adria-sand: #f5ecdd;
  --adria-sand-deep: #ecdfc8;
  --adria-card: #fffdf8;
  --adria-shallow: #e6f1f4;
  --adria-line: #e5dac7;
  --adria-line-strong: #d3c4ab;

  /* Text: deep Adriatic ink */
  --adria-ink: #13314a;
  --adria-muted: #5a6672;

  /* Sea, sun and the island palette */
  --adria-sea: #1b5e8c;          /* primary buttons and links */
  --adria-sea-strong: #144b72;   /* hover / pressed */
  --adria-sea-bright: #2e8cbf;   /* waves, focus ring, decoration */
  --adria-sea-light: #86c0dd;
  --adria-sun: #f2b33d;          /* highlights, underline marker */
  --adria-sun-soft: #fbe7b5;
  --adria-terracotta: #a8442d;   /* text-safe terracotta */
  --adria-terracotta-soft: #f6e1d6;
  --adria-seaplane: #c9302c;     /* small red accents */
  --adria-olive: #5f6f3a;
  --adria-olive-soft: #e9ecd9;
  --adria-pine: #2f5d4a;
  --adria-pine-soft: #e2ece5;
  --adria-lavender: #6e5ba8;
  --adria-lavender-soft: #ece8f5;
  --adria-lagoon: #17707a;
  --adria-lagoon-soft: #ddeeee;
  --adria-bougainvillea: #b23a75;

  /* Shape */
  --adria-radius-card: 20px;
  --adria-radius-control: 12px;
  --adria-radius-pill: 999px;
  --adria-shadow: 0 1px 2px rgba(19, 49, 74, .06), 0 14px 34px -16px rgba(19, 49, 74, .24);
  --adria-shadow-lift: 0 2px 4px rgba(19, 49, 74, .06), 0 24px 48px -20px rgba(19, 49, 74, .3);

  /* Type */
  --adria-font-sans: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "PingFang SC", "Hiragino Sans GB", "Noto Sans CJK SC", "Source Han Sans SC", "Microsoft YaHei", sans-serif;
  --adria-font-display: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, "Noto Serif", serif;

  /* Each product sets its own accent from the table in README.md */
  --adria-accent: var(--adria-sea);
  --adria-accent-strong: var(--adria-sea-strong);
  --adria-accent-soft: var(--adria-shallow);
}

/* Headings: Chinese stays in the sans stack, English uses the display serif. */
:lang(en) :is(h1, h2, .adria-display) {
  font-family: var(--adria-font-display);
  font-weight: 600;
  letter-spacing: -.01em;
}
:lang(zh) :is(h1, h2, h3) {
  word-break: keep-all;
  overflow-wrap: anywhere;
  text-wrap: balance;
}

/* Buttons */
.adria-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 46px;
  padding: 11px 22px;
  border: 1px solid transparent;
  border-radius: var(--adria-radius-pill);
  font: 650 15px/1.4 var(--adria-font-sans);
  text-decoration: none;
  transition: background .16s, border-color .16s, transform .16s;
}
.adria-button.is-primary { color: #fff; background: var(--adria-accent); }
.adria-button.is-primary:hover { background: var(--adria-accent-strong); }
.adria-button.is-secondary { color: var(--adria-ink); background: var(--adria-card); border-color: var(--adria-line-strong); }
.adria-button.is-secondary:hover { border-color: var(--adria-ink); }
:is(a, button, summary, input, select, textarea):focus-visible {
  outline: 3px solid var(--adria-sea-bright);
  outline-offset: 3px;
}

/* Cards and tinted panels */
.adria-card {
  background: var(--adria-card);
  border: 1px solid var(--adria-line);
  border-radius: var(--adria-radius-card);
  box-shadow: var(--adria-shadow);
}

/* Postcard frame for paintings */
.adria-postcard {
  background: #fff;
  padding: 10px 10px 30px;
  border-radius: 6px;
  box-shadow: var(--adria-shadow-lift);
  transform: rotate(-2deg);
}
.adria-postcard img { display: block; width: 100%; border-radius: 3px; }

/* Wave divider: <svg class="adria-wave" viewBox="0 0 1440 40" preserveAspectRatio="none" aria-hidden="true"><path d="M0 22c120-16 240-16 360 0s240 16 360 0 240-16 360 0 240 16 360 0V40H0z"/></svg> */
.adria-wave { display: block; width: 100%; height: 28px; fill: currentColor; }

/* "Back to Adria Island" footer badge used by every product */
.adria-home {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--adria-ink);
  font: 600 13px/1.4 var(--adria-font-sans);
  text-decoration: none;
}
.adria-home img, .adria-home svg { width: 22px; height: 22px; border-radius: 6px; }
.adria-home:hover { color: var(--adria-sea); }
*{box-sizing:border-box}body{margin:0;background:#fbf7ef;color:#13314a;font:16px/1.55 system-ui,sans-serif}a{color:#195a79}header,footer,.hero,.lobby,.stage,.rulebook,.narrow{width:min(1180px,100%);margin:auto;padding:18px clamp(14px,3vw,40px)}header,nav,.row,.status,.map-head,.draw,.section-head,.lobby-seat{display:flex;align-items:center;gap:10px}header,.status,.map-head,.section-head{justify-content:space-between}header{border-bottom:1px solid #e0d7c5}.brand{display:flex;align-items:center;gap:10px;font-weight:800;text-decoration:none}small,.eyebrow,figcaption{font:700 .72rem/1.6 system-ui;letter-spacing:.1em;color:#44665e}button,input,select,.button{font:inherit;border:1px solid #c6bcaa;border-radius:10px;padding:.56em .9em;background:#fffdf8;color:#13314a}button,.button,summary{cursor:pointer}.primary{background:#1b5e8c;color:white;border-color:#1b5e8c;font-weight:700}button:disabled{opacity:.46;cursor:auto}input,select{min-width:0;max-width:100%}label{display:block;font-weight:650}label input,label select{display:block;width:100%;margin:3px 0 8px}button:focus-visible,a:focus-visible,select:focus-visible,.target:focus-visible{outline:3px solid #d78e1f}h1,h2,h3,p,figure{margin:0 0 .55em}h1,h2{font-family:Georgia,"Songti SC",serif}h1{font-size:clamp(2.5rem,6vw,5rem);line-height:1.1}.hero,.lobby-grid,.workspace{display:grid;gap:clamp(14px,3vw,42px)}.hero{grid-template-columns:1fr .85fr;align-items:center;min-height:72vh}.hero p{max-width:44ch}.hero figure{background:#e6ece2;padding:10%;border:1px solid #c8d2c2;border-radius:16px}.postcard{width:100%;filter:drop-shadow(0 8px 6px #47584333);transform:rotate(-3deg)}figcaption{margin-top:10px}form,.panel,.controls,.rule{padding:18px;border:1px solid #ded4c1;border-radius:15px;background:#fffdf8}form .row{margin-top:10px;flex-wrap:wrap}.row input{flex:1}.hero input#name{width:100%}.rulebook,.narrow{max-width:720px}.rule{margin-bottom:14px}.rule p{margin-bottom:0}.lobby-grid{grid-template-columns:1fr 1fr}.lobby-seat{padding:8px;border-bottom:1px solid #eee}.lobby-seat small{margin-left:auto}.room-code{letter-spacing:.12em}.stage{max-width:1500px}.status h2{margin:0}.scores{display:flex;gap:6px;flex-wrap:wrap;margin:8px 0}.seat{padding:5px 9px;border:1px solid #d9d2c4;border-left:5px solid;border-radius:6px;background:white;font-size:.88rem}.s0{border-left-color:#144b72}.s1{border-left-color:#9e432b}.s2{border-left-color:#623f88}.s3{border-left-color:#28664c}.s4{border-left-color:#8e5414}.workspace{grid-template-columns:minmax(0,1fr) minmax(245px,320px);gap:12px}.controls:only-child{grid-column:1/-1;max-width:540px;width:100%;margin:auto}.map-panel{min-width:0;background:#e9eee3;border:1px solid #c7cebd;border-radius:15px;overflow:hidden}.map-head{padding:5px 12px;background:#f6f5eb}.map-scroll{overflow:auto;height:clamp(265px,60vh,720px);overscroll-behavior:contain}.map-scroll>svg{display:block;margin:auto}.target rect{fill:#f8faf2;stroke:#a2b59e;stroke-width:2;stroke-dasharray:5 5}.target[data-pos]{cursor:pointer}.target text{fill:#436351;font:700 19px system-ui;pointer-events:none}.target.chosen rect,.target[data-pos]:hover rect{fill:#fbe7b5;stroke:#ab680c;stroke-width:4}.seam,.last-tile{fill:none;stroke:#778b7560;stroke-width:2}.last-tile{stroke:#af6c17;stroke-width:4}.draw svg{width:72px;border:1px solid #a6ad94;border-radius:6px}.controls .row,.controls>button,.controls>label,.controls details{margin-top:8px}.controls h3{margin:0}.display-mode .controls{font-size:1.2em}.display-mode .seat{font-size:1.05em}.menu-buttons{display:grid;gap:8px}dialog{position:fixed;width:min(92vw,560px);max-height:82dvh;overflow:auto;border-radius:18px;border:1px solid #cbbfa8;padding:40px 22px 20px;background:#fffdf8;color:#13314a}dialog::backdrop{background:#132f40aa}#close-dialog{position:absolute;right:5px;top:5px;line-height:1}#toast{position:fixed;bottom:14px;left:50%;transform:translateX(-50%);background:#14344b;color:white;border-radius:10px;padding:10px;z-index:10;pointer-events:none}#toast:not(.show){display:none}[hidden]{display:none!important}.invite canvas{display:block}footer{font-size:.83rem;border-top:1px solid #ded4c1}
@media(max-width:720px){.hero,.lobby-grid,.workspace{grid-template-columns:1fr}.hero figure{max-width:350px;margin:auto}.stage{padding:8px}.map-scroll{height:clamp(175px,33dvh,340px)}.controls{padding:10px 14px}.draw svg{width:50px}nav{gap:5px}header{padding:8px 10px}.brand img{width:25px}nav button{padding:.4em .6em}.hero .row button{flex:auto}.scores{gap:3px}.seat{font-size:.76rem}.map-head button{padding:1px 9px}}
@media(min-width:721px){.display-mode .workspace{grid-template-columns:minmax(0,1fr) minmax(180px,240px)}.display-mode .map-scroll{height:calc(100dvh - 245px)}}
#toggle-board{white-space:nowrap}.target.chosen rect{fill:transparent;stroke:#906319}.target.chosen text{paint-order:stroke;stroke:white;stroke-width:4}.display-mode main{max-width:none}.display-mode .stage{width:min(96vw,1760px)}#toast{width:max-content;max-width:90vw}