/* daily.css -- Daily Hamster: the doorway at /daily/, the archive pages and the
   footer logo. Values lifted from the ruled mockups (Daily Hamster, Current Page,
   2026-09-14): bar 1 with the navy SUN tab, box B for the games with Luckiest Guy
   at 20px, corner icons, Results sheet, and the stacked Rhyme of the Day box on a
   top-to-bottom navy-to-periwinkle ombre with the glowing green outline pill. */

.dh *{box-sizing:border-box}
#out.dh{max-width:760px;margin:0 auto;padding:14px 14px 26px;font-family:"Nunito",-apple-system,"Segoe UI",system-ui,sans-serif;color:var(--fg)}
#out.dh a:hover{text-decoration:none}
.dh h1,.dh h2,.dh h3{margin:0;text-transform:none;letter-spacing:normal}

/* ---- header: logo, a dark rule, the date box ---- */
.hb1{display:flex;align-items:center;gap:18px;padding-bottom:12px;border-bottom:1px solid var(--rule);margin-bottom:14px}
.hb1 .lg{flex:none;display:block}
.hb1 .lg img{height:58px;width:auto;display:block}
.hb1 .rule{flex:1;height:0;border-top:1px solid #1B1B1B}
.wd1{display:flex;align-items:stretch;border-radius:12px;overflow:hidden;border:1px solid #E1DFDD;background:#fff;box-shadow:0 2px 0 #E1DFDD;color:#1B1B1B}
.wd1 .cap{background:#031D3D;color:#A0D830;font:800 13px/1 "Nunito",sans-serif;letter-spacing:.2em;display:grid;place-items:center;padding:0 14px;writing-mode:vertical-rl;transform:rotate(180deg)}
.wd1 .main{padding:8px 18px 7px}
.wd1 .big{font:700 30px/1 "Fredoka",sans-serif;letter-spacing:.01em;white-space:nowrap}
.wd1 .sm{font:800 11px/1 "Nunito",sans-serif;letter-spacing:.18em;color:#605e5c;margin-top:5px;text-transform:uppercase}
@media (prefers-color-scheme: dark){.hb1 .rule{border-top-color:#8a8886}}

/* ---- the games box (B) ---- */
.gbB{position:relative;margin-top:10px;border-radius:14px;background:#031D3D;padding:0 12px 12px;box-shadow:0 10px 0 #01132A,0 18px 26px rgba(3,29,61,.25)}
.gbB .lid{display:flex;align-items:center;justify-content:space-between;padding:12px 6px 10px;color:#fff}
.gbB .lid h2{font:400 20px/1 "Luckiest Guy","Fredoka",sans-serif;letter-spacing:.03em;text-transform:uppercase;padding-top:3px;color:#fff}
.gbB .lid h2 em{font-style:normal;color:#A0D830}
.gbB .lid span{font:800 11px/1 "Nunito",sans-serif;letter-spacing:.16em;text-transform:uppercase;color:#B8C6DB}
.gbB .inner{background:#F4F1EA;border-radius:10px;padding:12px}

.dh-streak{display:flex;align-items:center;gap:10px;padding:7px 12px;border:1px solid #E1DFDD;border-radius:10px;background:#fff;margin-bottom:12px;color:#1B1B1B}
.dh-streak b{font:600 15px/1 "Fredoka",sans-serif;white-space:nowrap;min-width:0;overflow:hidden;text-overflow:ellipsis}
.dh-streak .flame{font-size:20px;line-height:1}
.dh-week{display:flex;gap:5px;margin-left:auto}
.dh-week span{width:22px;height:22px;border-radius:50%;border:1.5px solid #D6D3CC;display:grid;place-items:center;font:800 9px/1 "Nunito",sans-serif;color:#8a8886}
.dh-week span.on{background:#2b579a;border-color:#2b579a;color:#fff}
.dh-week span.half{background:linear-gradient(90deg,#2b579a 50%,transparent 50%);border-color:#2b579a;color:#fff}
.dh-week span.today{border-color:#2b579a;border-width:2px;color:#2b579a}
.dh-week span.pre{opacity:.35}

.gcs{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px;align-items:stretch}
.gc{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;padding:20px 16px 18px;border-radius:12px;border:1px solid #E1DFDD;color:inherit;cursor:pointer;box-shadow:0 1px 2px rgba(3,29,61,.10);transition:transform .16s ease,box-shadow .16s ease}
.gc img.art{width:112px;height:112px;object-fit:contain}
.gc h3{font-size:24px;line-height:1.1}
.gc p{margin:0;font-size:15px;line-height:1.35;white-space:nowrap}
.gc .st{font-size:14px;font-weight:800;min-height:1.45em;line-height:1.45em}
.gc .go{margin-top:auto;padding:10px 24px;border-radius:999px;font-weight:800;font-size:17px;cursor:pointer;border:0;font-family:inherit}
.gc .ic{position:absolute;top:10px;right:10px;display:flex;gap:6px}
.gc .ic a,.gc .ic button{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;border:0;padding:0;cursor:pointer;font:inherit}
.gc .ic svg{width:18px;height:18px}
.gc.hk{background:#FBF6EC;border-color:#E7DCC6;color:#262320}
.gc.hk h3{font-family:"Special Elite","Courier New",monospace;font-weight:400}
.gc.hk p{color:#6D6558;white-space:normal;text-wrap:balance}
.gc.hk .st{color:#B5266A}
.gc.hk .go{background:#E63E8C;color:#fff}
.gc.hk .ic a,.gc.hk .ic button{background:#fff;color:#6D6558;box-shadow:inset 0 0 0 1.5px #E7DCC6}
.gc.mi{background:linear-gradient(180deg,#25306A 0%,#4B4A8F 55%,#8C6A93 100%);border-color:#6B6AA8;color:#fff}
.gc.mi h3{font-family:"Fredoka",sans-serif;font-weight:600}
.gc.mi p{color:#E2DCF3}
.gc.mi .st{color:#D9F5B6}
.gc.mi .go{background:#fff;color:#25306A;box-shadow:0 2px 6px rgba(3,10,40,.28)}
.gc.mi .ic a,.gc.mi .ic button{background:rgba(255,255,255,.14);color:#fff;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.35)}
.gc p .sm{display:none}
/* the whole card lifts on hover and the whole card plays; the corner icons opt out of the
   lift so it is clear you are about to click the icon and not the game. */
.gc:hover{transform:translateY(-6px);box-shadow:0 18px 34px rgba(3,29,61,.30)}
.gc:active{transform:translateY(-2px);box-shadow:0 6px 14px rgba(3,29,61,.22)}
.gc:has(.ic a:hover),.gc:has(.ic button:hover){transform:none;box-shadow:0 1px 2px rgba(3,29,61,.10)}
.gc .ic a,.gc .ic button{transition:transform .14s ease,background-color .14s ease,box-shadow .14s ease}
.gc.hk .ic a:hover,.gc.hk .ic button:hover{background:#FDE7F1;color:#B5266A;box-shadow:inset 0 0 0 2px #E63E8C;transform:scale(1.08)}
.gc.mi .ic a:hover,.gc.mi .ic button:hover{background:rgba(255,255,255,.30);color:#fff;box-shadow:inset 0 0 0 2px #9BE87A;transform:scale(1.08)}
.gc .go{transition:transform .14s ease,filter .14s ease}
.gc:hover .go{transform:scale(1.03)}
.gc:has(.ic a:hover) .go,.gc:has(.ic button:hover) .go{transform:none}
@media (prefers-reduced-motion: reduce){
  .gc,.gc .go,.gc .ic a,.gc .ic button,.rotdq,.rotdq .pill{transition:none}
  .gc:hover,.gc:active,.gc:hover .go,.rotdq:hover,.rotdq:active,.rotdq:hover .pill{transform:none}
}


/* ---- Rhyme of the Day: stacked lines, navy into periwinkle, glowing outline pill ---- */
.rotdq{position:relative;overflow:hidden;border-radius:14px;padding:16px 22px 16px;margin:28px 0 8px;text-align:center;color:#fff;background:linear-gradient(180deg,#031D3D 0%,#1E3A6E 55%,#3B4E86 100%);cursor:pointer;box-shadow:0 1px 2px rgba(3,29,61,.10);transition:transform .16s ease,box-shadow .16s ease}
.rotdq:hover{transform:translateY(-6px);box-shadow:0 18px 34px rgba(3,29,61,.34)}
.rotdq:active{transform:translateY(-2px);box-shadow:0 6px 14px rgba(3,29,61,.24)}
.rotdq .pill{transition:transform .14s ease,box-shadow .14s ease}
.rotdq:hover .pill{transform:scale(1.04);box-shadow:0 0 18px rgba(160,216,48,.55)}
.rotdq .sent{font:600 23px/1.3 "Fredoka",sans-serif;display:flex;flex-direction:column;align-items:center;gap:2px}
.rotdq .sent b{color:#A0D830;font-weight:600}
.rotdq .sent .s{font-style:italic;color:#B8C6DB}
.rotdq .pill{display:inline-flex;align-items:center;gap:10px;margin-top:12px;text-decoration:none;color:#A0D830;border:2px solid #A0D830;border-radius:999px;padding:8px 10px 8px 22px;box-shadow:0 0 12px rgba(160,216,48,.35);font:700 20px/1 "Fredoka",sans-serif;text-transform:uppercase;letter-spacing:.08em}
.rotdq .pill .go{width:32px;height:32px;border-radius:50%;background:#A0D830;color:#031D3D;display:grid;place-items:center;font:700 17px/1 "Nunito",sans-serif;flex:none}
.rotdq.loading .sent{visibility:hidden}

/* ---- the Results / stats sheet ---- */
.veil{position:fixed;inset:0;background:rgba(10,14,30,.55);display:grid;place-items:center;z-index:50;padding:16px}
.veil[hidden]{display:none}
.sheet{width:min(520px,100%);max-height:calc(100vh - 32px);overflow:auto;border-radius:18px;color:#fff;padding:22px 24px 20px;font-family:"Nunito",sans-serif;position:relative;box-shadow:0 20px 50px rgba(0,0,0,.35)}
.sheet.mi{background:linear-gradient(180deg,#25306A 0%,#4B4A8F 60%,#8C6A93 100%)}
.sheet.hk{background:#FBF6EC;color:#262320;background-image:repeating-linear-gradient(transparent 0 23px,rgba(140,170,210,.22) 23px 24px)}
.sheet .x{position:absolute;right:14px;top:12px;width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.16);display:grid;place-items:center;font:700 16px/1 "Nunito",sans-serif;border:0;color:inherit;cursor:pointer}
.sheet.hk .x{background:rgba(0,0,0,.06)}
.sheet .k{font:800 11px/1 "Nunito",sans-serif;letter-spacing:.2em;text-transform:uppercase;color:#D9F5B6}
.sheet.hk .k{color:#B5266A}
.sheet h3{font:700 30px/1.1 "Fredoka",sans-serif;margin:6px 0 2px}
.sheet.hk h3{font-family:"Special Elite","Courier New",monospace;font-weight:400}
.sheet .sub{color:#E2DCF3;font-size:14px}
.sheet.hk .sub{color:#6D6558}
.sheet .stars{font-size:22px;color:#F4D35E;letter-spacing:3px;margin:6px 0 14px}
.sheet.hk .stars{color:#E0A92E}
.sheet .nums{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:14px}
.sheet .nums div{background:rgba(255,255,255,.1);border-radius:10px;padding:9px 4px;text-align:center}
.sheet.hk .nums div{background:#fff;box-shadow:inset 0 0 0 1px #E7DCC6}
.sheet .nums b{display:block;font:700 24px/1 "Fredoka",sans-serif}
.sheet .nums small{font-size:10px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:#E2DCF3}
.sheet.hk .nums small{color:#6D6558}
.sheet .histh{font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;margin:4px 0 6px;color:#E2DCF3}
.sheet.hk .histh{color:#6D6558}
.sheet .hist .row{display:grid;grid-template-columns:34px 1fr;gap:8px;align-items:center;margin:3px 0;font-size:12px;font-weight:800}
.sheet .hist .bar{height:14px;min-width:18px;border-radius:3px;background:rgba(255,255,255,.22);display:flex;justify-content:flex-end;align-items:center;padding-right:5px;font-size:10px}
.sheet.hk .hist .bar{background:#EDE3D0}
.sheet .hist .bar.me{background:#9BE87A;color:#1E2A5A}
.sheet.hk .hist .bar.me{background:#E63E8C;color:#fff}
.sheet .acts{display:flex;gap:10px;margin-top:16px}
.sheet .acts a,.sheet .acts button{flex:1;text-align:center;border-radius:999px;padding:11px 0;font:800 15px/1.2 "Nunito",sans-serif;text-decoration:none;border:0;cursor:pointer}
.sheet.mi .acts .pri{background:#fff;color:#25306A}
.sheet.mi .acts .sec{background:transparent;color:#fff;box-shadow:inset 0 0 0 2px rgba(255,255,255,.7)}
.sheet.hk .acts .pri{background:#E63E8C;color:#fff}
.sheet.hk .acts .sec{background:transparent;color:#E63E8C;box-shadow:inset 0 0 0 2px #E63E8C}
.sheet .next{text-align:center;font-size:12.5px;margin-top:12px;opacity:.85}
.sheet .none{margin:8px 0 4px;font-size:15px}

/* ---- the footer logo, on every page ---- */
#dhbtn{flex:0 0 auto;display:inline-flex;align-items:center;margin:-1px 0 1px 6px;text-decoration:none}
#dhbtn img{height:26px;width:auto;display:block;opacity:.75;transition:opacity .15s}
#dhbtn,#dhbtn *{cursor:pointer}   /* his report 2026-09-24: Safari showed the I-beam over the logo */
#dhbtn:hover img,#dhbtn.here img{opacity:1}
/* His ask 2026-09-24: hovering the logo must be unmistakable, not "a tad brighter". Off /daily/ it now
   comes to full strength, grows and lifts a touch; on /daily/ (.here) it is already lit and stays put. */
#dhbtn img{transition:opacity .15s,transform .18s cubic-bezier(.3,1.5,.5,1)}
#dhbtn:not(.here):hover img,#dhbtn:not(.here):focus-visible img{transform:translateY(-2px) scale(1.12)}
#dhbtn picture{display:block}

/* ---- preview-only pill ---- */
.dh-fake{position:fixed;left:50%;bottom:62px;transform:translateX(-50%);z-index:60;background:#B3202C;color:#fff!important;font:800 12px/1 "Nunito",sans-serif;padding:8px 14px;border-radius:999px;text-decoration:none!important;box-shadow:0 4px 12px rgba(0,0,0,.25);white-space:nowrap}

/* ---- archive ---- */
.arc{border-radius:10px;padding:14px 14px 16px;margin-top:4px}
.ar-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 0 12px;flex-wrap:wrap}
.ar-head .ey{font:800 11px/1 "Nunito",sans-serif;letter-spacing:.16em;text-transform:uppercase;opacity:.8}
.ar-head h1{font-size:26px;margin-top:4px}
.ar-nav{display:flex;align-items:center;gap:8px;font-weight:800;font-size:15px}
.ar-nav button{width:32px;height:32px;border-radius:50%;cursor:pointer;font:700 16px/1 "Nunito",sans-serif}
.ar-nav button:disabled{opacity:.35;cursor:default}
.cal{display:grid;grid-template-columns:repeat(7,1fr);gap:5px}
.cal .dow{text-align:center;font:800 10px/1 "Nunito",sans-serif;letter-spacing:.08em;padding-bottom:2px;opacity:.7}
/* BIG STARS, his ask 2026-09-24 ("the stars nice and big ... my hunch is the days are too tall"). A day is now
   a little wider than tall (5:4, was 1:1.1), the date sits small in the corner, and the stars are the day:
   centered and sized off the cell's own width (container units), so they fill it on a laptop and still fit
   a phone. Three stars take about two thirds of the width. */
.cal .d{aspect-ratio:5/4;border-radius:8px;padding:0;display:block;position:relative;border:1px solid;font:inherit;color:inherit;text-align:left;cursor:pointer;container-type:inline-size;overflow:hidden}
.cal .d.pad{border-color:transparent!important;background:transparent!important;cursor:default}
.cal .d .n{position:absolute;top:clamp(3px,5cqi,8px);left:clamp(4px,6cqi,9px);font-size:clamp(9px,8.5cqi,12px);font-weight:700;line-height:1}
.cal .d .mk{position:absolute;left:50%;top:57%;transform:translate(-50%,-50%);display:grid;place-items:center;line-height:1}
.cal .d .mk.gold{background:#F4D35E;border:1px solid #D9B32C;color:#6B4D00}
.cal .d .mk.stars{font-size:clamp(10px,24cqi,36px);letter-spacing:-.04em;color:#C9A227;white-space:nowrap;text-shadow:0 1px 0 rgba(0,0,0,.14)}
.cal .d .mk.none{width:clamp(10px,15cqi,20px);height:clamp(10px,15cqi,20px);border-radius:4px;border:1px dashed currentColor;opacity:.35}
.cal .d.fut,.cal .d.pre{cursor:default;opacity:.45;border-style:dashed}
/* A playable day is a link (2026-09-24): it lifts on hover, like the game cards on /daily/. */
.cal a.d{text-decoration:none;transition:transform .15s ease,box-shadow .15s ease,background-color .15s ease}
/* Only where a pointer can hover: on a phone a tapped day would otherwise stay stuck up in the air. */
@media (hover:hover){
.cal a.d:hover{transform:translateY(-3px)}
.arc.hk .cal a.d:hover{box-shadow:0 6px 14px rgba(38,35,32,.16);border-color:#E63E8C}
.arc.mi .cal a.d:hover{box-shadow:0 8px 18px rgba(0,0,0,.35);background:rgba(255,255,255,.18);border-color:#9BE87A}
}
.cal a.d:focus-visible{transform:translateY(-3px);outline:none}
.arc.hk .cal a.d:focus-visible{box-shadow:0 6px 14px rgba(38,35,32,.16);border-color:#E63E8C}
.arc.mi .cal a.d:focus-visible{box-shadow:0 8px 18px rgba(0,0,0,.35);background:rgba(255,255,255,.18);border-color:#9BE87A}
@media (prefers-reduced-motion: reduce){.cal a.d{transition:none}.cal a.d:hover,.cal a.d:focus-visible{transform:none}}
.ar-day{margin-top:12px;border-radius:12px;padding:12px 14px;border:1px solid}
.ar-day h3{font-size:16px;margin-bottom:8px}
.ar-row{display:flex;align-items:center;gap:12px;font-size:14px;flex-wrap:wrap}
.ar-row .sub{opacity:.8;font-size:13px}
.ar-row .stars{letter-spacing:2px}
.ar-row .btn{margin-left:auto;padding:8px 16px;border-radius:999px;font-weight:800;font-size:13px;text-decoration:none;white-space:nowrap}
.legend{display:flex;flex-wrap:wrap;gap:10px 16px;margin-top:10px;font-size:11px;align-items:center;opacity:.85}
.legend span{display:inline-flex;align-items:center;gap:5px}
.legend i{width:14px;height:14px;border-radius:4px;display:inline-grid;place-items:center;font-size:10px;font-style:normal}
.arc.hk{background:#FBF6EC;background-image:repeating-linear-gradient(transparent 0 23px,rgba(140,170,210,.22) 23px 24px);box-shadow:0 1px 0 #D9CBB2;color:#262320}
.arc.hk h1,.arc.hk .ar-nav{font-family:"Special Elite","Courier New",monospace;font-weight:400}
.arc.hk .cal .d{background:#FFFDF8;border-color:#E7DCC6;border-radius:3px}
.arc.hk .cal .d.today{border:2px solid #E63E8C}
.arc.hk .cal .d.sel{background:#FDE7F1;border-color:#E63E8C}
.arc.hk .ar-nav button{background:#FFFDF8;border:1.5px solid #262320;color:#262320}
.arc.hk .ar-day{background:#FFFDF8;border-color:#E7DCC6}
.arc.hk .ar-row .btn{background:#E63E8C;color:#fff}
.arc.hk .ar-row .btn.ghost{background:transparent;color:#E63E8C;box-shadow:inset 0 0 0 1.5px #E63E8C}
.arc.mi{background:linear-gradient(180deg,#25306A 0%,#3B3F7E 60%,#5A4F86 100%);color:#fff}
.arc.mi .cal .d{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.2)}
.arc.mi .cal .d.today{border:2px solid #9BE87A}
.arc.mi .cal .d.sel{background:rgba(255,255,255,.2);border-color:#9BE87A}
.arc.mi .ar-nav button{background:rgba(255,255,255,.1);border:1.5px solid rgba(255,255,255,.6);color:#fff}
.arc.mi .ar-day{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.2)}
.arc.mi .ar-row .btn{background:#fff;color:#25306A}
.arc.mi .ar-row .btn.ghost{background:transparent;color:#fff;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.7)}
.arc .stars{color:#E0A92E}
.arc.mi .cal .d .mk.stars{color:#F4D35E}
.legend i.lstar{border:0;width:auto;font-size:11px;letter-spacing:-.5px;color:#C9A227}
.arc.mi .legend i.lstar{color:#F4D35E}
.arc.mi .stars{color:#F4D35E}
.ar-back{display:inline-block;margin:0 0 10px;font-weight:800;font-size:14px;color:var(--accent)}

/* ---- phones ---- */
@media (max-width:639px){
  .gcs{grid-template-columns:minmax(0,1fr)}
  .gbB{padding-left:8px;padding-right:8px;margin-top:6px}.gbB .inner{padding:8px}
  .gbB .lid span{display:none}
  .dh-week{gap:3px}.dh-week span{width:19px;height:19px;font-size:8px}
  .dh-streak{padding:6px 10px;gap:8px}.dh-streak b{font-size:14px}
  .gc{display:grid;grid-template-columns:58px 1fr;grid-template-rows:auto auto;grid-template-areas:"img tx" "img go";column-gap:12px;row-gap:6px;padding:12px;text-align:left;align-items:center}
  .gc img.art{grid-area:img;width:58px;height:58px}
  .gc .tx{grid-area:tx;min-width:0}
  .gc .go{grid-area:go;justify-self:start;margin:0;padding:6px 16px;font-size:14px}
  .gc h3{font-size:19px;white-space:nowrap;padding-right:62px}
  .gc p{font-size:12.5px}
  .gc p .lg{display:none}.gc p .sm{display:inline}
  .gc .st{font-size:12px;margin-top:1px;min-height:1.35em;line-height:1.35em}
  .gc .ic{top:9px;right:9px}
  .gc .ic a,.gc .ic button{width:26px;height:26px}.gc .ic svg{width:14px;height:14px}
  .rotdq{padding:10px 14px 12px;margin:22px 0 6px}
  .rotdq .sent{font-size:16.5px;line-height:1.25;gap:0}
  .rotdq .pill{margin-top:8px;padding:5px 7px 5px 16px;gap:8px;font-size:15px}
  .rotdq .pill .go{width:26px;height:26px;font-size:14px}
}
@media (max-width:479px){
  #out.dh{padding:10px 12px 20px}
  .hb1{gap:10px}.hb1 .rule{min-width:18px}.hb1 .lg img{height:44px}
  .wd1 .big{font-size:19px}.wd1 .main{padding:6px 10px 5px}.wd1 .sm{font-size:10px;margin-top:3px}.wd1 .cap{padding:0 7px;font-size:10px}
  .sheet{padding:18px 16px 16px}
  .sheet h3{font-size:26px}
  .cal{gap:3px}
  /* A phone day is ~42px wide: square-ish, with the stars lower, so they clear the date. */
  .cal .d{aspect-ratio:1/1.08}.cal .d .mk{top:64%}
}
@media (prefers-reduced-motion: reduce){#dhbtn img{transition:none}}

/* ---- the finish actions on the daily game pages ---- */
.dhdone{display:flex;gap:10px;justify-content:center;margin-top:12px}
.dhdone .btn{text-decoration:none;display:inline-flex;align-items:center}
.hkrounds.dhno b{margin-right:6px}

/* ---- Mission: Ignition's page wears the Dusk sky, like its card ---- */
#out.gameout #panel.panel.panel.cd-night{background:linear-gradient(180deg,#25306A 0%,#4B4A8F 55%,#8C6A93 100%)}

/* ---- the share poster (ruled 2026-09-20): signature on top, puzzle in the middle, score along
   the bottom. Three zones and nothing floating loose, which is what keeps it sparse. ---- */
.pveil{position:fixed;inset:0;background:rgba(10,14,30,.6);display:grid;place-items:center;z-index:60;padding:16px;overflow:auto}
.pveil[hidden]{display:none}
body.dh-locked{overflow:hidden}
.pwrap{width:min(440px,100%)}
.poster{position:relative;overflow:hidden;border-radius:18px;text-align:center;box-shadow:0 18px 40px rgba(20,14,40,.35)}
.poster .x{position:absolute;right:12px;top:10px;width:32px;height:32px;border-radius:50%;background:rgba(255,255,255,.18);display:grid;place-items:center;font:700 15px/1 "Nunito",sans-serif;border:0;color:inherit;cursor:pointer;z-index:2}
.poster.hk .x{background:rgba(0,0,0,.07)}
.poster .pbody{padding:26px 24px 0}
.poster .pmark{height:30px;width:auto;display:block;margin:0 auto}
.poster .pgname{margin-top:11px;font:800 14px/1 "Nunito",sans-serif;letter-spacing:.16em;text-transform:uppercase}
.poster .psub{margin-top:6px;font:800 10px/1 "Nunito",sans-serif;letter-spacing:.14em;text-transform:uppercase;opacity:.72}
.poster .pscore{margin:24px 0 22px}
.poster .plbl{display:block;font:800 9px/1 "Nunito",sans-serif;letter-spacing:.2em;text-transform:uppercase;opacity:.7;margin-bottom:9px}
.poster .prank{display:block;font:400 40px/1 "Luckiest Guy","Fredoka",cursive;letter-spacing:.01em}
.poster .ptally{display:block;margin-top:9px;font:700 16px/1 "Fredoka",sans-serif;opacity:.9}
.poster .pbar{display:grid;grid-template-columns:auto minmax(0,1fr);gap:14px;align-items:center;text-align:left;padding:12px 22px 14px}
.poster .psimon{width:58px;height:58px;object-fit:contain;object-position:bottom;display:block}
.poster .purl{font:800 10px/1 "Nunito",sans-serif;letter-spacing:.14em;text-transform:uppercase}
.pfoot{margin:10px 0 0;text-align:center;font:600 12px/1.4 "Nunito",sans-serif;color:rgba(255,255,255,.72)}
.poster.hk{background:#FBF6EC;color:#262320;background-image:repeating-linear-gradient(transparent 0 23px,rgba(140,170,210,.22) 23px 24px)}
.poster.hk .pgname,.poster.hk .psub{color:#B5266A;font-family:"Special Elite","Courier New",monospace;font-weight:400}
.poster.hk .prank{font-family:"Special Elite","Courier New",monospace;font-size:34px}
.poster.hk .pbar{background:rgba(217,203,178,.32);border-top:1.5px dashed #C9BBA3}
.poster.hk .ptally{font-family:"Special Elite",monospace;font-weight:400}
.poster.hk .prank{color:#E63E8C}
.poster.hk .purl{color:#9C927F;font-family:"Special Elite",monospace;font-weight:400}
.poster.mi{background:linear-gradient(180deg,#25306A 0%,#4B4A8F 60%,#8C6A93 100%);color:#fff}
.poster.mi .pgname,.poster.mi .psub{color:#9BE87A}
.poster.mi .pbar{background:rgba(10,14,40,.28);border-top:1px solid rgba(255,255,255,.2)}
.poster.mi .prank{color:#9BE87A;text-shadow:0 0 24px rgba(155,232,122,.45)}
.poster.mi .purl{color:#C8C2E2}
.poster .psky{position:absolute;inset:0;pointer-events:none;opacity:.5}
.poster .psky i{position:absolute;width:2px;height:2px;border-radius:50%;background:#fff}
.pacts{display:flex;gap:10px;margin-top:12px}
.pacts button,.pacts a{flex:1;text-align:center;border-radius:999px;padding:11px 0;font:800 15px/1.2 "Nunito",sans-serif;text-decoration:none;border:0;cursor:pointer}
.pwrap:has(.poster.hk) .pacts .pri{background:#E63E8C;color:#fff}
.pwrap:has(.poster.hk) .pacts .sec{background:#FBF6EC;color:#E63E8C;box-shadow:inset 0 0 0 2px #E63E8C}
.pwrap:has(.poster.mi) .pacts .pri{background:#25306A;color:#fff}
.pwrap:has(.poster.mi) .pacts .sec{background:#fff;color:#25306A;box-shadow:inset 0 0 0 2px #25306A}
@media (max-width:479px){
  .poster .pbody{padding:20px 16px 0}
  .poster .pmark{height:26px}
  .poster .prank{font-size:33px}
  .poster.hk .prank{font-size:28px}
  .poster .pscore{margin:20px 0 18px}
  .poster .psimon{width:50px;height:50px}
  .poster .pbar{padding:12px 16px 14px;gap:10px}
}

/* ---- the way out of a game: floated into the empty right side of the panel's title row, so it
   costs no vertical space. Progress is saved as you go, so this is navigation, not quitting. ---- */
#out.gameout{position:relative}
/* .6 -> .92, his report 2026-09-24: "the DailyHamster logo on the top right is too dim" (Hinky's ruled paper). */
.dhback{position:absolute;top:22px;right:22px;z-index:5;display:inline-flex;align-items:center;gap:6px;
  padding:5px 9px;border-radius:999px;text-decoration:none;line-height:1;opacity:.92;transition:opacity .15s ease,background-color .15s ease}
.dhback:hover,.dhback:focus-visible{opacity:1;background:rgba(0,0,0,.06)}
/* the chevron, drawn like the card icons. Nudged down 2.8px: the mark’s ink centroid sits at
   62.5% of its height (Hamster is heavy, the crown is air), so the box centre reads high. */
.dhback .ar{width:15px;height:15px;display:block;position:relative;top:2.8px}
.dhback img{height:22px;width:auto;display:block}
.dhback .dk{display:none}
body:has(#panel.hk-ink) .dhback{color:#B5266A}
body:has(#panel.cd-night) .dhback{color:#D9F5B6}
body:has(#panel.cd-night) .dhback:hover,body:has(#panel.cd-night) .dhback:focus-visible{background:rgba(255,255,255,.14)}
body:has(#panel.cd-night) .dhback .lt{display:none}
body:has(#panel.cd-night) .dhback .dk{display:block}
@media (max-width:560px){.dhback{top:14px;right:12px;padding:4px 7px;gap:4px}.dhback img{height:18px}.dhback .ar{width:13px;height:13px;top:2.3px}}

/* ---- "A RhymeHamster joint": a movie credit, so it is set like one ---- */
#foot .gamecredit{font-family:"Oswald",sans-serif;font-weight:400;font-size:12px;letter-spacing:.09em;text-transform:uppercase}

/* ---- game pages only: the dictionary's 125px header, with its word band and rhyme search, is
   replaced by a 44px bar carrying just the wordmark. Worth ~81px of a laptop screen. ---- */
#dhslim{display:flex;align-items:center;height:44px;padding:0 16px;background:#fff;border-bottom:1px solid #E1DFDD}
#dhslim .home{display:inline-flex;align-items:center;text-decoration:none}
#dhslim .home img{height:22px;width:auto;display:block}
@media (max-width:479px){#dhslim{height:40px;padding:0 12px}#dhslim .home img{height:20px}}

/* ---- Mission: the launch view is 52% of the panel and the reason the page runs off a laptop.
   Scaled down from 380px wide; the SVG keeps its aspect, so the height comes down with it. ---- */
#panel.cd-night .cdvis{width:min(100%,308px)}

/* His ruling 2026-09-24: on Daily Hamster pages the list/paragraph view and the tour mean nothing,
   so they sit faded and inert. Settings, the logo and feedback stay live. (daily.css loads only on
   /daily/ pages; the game pages' footer never had these two.) daily.js also takes them out of the
   tab order and marks them disabled for screen readers. */
#foot #viewbtn,#foot #tourbtn{opacity:.22!important;pointer-events:none;cursor:default;animation:none!important}