/* XTART Home Model — shared main-menu layout for QuizLoop, QuizBoard, SketchQuiz, Imposter and Auction.
   Same metrics as the English Hub home (spacing, header, hero, cards, buttons, footer).
   Colours, backgrounds, fonts and logos stay each app's own: this file sets sizes and positions only.
   Canonical copy: XTART-English-Hub/docs/HOME_MODEL.md. Keep the copies in every app identical. */

/* Page frame: content anchored to the top, same gutters as the Hub */
.wrap:has(.homeModel),.shell:has(.homeModel){max-width:1180px;margin:0 auto;padding:25px 22px 70px;min-height:100svh;display:flex;flex-direction:column;justify-content:flex-start;box-sizing:border-box}
.wrap:has(.homeModel)>.top,.shell:has(.homeModel)>.top{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:44px;margin:0 2px 20px}

#connection[hidden],.connection[hidden]{display:none}
.shell:has(.homeModel){width:100%;margin:0 auto}
body:has(.shell .homeModel){display:block;padding:0}

/* Top bar: XTART mark on the left, English Hub pill on the right */
.wrap:has(.homeModel)>.top .logo,.wrap:has(.homeModel)>.top .brand,.shell:has(.homeModel)>.top .xtart{display:inline-flex;align-items:center;gap:10px;font-size:16px;font-weight:900;letter-spacing:2px;line-height:1}
.wrap:has(.homeModel)>.top :is(.hub-link,.hubLink,.hubLogo),.shell:has(.homeModel)>.top :is(.hub,nav .hub){box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;margin:0;padding:0 14px;border:1px solid color-mix(in srgb,currentColor 24%,transparent);border-radius:12px;font:700 12px/1.2 inherit;font-family:inherit;letter-spacing:0;text-decoration:none;white-space:nowrap}
.wrap:has(.homeModel)>.top :is(.hub-link,.hubLogo) br{display:none}
.wrap:has(.homeModel)>.top :is(.hub-link,.hubLogo) span:not(.mark){white-space:nowrap}
.wrap:has(.homeModel)>.top :is(.hub-link,.hubLogo) .mark{width:24px;height:24px;flex:none}


/* Centre the menu in the window: top bar stays on top, the card block is centred in the free space with margins on every side */
.wrap:has(.homeModel)>#app,.shell:has(.homeModel)>#app{flex:1 1 auto;display:flex;flex-direction:column;justify-content:center;gap:14px;padding:20px 0;min-width:0}

/* Main card: same padding and radius as the Hub header card */
.homeModel.homeModel{box-sizing:border-box;width:100%;max-width:none;margin:0;padding:28px 24px 25px;border-radius:22px}
.homeModel .hero,.homeModel.hero{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;column-gap:15px;row-gap:0;text-align:center;margin:0 0 24px;padding:0}
.homeModel.hero{margin:0;padding:28px 24px}
.homeModel :is(.brandLogo,.logo,.heroLogo,h1 img,.heroArt){width:64px;height:64px;flex:none;margin:0}
.homeModel h1{display:flex;align-items:center;justify-content:center;gap:15px;margin:0!important;font-size:clamp(38px,4.8vw,60px)!important;font-weight:800;letter-spacing:-2.5px;line-height:1.07}
.homeModel .hero>:is(p,.tagline,.heroButtons,.divider,details,.eyebrow),.homeModel.hero>:is(p,.heroButtons,.divider){flex:0 0 100%;max-width:none}
.homeModel .hero>.eyebrow,.homeModel.hero>.eyebrow{order:-1;margin:0 0 14px}
.homeModel .tagline,.homeModel .hero>p:not(.eyebrow),.homeModel.hero>p:not(.eyebrow){margin:12px 0 0;font-size:14px;line-height:1.5;letter-spacing:.035em}
.homeModel .eyebrow{font-size:10px;font-weight:800;letter-spacing:1.1px}

/* Mode cards */
.homeModel .grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin:0}
.homeModel .grid+.card,.homeModel>.card{margin-top:14px!important}
.homeModel .card{box-sizing:border-box;padding:20px;border-radius:15px;min-height:0}
.homeModel .card h2{display:flex;align-items:center;gap:10px;margin:8px 0 12px;font-size:20px;font-weight:800;letter-spacing:-.4px;line-height:1.2}
.homeModel .card :is(p,.small){margin:0 0 16px;font-size:14px;line-height:1.55}
.homeModel .card .icon{margin-bottom:6px}

