/* XTART Game Glass — English Hub finish for EVERY screen of QuizLoop, QuizBoard, SketchQuiz, Imposter and Auction.
   Shared look: one font (Arial), gradient hairline rings, soft depth, glass top bar, consistent buttons and fields.
   Colours, backgrounds and logos stay each app's own. Canonical doc: XTART-English-Hub/docs/HOME_MODEL.md.
   Keep the five copies identical. Loaded after the app's own styles. */

/* One font family */
html,body,button,input,select,textarea,summary{font-family:Arial,Helvetica,sans-serif}

/* Top bar on every screen: same glass pill for the English Hub link */
.wrap>.top :is(.hub-link,.hubLink,.hubLogo),.shell>.top :is(.hub,nav .hub){box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 14px;border:1px solid color-mix(in srgb,currentColor 24%,transparent);border-radius:12px;background:color-mix(in srgb,currentColor 6%,transparent);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);font-family:inherit;font-size:12px;font-weight:700;line-height:1.2;text-decoration:none;white-space:nowrap}

/* Panels and cards: gradient hairline ring + soft depth (static containers only) */
:where(.panel,.card,.winner,.teacherDrawer,.teamCard,.sentenceCard,.activityPanel){position:relative}
:is(.panel,.card,.winner,.teacherDrawer,.teamCard,.sentenceCard,.activityPanel)::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;background:linear-gradient(125deg,#35d8c28c,#8b5cf6a0 50%,#d05adf8c);-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}
:is(.panel,.card,.winner,.teacherDrawer,.teamCard,.sentenceCard,.activityPanel){border-color:transparent}
.panel{box-shadow:0 18px 50px -20px rgba(0,0,0,.28),0 1px 0 rgba(255,255,255,.07) inset}

/* Auction secondary pages (team devices, projector): give bare cards a base shape, avoid a box inside a box */
.shell .card{padding:20px;border-radius:15px;background:#ffffff08}
.shell .panel>.hero{border:0;background:transparent;box-shadow:none;padding:8px 0 20px}
.shell .panel>.hero::before{display:none}

/* Dialogs / shop windows: glass edge without touching their positioning or scrolling */
:is(.modal,.powerShopBox,dialog){border:1px solid #8b5cf666;box-shadow:0 30px 80px -20px rgba(0,0,0,.5),0 1px 0 rgba(255,255,255,.08) inset;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}

/* Buttons: same shape language everywhere */
:is(.btn,button.primary,.heroButtons button){border-radius:10px;font-weight:800;letter-spacing:.3px;box-shadow:0 6px 16px -10px color-mix(in srgb,currentColor 55%,transparent);transition:transform .18s ease,box-shadow .18s ease,filter .18s ease}
: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)}

/* Fields */
input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]),select,textarea{border-radius:10px}
:is(a,button,input,select,textarea,summary,[tabindex]):focus-visible{outline:3px solid #8b5cf6;outline-offset:2px}

/* Floating Help & display / Projector view */
.readingToggle,.displayOptions>summary{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}

/* Projector view and reduced motion keep it plain */
@media (prefers-reduced-motion:reduce){.btn,button{transition:none!important}}
@media (forced-colors:active){:is(.panel,.card)::before{display:none}}