/* ══ THE COURT LOOK (17 Oct 2026, live98f) ════════════════════════════════
   Ronan: "I'm starting to see Claude design everywhere. This must not look
   like Claude… have a go and reboot." Then: "love it… it's fun."
   The page is the court: hard-court blue, white court lines as the only
   structure, ball yellow for anything live (players' tip-offs, your circle,
   the thing to press). Red is bad news. No cards, no pills, no cream, no black.
   Laid over cs-ui.css (and cs-plain.css where a page has it) on Courts,
   Circle, Game and Settings. */
:root{
  --court:#1C4F96; --runoff:#2D6DB5; --cline:#FFFFFF; --ball:#DCF24B; --stop:#FF5A47; --deep:#123764;
  --soft:rgba(255,255,255,.74); --faint:rgba(255,255,255,.4); --hair:rgba(255,255,255,.28);
  --big:"Big Shoulders Display",Impact,"Arial Narrow",sans-serif;
  --body:"Schibsted Grotesk",system-ui,-apple-system,sans-serif;
  /* the older pages' own names, pointed at the court */
  --ink:#FFFFFF; --ink2:rgba(255,255,255,.86); --ink3:var(--soft); --line:var(--hair); --line2:var(--faint);
  --wash:rgba(255,255,255,.08); --act:var(--ball); --good:#FFFFFF; --good-soft:rgba(255,255,255,.1);
  --disp:var(--body); --sans:var(--body); --mono:var(--body);
}
html,body{background:var(--runoff)!important;color:#fff!important;font-family:var(--body)!important;-webkit-font-smoothing:antialiased}
body{min-height:100vh}
a{color:inherit}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid var(--ball)!important;outline-offset:2px}
::placeholder{color:rgba(18,55,100,.5)}

