/* Timepasa: the two looks every screen shares. 2 = Midnight Glow (default), 3 = Royal Mosaic.
   Taken from the Ludo prototype (Vishal picked these two looks, 2026-10-29). A game page links this file
   first and adds its own styles; it sets <body data-look="2|3"> through TP.applyLook() (shell.js). */

:root {
  --r: #ff3b52; --g: #20e06a; --y: #ffcf2e; --b: #3b8cff;
  --title: "Avenir Next", "Futura", "Segoe UI", system-ui, sans-serif;
  --sans: -apple-system, BlinkMacSystemFont, "Avenir Next", "Segoe UI", Roboto, system-ui, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  font-family: var(--sans); color: var(--ink); background: #04060c;
  -webkit-tap-highlight-color: transparent; overflow-x: hidden;
  /* inside the phone apps a long press is not text selection or a callout */
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; overscroll-behavior: none;
  min-height: 100vh; min-height: 100dvh;
}
button { font: inherit; color: inherit; cursor: pointer; }
[hidden] { display: none !important; }

body[data-look="2"] {
  --ink: #e9efff; --muted: #9aa8cc; --panel: rgba(12, 17, 34, .74); --line: rgba(120, 160, 255, .32);
  --accent: #ffb340; --accent2: #ff9a1f; --chip: rgba(140, 170, 255, .08); --on-accent: #1a0f00;
  --r: #ff3b52; --g: #20e06a; --y: #ffcf2e; --b: #3b8cff;
  --title: "Avenir Next", "Futura", "Segoe UI", system-ui, sans-serif;
  background:
    radial-gradient(60% 30% at 50% 100%, rgba(255, 160, 60, .16), transparent 70%),
    radial-gradient(55% 35% at 85% 6%, rgba(70, 110, 200, .18), transparent 70%),
    radial-gradient(50% 35% at 5% 92%, rgba(40, 90, 180, .16), transparent 70%),
    linear-gradient(180deg, #080b14, #03050a);
  background-color: #04060c; background-attachment: fixed;
}
body[data-look="3"] {
  --ink: #3a2a12; --muted: #86704a; --panel: rgba(255, 251, 242, .82); --line: rgba(184, 138, 48, .5);
  --accent: #b8862b; --accent2: #1d3f8f; --chip: rgba(255, 255, 255, .55); --on-accent: #1a1004;
  --r: #b8182c; --g: #0f7d3e; --y: #d9a11a; --b: #1b40a3;
  --title: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  background:
    radial-gradient(90% 55% at 15% -5%, rgba(255, 238, 196, .95), transparent 60%),
    radial-gradient(60% 40% at 100% 100%, rgba(214, 180, 110, .35), transparent 70%),
    repeating-linear-gradient(118deg, transparent 0 46px, rgba(150, 130, 100, .06) 46px 47px, transparent 47px 120px),
    repeating-linear-gradient(32deg, transparent 0 80px, rgba(150, 130, 100, .05) 80px 81px, transparent 81px 170px),
    linear-gradient(165deg, #faf4e7 0%, #efe3c9 100%);
  background-color: #f2e8d4; background-attachment: fixed;
}

/* page column: safe areas on iOS (env) and Android (--inset-* set by the app) */
.page {
  width: 100%; max-width: 560px; margin: 0 auto;
  padding: max(10px, env(safe-area-inset-top), var(--inset-top, 0px)) max(16px, env(safe-area-inset-right), var(--inset-right, 0px))
    max(14px, env(safe-area-inset-bottom), var(--inset-bottom, 0px)) max(16px, env(safe-area-inset-left), var(--inset-left, 0px));
}

/* top bar: round icon button, title block, actions on the right */
.top { display: flex; align-items: center; gap: 10px; min-height: 44px; }
.iconbtn {
  width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line); background: var(--chip);
  display: grid; place-items: center; flex: none; padding: 0;
}
.iconbtn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.brand { display: flex; flex-direction: column; line-height: 1.05; min-width: 0; flex: 1; }
.brand .t { font-family: var(--title); font-size: 24px; font-weight: 700; letter-spacing: .02em; }
.brand .s { font-size: 10.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: .04em; }

/* panels, chips, segmented choices, buttons */
.panel { border-radius: 20px; border: 1px solid var(--line); background: var(--panel); }
body[data-look="2"] .panel { box-shadow: 0 0 0 1px rgba(143, 180, 255, .06), 0 10px 30px rgba(0, 0, 0, .35); }
body[data-look="3"] .panel { box-shadow: 0 6px 18px rgba(110, 80, 20, .14); }
.chip { border: 1px solid var(--line); background: var(--chip); border-radius: 999px; padding: 6px 12px; font-size: 12px; font-weight: 700; }
.seg { display: flex; border: 1px solid var(--line); border-radius: 999px; padding: 2px; background: var(--chip); min-width: 0; }
.seg button { flex: 1 1 0; min-width: 0; border: 0; background: transparent; border-radius: 999px; padding: 7px 4px; font-size: 12px; font-weight: 700;
  color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.seg button.on { background: var(--accent); color: var(--on-accent); }
.btn { border: 0; border-radius: 16px; padding: 13px 18px; font-weight: 800; font-size: 15px; background: var(--accent); color: var(--on-accent); }
body[data-look="2"] .btn { background: linear-gradient(180deg, #ffb340, #ff9a1f); box-shadow: 0 0 22px rgba(255, 160, 50, .3); }
.btn.ghost { background: var(--chip); color: var(--ink); border: 1px solid var(--line); box-shadow: none; }
.btn:active, .chip:active, .iconbtn:active { transform: scale(.97); }

/* full-screen overlay with a card (menus, results) */
.screen {
  position: fixed; inset: 0; z-index: 10; display: grid; place-items: center; padding: 16px; overflow-y: auto;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
body[data-look="2"] .screen { background: rgba(2, 4, 10, .6); }
body[data-look="3"] .screen { background: rgba(80, 60, 20, .28); }
.card {
  width: 100%; max-width: 440px; border-radius: 26px; padding: 22px 18px 18px; border: 1px solid var(--line);
  text-align: center; position: relative;
}
body[data-look="2"] .card { background: linear-gradient(180deg, rgba(18, 24, 46, .94), rgba(8, 11, 22, .97)); box-shadow: 0 0 0 1px rgba(143, 180, 255, .15), 0 24px 60px rgba(0, 0, 0, .6); }
body[data-look="3"] .card { background: linear-gradient(180deg, rgba(255, 252, 245, .97), rgba(248, 240, 224, .97)); box-shadow: 0 0 0 4px rgba(196, 154, 62, .35), 0 24px 50px rgba(110, 80, 20, .3); }
.card h1 { font-family: var(--title); font-size: 40px; margin: 2px 0 0; letter-spacing: .03em; }
.card h2 { font-family: var(--title); font-size: 26px; margin: 0; }
.card .sub { margin: 4px 0 14px; color: var(--muted); font-size: 13px; letter-spacing: .03em; }
.link { border: 0; background: none; color: var(--accent); font-weight: 700; font-size: 13px; padding: 6px; }