:root {
  --bg: #f4f1ea;
  --card: #ffffff;
  --text: #1d1d1f;
  --muted: #6b6b70;
  --red: #d32f2f;
  --yellow: #f2b705;
  --green: #2e8b3e;
  --blue: #1f5fbf;
  --red-soft: #f7d4d4;
  --yellow-soft: #fbedb6;
  --green-soft: #cfe8d3;
  --blue-soft: #d0ddf3;
  --border: #d8d3c8;
  --app-w: 100vw;
  --app-h: 100vh;
  --safe-l: env(safe-area-inset-left, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #18181b;
    --card: #232327;
    --text: #ececef;
    --muted: #a0a0a8;
    --red-soft: #4a2323;
    --yellow-soft: #4a3f17;
    --green-soft: #1f3a24;
    --blue-soft: #1e2d4a;
    --border: #3a3a40;
  }
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: var(--bg);
  color: var(--text);
  overscroll-behavior: none;
}
#app {
  position: relative;
  max-width: 820px;
  margin: 0 auto;
  padding: calc(12px + var(--safe-t)) calc(12px + var(--safe-r)) calc(12px + var(--safe-b)) calc(12px + var(--safe-l));
}
.hidden { display: none !important; }
button, .box { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }

/* ---------- Lobby ---------- */
.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 24px;
  margin: 8vh auto 0;
  max-width: 480px;
}
h1 { margin: 0; font-size: 2.4rem; letter-spacing: 0.02em; }
h2 { margin: 0 0 8px; font-size: 1.2rem; }
.sub, .muted { color: var(--muted); }
label { display: block; font-weight: 600; margin: 16px 0; }
input {
  display: block;
  width: 100%;
  margin-top: 6px;
  padding: 10px 12px;
  font: inherit;
  font-size: 16px; /* avoids iOS zoom on focus */
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg);
  color: var(--text);
}
button {
  font: inherit;
  padding: 10px 16px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--text);
  cursor: pointer;
}
button.primary, form button { background: var(--text); color: var(--bg); border-color: var(--text); font-weight: 600; }
button.danger { background: var(--red); color: #fff; border-color: var(--red); }
button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
button.icon { padding: 8px 10px; line-height: 1; min-width: 40px; }
.lucide { width: 1.15em; height: 1.15em; flex-shrink: 0; }
button.icon .lucide { width: 20px; height: 20px; }
h3 .lucide.active { margin-left: 6px; vertical-align: -0.15em; }
.total .lucide { vertical-align: -0.15em; color: var(--red); }
.error { color: var(--red); margin: 0; font-size: .9rem; }
.error:empty { display: none; }
.invite { display: flex; gap: 8px; }
.invite input { margin: 0; }

/* ---------- Game: default (desktop + phone portrait) ---------- */
#game {
  display: grid;
  gap: 10px;
  grid-template-columns: 1fr;
  grid-template-areas: "status" "dice" "controls" "error" "mine" "opponent" "tools";
}
.side { display: contents; }
.topbar { grid-area: status; }
.dice { grid-area: dice; }
#controls { grid-area: controls; }
#error { grid-area: error; }
#mine { grid-area: mine; }
#opponent { grid-area: opponent; }
.tools { grid-area: tools; }
@media (min-width: 700px) {
  #game {
    grid-template-columns: 1fr auto;
    grid-template-areas: "status controls" "dice dice" "error error" "mine mine" "opponent opponent" "tools tools";
  }
}

.topbar {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 10px 14px;
  min-width: 0;
}
#status { font-weight: 600; }
#ticker { color: var(--muted); font-size: .85rem; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#ticker:empty { display: none; }
#controls { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
#controls:empty { display: none; }
#controls button { flex: 1 1 auto; }
.tools { display: flex; gap: 8px; justify-content: flex-end; }

