/* "Result slip" design — preview behind ?ui=new. Loaded after app.css; everything is scoped to body.ui-slip.
   Goal: look like the printed result sheet at a 4D outlet / the newspaper table, not like a modern app.
   Square boxes, official colour bar, dark label column, big black numbers on white, no soft shadows. */

.ui-slip{
  --canvas:#E9E6DF; --ink:#111111; --ink-2:#333333; --ink-3:#5B5750;
  --grid:#BDB7AA; --label:#3A3226; --label-2:#4A4133; --paper:#FFFFFF;
  --link:#1F4E9A;
  font-size:17px;
}
.ui-slip a{color:var(--link)}
.ui-slip .mono, .ui-slip .slip td, .ui-slip .xg-tab b{font-family:Roboto,Arial,"Helvetica Neue",sans-serif;font-variant-numeric:tabular-nums}

/* header: dark bar like a printed sheet's masthead */
.ui-slip .hdr{background:#1F1A14;border-bottom:3px solid #C9A227;position:sticky}
.ui-slip .brand{color:#fff}
.ui-slip .brand-name{font-size:21px}
.ui-slip .brand-sub{color:#C9B98F}
.ui-slip .hdr-date{color:#F5E7C0;font-size:18px}
.ui-slip .langs{border-radius:4px;border:1px solid #6B5E48;background:#2B241B}
.ui-slip .langs a,.ui-slip .langs span{border-radius:3px;color:#E8DCC0;font-size:15px}
.ui-slip .langs .lang-on{background:#C9A227;color:#111}
.ui-slip .voice-btn{border-radius:4px;background:#2B241B;border-color:#6B5E48;color:#E8DCC0;font-size:15px}
.ui-slip .voice-btn.on{background:#C9A227;border-color:#C9A227;color:#111}

/* top area: plain, no rounded chips */
.ui-slip .page-h1{font-size:22px;margin:14px 0 6px}
.ui-slip .answer{border-radius:0;border:1px solid var(--grid);color:var(--ink-2);font-size:15px}
.ui-slip .live-strip{border-radius:0;border:2px solid #C8102E;font-size:17px}
.ui-slip .op-rail{display:none}

/* layout: results use the full width; tools go below */
.ui-slip .layout{grid-template-columns:minmax(0,1fr)}
.ui-slip .results{gap:12px}
.ui-slip .side{position:static;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:12px}
@media (min-width:640px){ .ui-slip .results{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (min-width:960px){ .ui-slip .results{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media (min-width:1100px){ .ui-slip .layout{grid-template-columns:minmax(0,1fr)} .ui-slip .side{position:static} }
/* all four boxes on one row only when each box is wide enough for comfortable numbers */
.ui-slip .wrap{max-width:1480px}
@media (min-width:1440px){ .ui-slip .results{grid-template-columns:repeat(4,minmax(0,1fr))} }
.ui-slip .results .ad{grid-column:1/-1;border-radius:0}

/* the slip */
.slip{container-type:inline-size;background:var(--paper);border:2px solid var(--label);scroll-margin-top:120px;--bar:#444;--bar-fg:#fff}
.slip[data-op="magnum"]{--bar:#F7C600;--bar-fg:#111}
.slip[data-op="damacai"]{--bar:#1C2B7F;--bar-fg:#fff}
.slip[data-op="toto"]{--bar:#C8102E;--bar-fg:#fff}
.slip[data-op="sgpools"]{--bar:#005DAA;--bar-fg:#fff}
.slip-head{display:flex;align-items:center;gap:10px;padding:8px 10px;background:var(--bar);color:var(--bar-fg);min-height:78px}
.slip-logo{flex-shrink:0;width:46px;height:46px;display:grid;place-items:center;background:#fff center/contain no-repeat;color:#111;
  font-weight:900;font-size:22px;border:1px solid rgba(0,0,0,.25)}
.slip-title{min-width:0;flex:1}
.slip-title h2{font-size:19px;font-weight:900;line-height:1.2}
.slip-meta{font-size:14px;font-weight:700;opacity:.92;margin-top:1px;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.slip-live{display:inline-block;background:#fff;color:#C8102E;font-weight:900;font-size:13px;padding:0 6px;margin-right:6px;animation:slipblink 1.2s steps(2,start) infinite}
@keyframes slipblink{to{visibility:hidden}}
.slip-status{display:inline-block;background:#fff;color:#111;font-weight:800;font-size:13px;padding:0 6px;margin-right:6px}

.slip table{width:100%;border-collapse:collapse;table-layout:fixed}
.lab-main{display:block;font-weight:800;font-size:16px;line-height:1.2}
.lab-alt{display:block;font-weight:600;font-size:12px;opacity:.8;line-height:1.2}

.slip-top th{width:40%;background:var(--label);color:#fff;text-align:left;padding:7px 10px;border-bottom:1px solid var(--label-2);vertical-align:middle}
.slip-top td{text-align:center;font-size:38px;font-weight:900;letter-spacing:3px;line-height:1.15;padding:5px 0;border-bottom:1px solid var(--grid);color:#111}
.slip-top tr:first-child td{background:#FFF6CC;color:#B00000;font-size:42px}
.slip-top tr:last-child th,.slip-top tr:last-child td{border-bottom:0}

.slip-sec{background:var(--label);color:#fff;text-align:center;padding:5px 8px}
.slip-sec .lab-main,.slip-sec .lab-alt{display:inline}
.slip-sec .lab-alt{margin-left:6px}

.slip-grid td{position:relative;text-align:center;font-size:21px;font-weight:800;padding:8px 0;border:1px solid var(--grid);color:#111}
.slip-grid tr:first-child td{border-top:0}
.slip-grid td:first-child{border-left:0}
.slip-grid td:last-child{border-right:0}
.slip-grid td.empty,.slip-top td.empty{color:#A39E92;font-weight:700}
.slip-grid td i{position:absolute;top:1px;left:3px;font-style:normal;font-size:11px;font-weight:800;color:#8A5A00}

.slip-jp th{background:#EFE9DA;color:#3A3226;text-align:left;font-size:14px;font-weight:700;padding:6px 10px;border-top:1px solid var(--grid)}
.slip-jp td{text-align:right;padding:6px 10px;font-size:17px;font-weight:900;color:#B00000;border-top:1px solid var(--grid);white-space:nowrap}
.slip-foot{padding:6px 10px;font-size:13px;background:#F6F3EC;border-top:1px solid var(--grid)}
.slip-foot a{color:var(--ink-3)}
.slip-unavail{padding:26px 14px;text-align:center;font-size:17px;font-weight:700;line-height:1.8;color:var(--ink-2)}

/* new number appears: yellow highlight that fades, like a marker pen */
.slip td.flash{animation:slipflash 2.4s ease-out}
@keyframes slipflash{0%{background:#FFD400}100%{background:transparent}}

/* tools below: square boxes */
.ui-slip .box{border-radius:0;border:2px solid var(--label)}
.ui-slip .box h2{font-size:18px}
.ui-slip #check-in{border-radius:0;border:2px solid var(--label);height:54px;font-size:26px}
.ui-slip #check-form button{border-radius:0;background:var(--label);height:54px;font-size:18px}
.ui-slip .check-out p{font-size:16px}
.ui-slip .date-pill{border-radius:0;border:1px solid var(--grid);background:#fff;color:#111;font-size:15px;min-height:40px;padding:8px 10px}
.ui-slip .date-pill.on{background:var(--label);border-color:var(--label);color:#fff}
.ui-slip .faq{border-radius:0;border:2px solid var(--label)}
.ui-slip .faq summary{font-size:17px}
.ui-slip .faq p{font-size:16px}
.ui-slip .schedule,.ui-slip .updated{font-size:15px}
.ui-slip .foot{border-top:3px solid #C9A227;background:#1F1A14;color:#C9B98F;font-size:13px}
.ui-slip .foot-links a{color:#E8DCC0}
.ui-slip .install{border-radius:4px}
.ui-slip .install button{border-radius:3px}

/* phones */
@media (max-width:420px){
  .slip-top td{font-size:34px}
  .slip-top tr:first-child td{font-size:38px}
  .slip-grid td{font-size:20px;padding:9px 0}
  .slip-title h2{font-size:18px}
}
@media (max-width:340px){ .slip-grid td{font-size:17px} }

/* Size numbers and titles from the box width (container query units), so four digits never touch,
   whatever the screen size or the system font. Fixed sizes above stay as the fallback. */
@supports (font-size:1cqw){
  .slip-grid td{font-size:clamp(15px,calc(7cqw - 3px),24px)}
  .slip-top td{font-size:clamp(26px,12cqw,44px)}
  .slip-top tr:first-child td{font-size:clamp(28px,13.5cqw,48px)}
  .slip-title h2{font-size:clamp(15px,6.2cqw,20px)}
  .slip-meta{font-size:clamp(12px,4.6cqw,14px)}
}

/* region headings + jump tabs (West / East / Singapore) */
.region-tabs{display:flex;gap:0;margin-top:12px;border:2px solid var(--label);background:#fff;position:sticky;top:96px;z-index:15}
.region-tabs a{flex:1;text-align:center;padding:10px 6px;font-weight:800;font-size:16px;color:#111;text-decoration:none;border-left:1px solid var(--grid)}
.region-tabs a:first-child{border-left:0}
.region-tabs a:hover,.region-tabs a:focus{background:#C9A227}
.region-h{grid-column:1/-1;margin:10px 0 -2px;padding:6px 12px;background:var(--label);color:#F5E7C0;font-size:18px;font-weight:900;scroll-margin-top:160px}
.region-h:first-child{margin-top:0}
@media (max-width:560px){ .region-tabs{top:88px} .region-tabs a{font-size:14px;padding:9px 4px} }

/* official logo: natural proportions on a small white plate, letter badge as fallback */
.slip-logo-img{flex-shrink:0;height:46px;width:auto;max-width:104px;object-fit:contain;background:#fff;padding:3px;border-radius:3px}
.slip-logo-img + .slip-logo{display:none}

/* extra games inside a slip */
.slip .xg{margin:0;padding:0;border-top:2px solid var(--label)}
.slip .xg-head{background:var(--label-2);color:#F5E7C0;padding:5px 10px;font-size:15px}
.slip .xg-head small{color:#D9CBA6;font-size:13px}
.slip .xg-tab{margin:0;font-size:15px;table-layout:auto}
.slip .xg-tab th{width:34%;white-space:normal;background:#EFE9DA;color:#3A3226;padding:7px 10px;border-top:1px solid var(--grid);font-size:14px;vertical-align:middle}
.slip .xg-tab td{padding:6px 8px;border-top:1px solid var(--grid)}
.slip .xg-tab b{background:#fff;border:1px solid var(--grid);border-radius:0;padding:2px 6px;font-size:19px;font-weight:700;color:#111}
.slip .xg-tab b.plus{background:#FFF6CC;border-color:#C9A227;color:#B00000}
.slip .xg-many b{font-size:16px}
.slip .xg-tab em{color:#8A5A00;font-size:14px}
.slip .xg-amt td{color:#B00000;font-weight:900;font-size:16px;text-align:right;white-space:nowrap}
/* equal header heights side by side (wide logos can wrap a title onto two lines) */
@media (min-width:640px){ .slip-head{min-height:104px} }
.slip-foot .src-xcheck,.card-foot .src-xcheck{color:#5B5750}
.ui-slip .op-info{border-radius:0;border:2px solid var(--label)}
.ui-slip .prize-tab th,.ui-slip .prize-tab td{border-bottom:1px solid var(--grid)}

/* Singapore Pools' logo is white-on-transparent: give it its own blue plate */
.slip[data-op="sgpools"] .slip-logo-img{background:#005DAA}

/* region chip in the slip header: hidden on phones (the row heading does the job),
   shown on wide screens where the row headings collapse so the grid stays continuous */
.slip-region{display:none;align-self:flex-start;font-size:12px;font-weight:800;padding:2px 6px;border:1px solid currentColor;opacity:.85;white-space:nowrap}
@media (min-width:960px){
  /* take the row headings out of the grid entirely (absolute = no grid cell, no row break) */
  .ui-slip .results{position:relative}
  .ui-slip .region-h{position:absolute;width:0;height:0;margin:0;padding:0;overflow:hidden;border:0}
  .slip-region{display:inline-block}
}
/* scroll-to-top button */
.to-top{position:fixed;right:14px;bottom:18px;z-index:40;width:52px;height:52px;border-radius:50%;border:2px solid #C9A227;background:#1F1A14;color:#F5E7C0;font-size:26px;font-weight:900;line-height:1;display:none;align-items:center;justify-content:center;box-shadow:0 4px 14px rgba(0,0,0,.3);cursor:pointer}
.to-top.show{display:flex}
@media (min-width:960px){ .to-top{right:24px;bottom:24px;width:56px;height:56px} }
/* one-sentence summary: collapsed on phones, the headline line always visible */
.ui-slip details.answer{padding:0}
.ui-slip details.answer summary{cursor:pointer;padding:8px 12px;font-weight:800;list-style:none;display:flex;justify-content:space-between;gap:8px}
.ui-slip details.answer summary::-webkit-details-marker{display:none}
.ui-slip details.answer summary::after{content:"＋";color:#8A5A00;font-weight:900}
.ui-slip details.answer[open] summary::after{content:"－"}
.ui-slip details.answer p{margin:0;padding:0 12px 10px;line-height:1.6}
@media (min-width:960px){ .ui-slip details.answer summary{padding:10px 14px} }

.answer b{font-weight:800;color:#111}
.answer b.ans-1st{color:#B00000;font-size:1.08em}