/* Buttons */
.homeModel :is(.btn,button.primary,.heroButtons button){box-sizing:border-box;min-height:44px;padding:0 16px;border-radius:10px;font-size:12px;font-weight:800;letter-spacing:.3px;line-height:1.2}
.homeModel .heroButtons{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:20px}
.homeModel .actions{margin-top:14px;justify-content:flex-start}

/* Footer */
.wrap:has(.homeModel)>:is(footer,.footer),.shell:has(.homeModel)>footer{position:static;margin:18px 0 0;padding:0;text-align:center;font-size:10px;letter-spacing:.04em}

/* Floating Help & display / Projector view: one shape everywhere */
.readingToggle,.displayOptions>summary{box-sizing:border-box;min-height:44px;border-radius:12px;font:700 12px/1.2 Arial,Helvetica,sans-serif;letter-spacing:0}


/* ---- Glass finish (English Hub look): one font, gradient hairline borders, soft gloss ---- */
.homeModel.homeModel,.homeModel .card,.homeModel .teacherDrawer,.shell:has(.homeModel) #teacherPanel{position:relative;border-color:transparent}
.homeModel.homeModel{-webkit-backdrop-filter:blur(14px) saturate(1.15);backdrop-filter:blur(14px) saturate(1.15);box-shadow:0 18px 50px -18px rgba(0,0,0,.28),0 1px 0 rgba(255,255,255,.08) inset}
.homeModel .card{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
/* gradient hairline ring (turquoise > violet > pink, same as the Hub game cards) */
.homeModel.homeModel::before,.homeModel .card::before,.homeModel .teacherDrawer::before,.shell:has(.homeModel) #teacherPanel::before{content:"";position:absolute;inset:0;height:auto;width:auto;border-radius:inherit;padding:1px;background:linear-gradient(125deg,#35d8c299,#8b5cf6aa 50%,#d05adf99);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);pointer-events:none;z-index:2}
/* soft gloss from the top-left corner */
.homeModel.homeModel::after,.homeModel .card::after{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(135deg,var(--hm-gloss,rgba(255,255,255,.09)),transparent 42%);pointer-events:none;z-index:1}
.homeModel.homeModel>*,.homeModel .card>*{position:relative;z-index:3}

/* Top bar pill and floating controls in the same glass language */
.wrap:has(.homeModel)>.top :is(.hub-link,.hubLink,.hubLogo),.shell:has(.homeModel)>.top :is(.hub,nav .hub){background:color-mix(in srgb,currentColor 6%,transparent);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.readingToggle,.displayOptions>summary{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}

/* Buttons: soft lift */
.homeModel :is(.btn,button.primary,.heroButtons button){box-shadow:0 6px 16px -10px color-mix(in srgb,currentColor 55%,transparent);transition:transform .18s ease,box-shadow .18s ease,filter .18s ease}
.homeModel :is(.btn,button.primary,.heroButtons button):hover:not(:disabled){transform:translateY(-1px);box-shadow:0 10px 22px -10px color-mix(in srgb,currentColor 60%,transparent)}
.homeModel :is(.btn,button.primary,.heroButtons button):focus-visible,.wrap:has(.homeModel) a:focus-visible,.shell:has(.homeModel) a:focus-visible{outline:3px solid #8b5cf6;outline-offset:3px}

/* One font family, same weights as the Hub */
.wrap:has(.homeModel),.shell:has(.homeModel),.homeModel,.homeModel :is(h1,h2,p,button,a,summary,.eyebrow,.small),.readingToggle,.displayOptions{font-family:Arial,Helvetica,sans-serif}
.homeModel.hero::before{display:block}

@media (max-width:600px){
 .wrap:has(.homeModel),.shell:has(.homeModel){padding:18px 12px 70px}
 .homeModel{padding:23px 18px;border-radius:19px}
 .homeModel h1{font-size:38px!important;letter-spacing:-1.8px;gap:11px}
 .homeModel :is(.brandLogo,.logo,.heroLogo,h1 img,.heroArt){width:52px;height:52px}
 .homeModel .grid{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){.homeModel *{animation:none!important;transition:none!important}}