:root {
  --gronn: #0f4d2e; --gronn2: #1d6b44; --rod: #c8102e; --gul: #f6c445; --bla: #8fd0f0; --sand: #f3e6c8;
  --tekst: #17231d; --dempet: #5c6b63; --kort: #ffffff; --linje: #e3dccb; --bakgrunn: #faf6ec;
  --smal: "Bebas Neue", "Oswald", "Arial Narrow", "Roboto Condensed", Impact, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bakgrunn); color: var(--tekst); font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; font-size: 17px; }
body { padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
button { font: inherit; cursor: pointer; }
.topp { background: linear-gradient(180deg, var(--bla) 0%, #bfe6f7 55%, var(--sand) 100%); text-align: center; padding: 14px 12px 12px; border-bottom: 6px solid var(--gronn); }
.topp h1 { font-family: var(--smal); font-weight: 800; letter-spacing: .5px; text-transform: uppercase; color: var(--gronn); margin: 4px 0 2px; font-size: 30px; line-height: 1; }
.topp h1 span { color: var(--rod); }
.topp .under { color: var(--gronn); font-size: 13px; }
.merke { display: inline-block; background: var(--gul); color: var(--gronn); font-family: var(--smal); text-transform: uppercase; font-size: 12px; padding: 2px 10px; border-radius: 999px; font-weight: 700; }
main { max-width: 760px; margin: 0 auto; padding: 12px; }
h2 { font-family: var(--smal); text-transform: uppercase; color: var(--rod); font-size: 22px; margin: 14px 0 8px; letter-spacing: .5px; }
.kort { background: var(--kort); border: 1px solid var(--linje); border-radius: 14px; padding: 12px; margin: 10px 0; box-shadow: 0 1px 2px rgba(0,0,0,.04); }
.dempet { color: var(--dempet); font-size: 14px; }
.laster { text-align: center; color: var(--dempet); padding: 30px; }
.feil { background: #fde8ea; color: #8a0d20; border-radius: 10px; padding: 10px; margin: 10px 0; }
.ok { background: #e3f4ea; color: #145c33; border-radius: 10px; padding: 10px; margin: 10px 0; }
input, select { font: inherit; padding: 12px; border: 1px solid var(--linje); border-radius: 10px; width: 100%; background: #fff; }
.knapp { background: var(--gronn); color: #fff; border: 0; border-radius: 12px; padding: 14px 16px; font-weight: 700; width: 100%; font-size: 18px; }
.knapp.rod { background: var(--rod); }
.knapp.gul { background: var(--gul); color: var(--gronn); }
.knapp.lys { background: #fff; color: var(--gronn); border: 2px solid var(--gronn); }
.knapp:disabled { opacity: .5; }
.rad { display: flex; gap: 8px; align-items: center; }
.rad > * { flex: 1; }
.faner { display: flex; gap: 6px; margin: 8px 0; overflow-x: auto; }
.faner button { flex: 1; min-width: 90px; border: 2px solid var(--gronn); background: #fff; color: var(--gronn); border-radius: 999px; padding: 10px 8px; font-weight: 700; font-family: var(--smal); text-transform: uppercase; font-size: 16px; }
.faner button.valgt { background: var(--gronn); color: #fff; }
.flight { display: block; width: 100%; text-align: left; border: 1px solid var(--linje); border-left: 8px solid var(--gul); background: #fff; border-radius: 14px; padding: 12px; margin: 10px 0; }
.flight .tid { font-family: var(--smal); font-size: 28px; color: var(--rod); line-height: 1; }
.flight .lag { margin-top: 4px; }
.hullrad { display: grid; grid-template-columns: repeat(9, 1fr); gap: 4px; margin: 6px 0; }
.hullrad button { padding: 8px 0; border-radius: 8px; border: 1px solid var(--linje); background: #fff; font-weight: 700; font-size: 15px; }
.hullrad button.fort { background: #dff1e6; border-color: #9fd3b4; }
.hullrad button.skjult { background: #f1ece0; color: var(--dempet); }
.hullrad button.her { outline: 3px solid var(--rod); }
.hullhode { text-align: center; }
.hullhode .nr { font-family: var(--smal); font-size: 44px; color: var(--gronn); line-height: 1; }
.hullhode .par { font-size: 18px; color: var(--rod); font-weight: 700; }
.teller { display: grid; grid-template-columns: 64px 1fr 64px; align-items: center; gap: 8px; margin-top: 8px; }
.teller button { height: 64px; border-radius: 16px; border: 0; background: var(--gronn); color: #fff; font-size: 34px; font-weight: 800; }
.teller button.minus { background: var(--rod); }
.teller .verdi { text-align: center; font-size: 46px; font-weight: 800; font-family: var(--smal); }
.teller .verdi small { display: block; font-size: 14px; font-family: inherit; font-weight: 600; color: var(--dempet); }
.lagnavn { font-weight: 700; }
.bonusmerke { font-size: 14px; }
.skjultinfo { background: var(--sand); border-radius: 10px; padding: 8px 10px; font-size: 14px; margin: 8px 0; }
table { width: 100%; border-collapse: collapse; font-size: 15px; }
th { text-align: left; font-family: var(--smal); text-transform: uppercase; color: var(--gronn); font-size: 14px; padding: 6px 4px; border-bottom: 2px solid var(--gronn); }
td { padding: 8px 4px; border-bottom: 1px solid var(--linje); vertical-align: top; }
td.tall, th.tall { text-align: right; font-variant-numeric: tabular-nums; }
tr.leder td { background: #fff6d6; font-weight: 700; }
.plass { font-family: var(--smal); font-size: 22px; color: var(--rod); width: 34px; }
.morsomt { font-family: "Caveat", "Segoe Print", "Bradley Hand", cursive; color: var(--gronn); font-size: 19px; text-align: center; margin: 14px 0; }
.bunn { position: fixed; left: 0; right: 0; bottom: 0; display: flex; gap: 6px; padding: 8px 8px calc(8px + env(safe-area-inset-bottom)); background: var(--gronn); z-index: 10; }
.bunn button { flex: 1; border: 0; border-radius: 12px; padding: 12px 6px; background: var(--gronn2); color: #fff; font-weight: 700; font-size: 16px; }
.bunn button.hoved { background: var(--gul); color: var(--gronn); }
.admin-hull { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; }
.admin-hull input { padding: 8px 4px; text-align: center; }
@media (prefers-color-scheme: dark) {
  :root { --tekst: #eef2ee; --dempet: #a9b8ae; --kort: #16241d; --linje: #2c3d33; --bakgrunn: #0d1712; }
  .flight, .faner button, .hullrad button, input, select, .knapp.lys { background: #16241d; color: var(--tekst); }
  .hullrad button.fort { background: #1f4630; }
  .hullrad button.skjult, .skjultinfo { background: #2e2a1f; color: #e8dcc0; }
  tr.leder td { background: #3a3315; }
}