/* page headings: big condensed, a yellow baseline instead of the old red rule */
h1.pg,.st h1,.cl h1{font:900 46px/.92 var(--big)!important;letter-spacing:0!important;color:#fff!important}
h1.pg::after,.st h1::after{width:44px!important;height:4px!important;border-radius:0!important;background:var(--ball)!important;margin-top:12px!important}
.pgsub,.sub,.fine{color:var(--soft)!important}

/* inputs: white on the court, square, so they read in sun */
input.t,select.t,.inp,.obi,.find input,input.who,.cl input[type=text],.cl input[type=tel],.cl input[type=search]{
  background:#fff!important;color:var(--deep)!important;border:3px solid #fff!important;border-radius:0!important;font-family:var(--body)!important;font-weight:500}
input.t:focus,select.t:focus,.inp:focus,.obi:focus,.find input:focus{border-color:var(--ball)!important;box-shadow:none!important}
.tick input,input[type=checkbox]{accent-color:var(--ball)}

/* buttons: the main one is ball yellow, the rest are outlined like court lines */
.btn{border-radius:0!important;font-family:var(--body)!important;font-weight:700!important;letter-spacing:0!important;text-transform:none!important;box-shadow:none!important}
.btn.court,.btn.go,.btn.primary{background:var(--ball)!important;color:var(--deep)!important;border:0!important}
.btn.quiet,.btn.ghost,.btn.k{background:transparent!important;color:#fff!important;border:2px solid #fff!important}
.link{color:var(--ball)!important}

/* the old white cards become boxes drawn in court line */
.card{background:transparent!important;border:2px solid #fff!important;border-radius:0!important;box-shadow:none!important;color:#fff}
.card .ck{color:var(--soft)!important}

/* the bottom bar, words only, on the court */
.tabs{background:var(--court)!important;border-top:3px solid #fff!important;box-shadow:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
.tabs a{color:var(--soft)!important;font-family:var(--body)!important}
.tabs a.on{color:#fff!important;font-weight:700!important;box-shadow:inset 0 4px 0 var(--ball)}
.tabs a .tbadge{background:var(--ball)!important;color:var(--deep)!important;border-radius:0!important}

/* ── Circle ── */
body[data-tab=circle] .code{border-top:2px solid #fff}
body[data-tab=circle] .code .k{font:800 24px/1 var(--big);color:#fff}
body[data-tab=circle] .code b{font:900 40px/1 var(--big);letter-spacing:.08em;color:var(--ball)}
body[data-tab=circle] .code button,body[data-tab=circle] .p button,body[data-tab=circle] .inv .acts button{background:transparent;color:#fff;border:2px solid #fff;border-radius:0}
body[data-tab=circle] .inv .acts button.in{background:var(--ball);border-color:var(--ball);color:var(--deep)}
body[data-tab=circle] .inv .acts button.on{outline:3px solid var(--ball)}
body[data-tab=circle] .p button.sure{color:var(--stop);border-color:var(--stop)}
body[data-tab=circle] .add select{background:#fff;color:var(--deep);border:3px solid #fff;border-radius:0}
body[data-tab=circle] .ring{border-top:2px solid #fff}
body[data-tab=circle] .ring h2{font:800 26px/1 var(--big)}
body[data-tab=circle] .p{border-bottom:1px solid var(--hair)}
body[data-tab=circle] .p .nm small.w{color:var(--ball)}
body[data-tab=circle] .seat{border-bottom:1px dashed var(--faint);color:var(--faint)}
body[data-tab=circle] .inv{border:2px solid #fff;border-radius:0;background:var(--court)}
body[data-tab=circle] .inv .ans span{border-radius:0;background:rgba(255,255,255,.12);color:#fff}
body[data-tab=circle] .inv .ans span.in{background:var(--ball);color:var(--deep)}
body[data-tab=circle] .inv .ans span.out{background:transparent;color:var(--faint)}
body[data-tab=circle] .msg.ok{color:var(--ball)}
body[data-tab=circle] .start{border-top:2px solid #fff}
body[data-tab=circle] .start h2{font:800 26px/1 var(--big)}
body[data-tab=circle] .av{background:#fff!important;color:var(--court)!important}

/* ── Game ── */
body[data-tab=me] .saved{background:var(--court);color:var(--soft);border-bottom:2px solid #fff}
body[data-tab=me] .saved.ok{color:var(--ball)}
body[data-tab=me] .pcard{background:var(--court);border:3px solid #fff;border-top:3px solid #fff;border-radius:0}
body[data-tab=me] .pcard .nm{font:900 44px/.95 var(--big);letter-spacing:0}
body[data-tab=me] .pcard .stats{border-radius:0;background:#fff;gap:2px}
body[data-tab=me] .pcard .stats div{background:var(--court)}
body[data-tab=me] .pcard .v{font:900 22px/1 var(--big)}
body[data-tab=me] .room{border-top:2px solid #fff}
body[data-tab=me] .room > .rh h2{font:800 28px/1 var(--big)}
body[data-tab=me] details.fold,body[data-tab=me] details.how{border:2px solid #fff;border-radius:0}
body[data-tab=me] .chip{background:transparent;color:#fff;border:2px solid #fff;border-radius:0}
body[data-tab=me] .chip.on{background:var(--ball);color:var(--deep);border-color:var(--ball)}
body[data-tab=me] .chip.add{border-style:dashed}
body[data-tab=me] .kit li,body[data-tab=me] .sroom{border:2px solid #fff;border-radius:0}
body[data-tab=me] .empty{border:2px dashed var(--faint);border-radius:0;color:var(--soft)}
body[data-tab=me] .bar{border-radius:0;background:rgba(255,255,255,.15)}
body[data-tab=me] .bar i{border-radius:0;background:#fff} body[data-tab=me] .bar i.warm{background:var(--ball)} body[data-tab=me] .bar i.hot{background:var(--stop)}
body[data-tab=me] .sr-prog span{border-radius:0;background:rgba(255,255,255,.2)} body[data-tab=me] .sr-prog span.on{background:var(--ball)}
body[data-tab=me] .sr-q{font:800 26px/1.05 var(--big)}
body[data-tab=me] .sr-opt{background:transparent;color:#fff;border:2px solid #fff;border-radius:0}
body[data-tab=me] .sr-opt.on{background:var(--ball);color:var(--deep);border-color:var(--ball)}
body[data-tab=me] .sr-opt.on .d{color:var(--deep)}
body[data-tab=me] .scard{background:var(--court);border:3px solid var(--ball);border-radius:0}
body[data-tab=me] .scard .kg{color:var(--ball);font-family:var(--big)}
body[data-tab=me] .scard .btn{background:var(--ball)!important;color:var(--deep)!important}
body[data-tab=me] .scard .btn.ghost{background:transparent!important;color:#fff!important;border:2px solid #fff!important}
body[data-tab=me] .card.private{background:var(--court)!important;color:#fff!important;border:3px solid #fff!important}
body[data-tab=me] .card.private h3{color:#fff!important}
body[data-tab=me] .card.private .btn{background:var(--ball)!important;color:var(--deep)!important}
body[data-tab=me] .card.private .ck,body[data-tab=me] .card.private p{color:var(--soft)!important}
body[data-tab=me] label{color:#fff}
body[data-tab=me] select.t{background-color:#fff!important}

/* ── Settings ── */
body[data-tab=settings] section{border-top:2px solid #fff}
body[data-tab=settings] h2{font:800 26px/1 var(--big)}
body[data-tab=settings] .ok{color:var(--ball)}
body[data-tab=settings] li button{border-bottom:1px solid var(--hair)}
body[data-tab=settings] .seg{border:2px solid #fff;border-radius:0}
body[data-tab=settings] .seg button.on{background:var(--ball);color:var(--deep)}
body[data-tab=settings] .clr{color:var(--stop)}

/* 18 Oct (live98r), Ronan: "when I press one of the directory buttons it only works after two
   or three goes". In Safari, once the page scrolls, Safari shrinks its toolbar, and the first
   tap near the bottom of the screen goes to Safari (to bring the toolbar back), not to our tabs.
   So the page scrolls inside the body instead of the window: Safari never shrinks its toolbar,
   and the tabs always get the tap. touch-action stops any double-tap-to-zoom wait. */
/* 18 Oct (live98t), Ronan: "it doesn't scroll down to the end, you have to drag it". The body
   still had min-height:100vh, and on an iPhone 100vh is the screen with Safari's bars hidden,
   so the scroller ran past the bottom of what you can see. Fixed to the visible screen instead
   (position:fixed + inset:0 is always exactly what's on screen), and no min-height. */
html{height:100%;overflow:hidden}
body{position:fixed;top:0;right:0;bottom:0;left:0;height:auto!important;min-height:0!important;
  overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;overscroll-behavior-y:contain}
.tabs a,.tipb,button{touch-action:manipulation}