.dice { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; min-height: 46px; --die: 44px; }
.dice-group { display: flex; gap: 6px; align-items: center; }
.die {
  width: var(--die); height: var(--die); border-radius: 18%; padding: calc(var(--die) * 0.12);
  display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .25);
}
.pip { width: calc(var(--die) * 0.17); height: calc(var(--die) * 0.17); border-radius: 50%; margin: auto; }
.pip.on { background: #fff; }
.die-white { background: #fafafa; border: 1px solid #ccc; }
.die-white .pip.on { background: #222; }
.die-red { background: var(--red); }
.die-yellow { background: var(--yellow); }
.die-green { background: var(--green); }
.die-blue { background: var(--blue); }
.die-off { opacity: .15; }
.dice.rolling .die:not(.die-off) { animation: shake .14s linear infinite alternate; }
.dice.rolling .die:nth-child(even) { animation-direction: alternate-reverse; }
@keyframes shake {
  from { transform: rotate(-12deg) translateY(-2px); }
  to { transform: rotate(12deg) translateY(2px); }
}

/* ---------- Score sheet ---------- */
.sheet {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 10px;
}
.sheet-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 6px; }
.sheet-head h3 { margin: 0; font-size: 1rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.total { font-weight: 700; white-space: nowrap; }
.rows { display: grid; gap: 5px; }
.row {
  --c: var(--red); --soft: var(--red-soft);
  display: grid;
  grid-template-columns: repeat(11, 1fr) 1fr 2em;
  gap: 4px;
  align-items: center;
  background: var(--c);
  padding: 5px;
  border-radius: 8px;
}
.row-yellow { --c: var(--yellow); --soft: var(--yellow-soft); }
.row-green { --c: var(--green); --soft: var(--green-soft); }
.row-blue { --c: var(--blue); --soft: var(--blue-soft); }
.row.closed { filter: grayscale(.7); }
.box, .lock {
  position: relative;
  aspect-ratio: 1;
  min-width: 0;
  padding: 0;
  border: none;
  border-radius: 6px;
  background: var(--soft);
  color: var(--c);
  font-weight: 800;
  font-size: clamp(.75rem, 2.6vw, 1.1rem);
  display: flex; align-items: center; justify-content: center;
}
.box:disabled { cursor: default; }
.box.skipped { opacity: .35; }
.box.last { outline: 2px dashed rgba(255, 255, 255, .7); outline-offset: -3px; }
.box:not(:disabled) { cursor: pointer; }
.box:not(:disabled):active { filter: brightness(.9); }
.box.wrong { animation: wrong .35s ease-in-out; background: #fff; }
@keyframes wrong {
  20%, 60% { transform: translateX(-3px); }
  40%, 80% { transform: translateX(3px); }
}
.sheet.mine.can-act { border-color: var(--text); box-shadow: 0 0 0 1px var(--text); }
.lock { border-radius: 50%; }
.lock-icon { width: 55%; height: 55%; opacity: .6; }
.lock.x .lock-icon { opacity: 1; }
.mark {
  position: absolute;
  inset: 6%;
  width: 88%;
  height: 88%;
  color: var(--text);
  stroke-width: 3.2;
  pointer-events: none;
}
.row-score { color: #fff; font-weight: 700; text-align: right; font-size: .9rem; }
.sheet-foot { display: flex; flex-wrap: wrap; gap: 4px 12px; justify-content: space-between; align-items: center; margin-top: 6px; }
.penalties { display: flex; gap: 6px; align-items: center; font-size: .85rem; color: var(--muted); }
.pen { position: relative; width: 22px; height: 22px; border: 2px solid var(--border); border-radius: 4px; }
.pen .mark { color: var(--red); }
.calc { font-variant-numeric: tabular-nums; color: var(--muted); font-size: .85rem; }

@media (max-width: 560px) {
  #app { padding-left: calc(8px + var(--safe-l)); padding-right: calc(8px + var(--safe-r)); }
  .row { gap: 2px; padding: 3px; grid-template-columns: repeat(11, 1fr) 1fr 1.6em; }
  .box, .lock { border-radius: 4px; font-size: .78rem; }
  .sheet { padding: 8px; }
  .row-score { font-size: .78rem; }
  .dice { --die: 38px; gap: 10px; }
}

/* ---------- Game: phone landscape ---------- */
html[data-layout="landscape"] #app {
  max-width: none;
  height: var(--app-h);
  overflow: hidden;
  padding: calc(6px + var(--safe-t)) calc(8px + var(--safe-r)) calc(6px + var(--safe-b)) calc(8px + var(--safe-l));
}
html[data-layout="landscape"] #lobby,
html[data-layout="landscape"] #waiting { margin-top: 2vh; }
html[data-layout="landscape"] #app:has(#lobby:not(.hidden)),
html[data-layout="landscape"] #app:has(#waiting:not(.hidden)) { overflow: auto; }
html[data-layout="landscape"] #game {
  height: 100%;
  grid-template-columns: clamp(180px, 28%, 260px) 1fr;
  grid-template-areas: "side mine";
  gap: 8px;
}
html[data-layout="landscape"] .side {
  grid-area: side;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 0;
  overflow-y: auto;
  scrollbar-width: none;
}
html[data-layout="landscape"] .side > * { flex-shrink: 0; }
html[data-layout="landscape"] .topbar { padding: 6px 8px; border-radius: 8px; }
html[data-layout="landscape"] #status { font-size: .82rem; line-height: 1.25; }
html[data-layout="landscape"] #ticker { font-size: .72rem; }
html[data-layout="landscape"] .dice { --die: min(30px, calc(var(--app-h) * 0.085)); gap: 6px; min-height: 0; }
html[data-layout="landscape"] .dice-group { gap: 4px; }
html[data-layout="landscape"] #controls { gap: 6px; }
html[data-layout="landscape"] #controls button { padding: 8px 6px; font-size: .85rem; }
html[data-layout="landscape"] .tools { justify-content: space-between; margin-top: auto; }
html[data-layout="landscape"] .tools button { flex: 1; padding: 5px 0; min-width: 0; }

html[data-layout="landscape"] #mine {
  min-height: 0;
  container-type: size;
  display: flex;
  align-items: center;
  justify-content: center;
}
html[data-layout="landscape"] .sheet.mine {
  /* Square cells: as big as both the width and the height allow. */
  --cell: min(calc((100cqw - 116px) / 12), calc((100cqh - 116px) / 4));
  padding: 6px 8px;
  border-radius: 10px;
}
html[data-layout="landscape"] .sheet.mine .sheet-head { margin-bottom: 4px; }
html[data-layout="landscape"] .sheet.mine .sheet-head h3,
html[data-layout="landscape"] .sheet.mine .total { font-size: .9rem; }
html[data-layout="landscape"] .sheet.mine .rows { gap: 4px; }
html[data-layout="landscape"] .sheet.mine .row { gap: 4px; padding: 4px; grid-template-columns: repeat(12, var(--cell)) 2em; }
html[data-layout="landscape"] .sheet.mine .box,
html[data-layout="landscape"] .sheet.mine .lock { font-size: calc(var(--cell) * 0.42); }
html[data-layout="landscape"] .sheet.mine .row-score { align-self: center; font-size: .85rem; }
html[data-layout="landscape"] .sheet.mine .sheet-foot { margin-top: 4px; }
html[data-layout="landscape"] .sheet.mine .pen { width: 18px; height: 18px; }

/* Opponent as a mini sheet in the side column */
html[data-layout="landscape"] .sheet.theirs { padding: 5px; border-radius: 8px; }
html[data-layout="landscape"] .sheet.theirs .sheet-head { margin-bottom: 3px; }
html[data-layout="landscape"] .sheet.theirs .sheet-head h3,
html[data-layout="landscape"] .sheet.theirs .total { font-size: .75rem; }
html[data-layout="landscape"] .sheet.theirs .rows { gap: 2px; }
html[data-layout="landscape"] .sheet.theirs .row { gap: 1px; padding: 2px; border-radius: 4px; grid-template-columns: repeat(11, 1fr) 1fr 1.4em; }
html[data-layout="landscape"] .sheet.theirs .box,
html[data-layout="landscape"] .sheet.theirs .lock { font-size: .5rem; border-radius: 2px; }
html[data-layout="landscape"] .sheet.theirs .box.last { outline-width: 1px; outline-offset: -1px; }
html[data-layout="landscape"] .sheet.theirs .row-score { font-size: .55rem; }
html[data-layout="landscape"] .sheet.theirs .sheet-foot { margin-top: 3px; }
html[data-layout="landscape"] .sheet.theirs .calc { display: none; }
html[data-layout="landscape"] .sheet.theirs .penalties { font-size: .7rem; gap: 3px; }
html[data-layout="landscape"] .sheet.theirs .pen { width: 12px; height: 12px; border-width: 1px; border-radius: 2px; }

/* ---------- Rotated fallback (no orientation lock available) ---------- */
html.rotated, html.rotated body { overflow: hidden; height: 100%; }
html.rotated #app {
  position: fixed;
  top: 0;
  left: 0;
  margin: 0;
  width: var(--app-w);
  transform-origin: top left;
  transform: translateX(var(--app-h)) rotate(90deg);
}

/* ---------- Overlays ---------- */
.overlay {
  position: fixed;
  inset: 0;
  z-index: 10;
  background: rgba(0, 0, 0, .45);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(16px + var(--safe-t)) calc(16px + var(--safe-r)) calc(16px + var(--safe-b)) calc(16px + var(--safe-l));
}
html.rotated .overlay { position: absolute; }
.panel {
  background: var(--card);
  border-radius: 14px;
  padding: 16px;
  width: min(520px, 100%);
  max-height: 100%;
  overflow: auto;
}
.panel-head { display: flex; justify-content: space-between; align-items: center; }
.panel ul { padding-left: 18px; line-height: 1.5; margin: 0; }
#log { margin: 0; padding: 0; list-style: none; font-size: .9rem; }
#log li { padding: 5px 0; border-bottom: 1px solid var(--border); }
.hint { text-align: center; display: flex; flex-direction: column; gap: 10px; }
.hint h2, .hint p { margin: 0; }
.phone-icon { display: flex; justify-content: center; animation: turn 2s ease-in-out infinite; }
.phone-icon .lucide { width: 48px; height: 48px; }
@keyframes turn { 0%, 30% { transform: rotate(0); } 60%, 100% { transform: rotate(-90deg); } }

@media (prefers-reduced-motion: reduce) {
  .dice.rolling .die, .box.wrong, .phone-icon { animation: none; }
}

/* Very short landscape screens (e.g. iPhone with Safari toolbars) */
@media (max-height: 360px) {
  html[data-layout="landscape"] .side { gap: 4px; }
  html[data-layout="landscape"] .topbar { padding: 4px 8px; }
  html[data-layout="landscape"] #status { font-size: .76rem; }
  html[data-layout="landscape"] .tools button { padding: 3px 0; font-size: .85rem; }
  html[data-layout="landscape"] #controls button { padding: 6px; }
  html[data-layout="landscape"] .sheet.theirs .sheet-foot { display: none; }
}