/* How Flipz looks around the 3D table: dark violet panels with gold edges,
   the bar along the top with each side's disc count, the status and Hint
   button along the bottom, and the title screen's rows of choices. The
   colours are named here. */
:root {
  --night: #140f1e;
  --panel: rgba(28, 20, 44, 0.94);
  --panel-edge: #c9a046;
  --gold: #f2c66b;
  --sun: #f0b23e;
  --moon: #b9c6ef;
  --violet: #9a6cff;
  --text: #f1e9ff;
  --dim: #b9aed3;
  --glass: rgba(20, 14, 32, 0.78);
  --button: linear-gradient(#3e2f5e, #261c3c);
  --button-on: linear-gradient(#5b4588, #3b2c5c);
  --button-edge: #6d5a9a;
  --field: #1b1428;
  --shade: 8, 5, 14;
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}
/* The café: dark walnut panels, copper edges, and copper and silver coins. */
:root[data-theme="cafe"] {
  --night: #1f1510;
  --panel: rgba(44, 28, 20, 0.94);
  --panel-edge: #c98a4b;
  --gold: #f2b27c;
  --sun: #d27a3e;
  --moon: #cfd6dc;
  --violet: #1f8a8f;
  --text: #fbf1e6;
  --dim: #cdb7a3;
  --glass: rgba(36, 22, 14, 0.8);
  --button: linear-gradient(#5a3a28, #3a2418);
  --button-on: linear-gradient(#7a4e32, #553320);
  --button-edge: #9a6a48;
  --field: #2a1a12;
  --shade: 20, 12, 8;
}
/* The ice palace: deep blue panels, frosty edges, and amber and ice discs. */
:root[data-theme="frost"] {
  --night: #0b1626;
  --panel: rgba(16, 34, 54, 0.94);
  --panel-edge: #9fd8ff;
  --gold: #ffd27a;
  --sun: #f0a030;
  --moon: #c6e6fb;
  --violet: #1fb4ff;
  --text: #eef8ff;
  --dim: #a9c4da;
  --glass: rgba(12, 28, 46, 0.8);
  --button: linear-gradient(#24496e, #163452);
  --button-on: linear-gradient(#2f6a9a, #1f4c74);
  --button-edge: #5f97c4;
  --field: #0f2238;
  --shade: 4, 12, 22;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--night); color: var(--text); font: 16px/1.4 "Alegreya Sans", system-ui, sans-serif; -webkit-tap-highlight-color: transparent; user-select: none; }
/* Pinching anywhere moves the table's view, never zooms the page (phones
   ignore user-scalable=no). Only long panels scroll. */
html, body { touch-action: none; }
.panel { touch-action: pan-y; }
#table { position: fixed; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }
[hidden] { display: none !important; }

button {
  font: 700 16px "Alegreya Sans", system-ui, sans-serif; color: var(--text);
  background: var(--button); border: 2px solid var(--button-edge); border-radius: 10px;
  padding: 9px 16px; cursor: pointer; box-shadow: 0 3px 0 #120c1e, 0 4px 10px rgba(0,0,0,.35);
}
button:active { transform: translateY(2px); box-shadow: 0 1px 0 #120c1e; }
button.main { background: linear-gradient(#f5cf78, #c98e2a); color: #2a1a06; border-color: #ffe3a0; box-shadow: 0 3px 0 #6e4710, 0 4px 10px rgba(0,0,0,.35); }
button:disabled { opacity: .45; cursor: default; }
button.icon { padding: 5px 11px; font-size: 20px; }
h1, h2, h3 { font-family: Cinzel, Georgia, serif; margin: 0 0 .4em; color: var(--gold); }

/* Full-screen panels: title, help, menu, the end. */
.screen { position: fixed; inset: 0; display: grid; place-items: center; background: rgba(var(--shade), .5); padding: 16px; z-index: 10; overflow-y: auto; }
#title { background: radial-gradient(ellipse at center, rgba(var(--shade),.1), rgba(var(--shade),.7)); }
.panel {
  background: var(--panel); border: 2px solid var(--panel-edge); border-radius: 16px; padding: 22px 22px; max-width: 480px; width: 100%;
  text-align: center; box-shadow: 0 12px 40px rgba(0,0,0,.6), inset 0 0 40px rgba(255,255,255,.06);
}
.panel.wide { max-width: 640px; max-height: 88vh; overflow-y: auto; text-align: left; }
.panel h1 { font-size: 54px; font-weight: 800; letter-spacing: 3px; margin-bottom: 0; text-shadow: 0 0 18px rgba(242,198,107,.45); }
.panel .tagline { font-style: italic; color: var(--dim); margin-top: 0; }
.panel p { margin: .5em 0; }
.buttons { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin: 12px 0 6px; }
.buttons.column { flex-direction: column; }
#who { font-weight: 700; color: var(--gold); min-height: 1.4em; }
#stats, #over-stats { font-size: 14px; color: var(--dim); }
.links a { color: var(--gold); font-weight: 700; }

/* The two discs drawn over the title, and the winner's disc at the end. */
.title-discs { display: flex; justify-content: center; gap: 10px; margin-bottom: 6px; }
.title-discs i { width: 46px; height: 46px; border-radius: 50%; display: block; box-shadow: 0 3px 8px rgba(0,0,0,.5), inset 0 0 0 3px rgba(0,0,0,.25); }
.title-discs .sun, .title-discs.sun i { background: radial-gradient(circle at 40% 35%, #fff3c4, var(--sun) 55%, #8c5a12); }
.title-discs .moon, .title-discs.moon i { background: radial-gradient(circle at 40% 35%, #fff, var(--moon) 55%, #3d4a7a); }
.title-discs.draw i { background: linear-gradient(90deg, var(--sun) 50%, var(--moon) 50%); }

/* The rows of choices on the title screen. */
.choices { display: grid; gap: 8px; margin: 14px 0 4px; }
.choice { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; justify-content: center; }
.choice span { width: 100%; font-size: 13px; text-transform: uppercase; letter-spacing: 1px; color: var(--dim); }
.choice button { padding: 6px 12px; font-size: 15px; line-height: 1.15; box-shadow: none; border-width: 1px; }
.choice button small { display: block; font-weight: 400; font-size: 12px; color: var(--dim); }
.choice button.on { border-color: var(--gold); background: var(--button-on); box-shadow: 0 0 0 1px var(--gold), 0 0 12px rgba(242,198,107,.35); }
.choice button.on small { color: var(--gold); }

/* The bar along the top. */
#hud { position: fixed; top: 0; left: 0; right: 0; display: flex; align-items: center; gap: 8px; padding: 10px 12px; background: linear-gradient(rgba(var(--shade),.85), rgba(var(--shade),0)); z-index: 5; }
#sides { display: flex; gap: 8px; margin: 0 auto; }
.chip { display: flex; align-items: center; gap: 6px; background: var(--glass); border: 1px solid var(--button-edge); border-radius: 22px; padding: 4px 12px 4px 4px; font-size: 14px; transition: box-shadow .2s, border-color .2s; max-width: 42vw; }
.chip i { width: 26px; height: 26px; border-radius: 50%; flex: none; }
.chip.sun i { background: radial-gradient(circle at 40% 35%, #fff3c4, var(--sun) 55%, #8c5a12); }
.chip.moon i { background: radial-gradient(circle at 40% 35%, #fff, var(--moon) 55%, #3d4a7a); }
.chip b { font: 800 19px Cinzel, Georgia, serif; min-width: 1.4em; }
.chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--dim); }
.chip.me span { color: var(--text); font-weight: 700; }
.chip.turn { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold), 0 0 14px rgba(242,198,107,.5); }
#timer { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; font: 800 18px Cinzel, Georgia, serif; background: conic-gradient(var(--gold) var(--left, 100%), rgba(255,255,255,.15) 0); flex: none; }
#timer span { background: var(--night); width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; }
#timer.short span { color: #ff8a7a; }

/* Along the bottom: whose move it is, and the Hint button. */
#actions { position: fixed; left: 0; right: 0; bottom: 0; display: flex; align-items: center; justify-content: center; gap: 14px; padding: 12px 12px calc(14px + var(--safe-bottom)); background: linear-gradient(rgba(var(--shade),0), rgba(var(--shade),.8)); z-index: 5; }
#status { margin: 0; font: 700 17px Cinzel, Georgia, serif; color: var(--gold); text-shadow: 0 2px 6px #000; min-width: 8em; text-align: center; }

#toast { position: fixed; left: 50%; top: 74px; transform: translateX(-50%); background: var(--panel); border: 1px solid var(--panel-edge); border-radius: 10px; padding: 9px 16px; z-index: 8; max-width: calc(100% - 32px); text-align: center; box-shadow: 0 6px 20px rgba(0,0,0,.5); }

@media (max-width: 520px) {
  .panel { padding: 16px 14px; }
  .panel h1 { font-size: 44px; }
  .chip { font-size: 13px; padding-right: 8px; }
  .chip span { max-width: 22vw; }
  #hud { gap: 5px; padding: 8px; }
}

/* Playing online: the code box, the room's code, and its two seats. */
.join { display: flex; gap: 8px; justify-content: center; margin: 10px 0; }
.join input { font: 800 22px Cinzel, Georgia, serif; width: 6.5em; text-align: center; letter-spacing: 4px; text-transform: uppercase; color: var(--text); background: var(--field); border: 2px solid var(--button-edge); border-radius: 10px; padding: 6px; user-select: text; }
.code { font-family: Cinzel, Georgia, serif; letter-spacing: 4px; color: var(--text); background: var(--field); border: 1px solid var(--gold); border-radius: 8px; padding: 0 8px; user-select: text; }
.message { min-height: 1.4em; color: var(--dim); }
#seats { list-style: none; padding: 0; margin: 10px 0; display: grid; gap: 6px; }
#seats li { background: rgba(255,255,255,.06); border: 1px solid var(--button-edge); border-radius: 10px; padding: 7px 12px; }
#seats li.empty { color: var(--dim); font-style: italic; }
#seats li.away { opacity: .6; }
.choice.locked button { pointer-events: none; }
.choice.locked button:not(.on) { opacity: .45; }