/* TURALON — 05 · the game host (games/host.js): three sub-sheet tabs on the frame's top edge, the posters (the no-JS
   still, the loading state and the fallback), the loading / failure note on the pencil side, the parked knob.
   The games bring their own stylesheets (games/<key>/game.css, every rule prefixed .tg-<key>), loaded on demand. */

/* ---------- tabs: index tabs on the top edge of the drawing, like the hero set's tabs on its start edge ---------- */
.gh-tabs { position: relative; z-index: 8; display: flex; align-items: flex-end; gap: 4px; margin: 0 0 -1.5px; padding-inline-start: 22px; }
.gh-tab { display: flex; flex-direction: column; justify-content: center; gap: 4px; min-width: 0; min-height: 54px; margin: 0; padding: 8px 16px 9px;
  border: 1px solid rgba(28,26,23,.3); border-bottom: 0; border-radius: 6px 6px 0 0; background: var(--paper-2); color: var(--ink-2);
  font: inherit; text-align: start; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background-color .25s, color .25s; }
.gh-tab:hover { background: var(--card); color: var(--ink); }
.gh-tab.is-on { background: var(--ink); border-color: var(--ink); color: var(--paper); cursor: default; }
.gh-tab:focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; }
.gh-tab__hd { display: flex; align-items: baseline; gap: .8em; font-size: 11px; line-height: 1.2; color: var(--ink-3); white-space: nowrap; }
.gh-tab__hd bdi { font-family: "JetBrains Mono", monospace; font-weight: 600; }
.gh-tab.is-on .gh-tab__hd { color: rgba(241,236,226,.66); }
.gh-tab.is-on .gh-tab__hd bdi { color: var(--signal-2); }
.gh-tab__nm { font: 500 15.5px/1.2 var(--f-body); letter-spacing: -.01em; }
:root[lang="ar"] .gh-tab__nm { letter-spacing: 0; line-height: 1.45; }
:root[lang="ar"] .gh-tab__hd { font-size: 12.5px; }
/* the bleeding frame (≥861px): the tabs stay inside the sheet's column */
@media (min-width: 861px) { .svc--bleed .gh-tabs { margin-inline-end: var(--bleed); } }
@media (max-width: 860px) { .gh-tabs { padding-inline-start: 18px; } }
/* phones: three equal tabs, number + name (the kind of game waits for wider screens) */
@media (max-width: 600px) {
  .gh-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; gap: 4px; padding-inline: 10px 0; }
  .gh-tab { justify-content: flex-start; min-height: 60px; padding: 8px 10px 9px; gap: 3px; }
  .gh-tab__ty { display: none; }
  .gh-tab__nm { font-size: 14px; line-height: 1.22; overflow-wrap: anywhere; }
  :root[lang="ar"] .gh-tab__nm { font-size: 14px; line-height: 1.4; }
}
html:not(.js) .gh-tab { cursor: default; }

/* ---------- the frame ---------- */
.gh .duo--stage:focus { outline: none; }
.gh .duo--stage:focus-visible { outline: 2px solid var(--signal); outline-offset: -3px; }
.gh-box, .gh-poster { position: absolute; inset: 0; }
/* the pencil side of a live game is grid paper only: never the #rough filter over a canvas */
.gh-sk, .gh-sk .gh-box { filter: none; }
.gh.is-live .gh-poster { display: none; }
/* loading / failure: a pencil note on the sketch side (the poster holds the product side) */
.gh-msg { position: absolute; z-index: 2; inset-inline-end: 1.4em; bottom: 1.2em; display: none; align-items: center; gap: .55em; max-width: min(19em, 40%); margin: 0;
  font-family: var(--f-hand); font-style: var(--hand-style); font-weight: var(--hand-w); font-size: 17px; line-height: 1.3; color: var(--pencil); }
:root[lang="ar"] .gh-msg { font-size: 20px; line-height: 1.5; }
.gh.is-wait .gh-msg, .gh.is-fail .gh-msg { display: flex; }
.gh.is-wait .gh-msg::before { content: ""; flex: none; width: 15px; height: 15px; border: 1.5px dashed currentColor; border-radius: 50%; animation: ghSpin 1.4s linear infinite; }
@keyframes ghSpin { to { transform: rotate(1turn); } }
@media (max-width: 600px) { .gh-msg { font-size: 15px; max-width: 46%; } }
/* while someone plays the seam is parked on the frame's edge as a plain line (host.js: .pl): no knob, no grab strip
   over the play area; after a finished session the knob stays out of sight until the next touch or key (.nk) */
.gh.pl .seam { pointer-events: none; }
.gh.pl .seam::before { pointer-events: none; }
.gh.pl .seam__knob, .gh.nk .seam__knob { opacity: 0; transform: scale(.4); pointer-events: none; transition: opacity .3s, transform .35s var(--ease); }

/* POSTERS (generated: three SVG stills, 1000 × 600, cropped to the frame) */
.gh-poster { background: #1C1A17 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 600' preserveAspectRatio='xMidYMid slice'%3E%3Cdefs%3E%3ClinearGradient id='s' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%231C1A17'/%3E%3Cstop offset='.6' stop-color='%232F3A52'/%3E%3Cstop offset='.73' stop-color='%234A4044'/%3E%3C/linearGradient%3E%3CradialGradient id='g'%3E%3Cstop offset='0' stop-color='%23FFC97E' stop-opacity='.5'/%3E%3Cstop offset='1' stop-color='%23FFC97E' stop-opacity='0'/%3E%3C/radialGradient%3E%3C/defs%3E%3Crect width='1000' height='600' fill='url(%23s)'/%3E%3Cg fill='%23F1ECE2'%3E%3Ccircle cx='170' cy='96' r='1.6'/%3E%3Ccircle cx='300' cy='60' r='1.2'/%3E%3Ccircle cx='420' cy='130' r='1.4'/%3E%3Ccircle cx='560' cy='70' r='1.1'/%3E%3Ccircle cx='880' cy='90' r='1.5'/%3E%3Ccircle cx='640' cy='150' r='1'/%3E%3Ccircle cx='230' cy='190' r='1'/%3E%3Ccircle cx='930' cy='200' r='1.2'/%3E%3Ccircle cx='700' cy='122' r='30' opacity='.92'/%3E%3C/g%3E%3Ccircle cx='714' cy='111' r='27' fill='%23211F1E'/%3E%3Cellipse cx='540' cy='440' rx='420' ry='120' fill='url(%23g)'/%3E%3Cpath fill='%2327304A' d='M100 440v-60h36v-40h30v52h44v-86h40v86h28v-44h52v56h40v-120h34v120h44v-72h50v72h30v-56h44v56h40v-96h40v96h60v72z'/%3E%3Cg fill='%2316140F'%3E%3Cpath d='M210 440v-58h48v-22h-6v-40h16v40h-6v22h40v58z'/%3E%3Cpath d='M330 440v-32l20-16 20 16v32zM380 440v-32l20-16 20 16v32zM430 440v-28l18-14 18 14v28z'/%3E%3Cpath d='M476 440v-66h86v66zM514 374v-22h4v8h12v-8'/%3E%3Cpath d='M600 440V272h60v168z'/%3E%3Cpath d='M690 440v-56l26-14v14l26-14v14l26-14v14l26-14v70z'/%3E%3Cpath d='M820 440v-80h64v80zM846 360v-14h12v14'/%3E%3C/g%3E%3Cg fill='%23FFC97E'%3E%3Crect x='228' y='400' width='7' height='9'/%3E%3Crect x='246' y='400' width='7' height='9'/%3E%3Crect x='228' y='418' width='7' height='9'/%3E%3Crect x='264' y='418' width='7' height='9'/%3E%3Crect x='345' y='412' width='8' height='8'/%3E%3Crect x='395' y='412' width='8' height='8'/%3E%3Crect x='445' y='416' width='8' height='8'/%3E%3Crect x='488' y='386' width='7' height='9'/%3E%3Crect x='506' y='386' width='7' height='9'/%3E%3Crect x='524' y='386' width='7' height='9'/%3E%3Crect x='542' y='386' width='7' height='9'/%3E%3Crect x='488' y='408' width='7' height='9'/%3E%3Crect x='524' y='408' width='7' height='9'/%3E%3Crect x='542' y='408' width='7' height='9'/%3E%3Crect x='612' y='286' width='8' height='10'/%3E%3Crect x='628' y='286' width='8' height='10'/%3E%3Crect x='628' y='306' width='8' height='10'/%3E%3Crect x='644' y='306' width='8' height='10'/%3E%3Crect x='612' y='326' width='8' height='10'/%3E%3Crect x='628' y='326' width='8' height='10'/%3E%3Crect x='644' y='326' width='8' height='10'/%3E%3Crect x='612' y='346' width='8' height='10'/%3E%3Crect x='628' y='346' width='8' height='10'/%3E%3Crect x='628' y='366' width='8' height='10'/%3E%3Crect x='644' y='366' width='8' height='10'/%3E%3Crect x='612' y='386' width='8' height='10'/%3E%3Crect x='628' y='386' width='8' height='10'/%3E%3Crect x='644' y='386' width='8' height='10'/%3E%3Crect x='612' y='406' width='8' height='10'/%3E%3Crect x='628' y='406' width='8' height='10'/%3E%3Crect x='700' y='402' width='10' height='7'/%3E%3Crect x='722' y='402' width='10' height='7'/%3E%3Crect x='744' y='402' width='10' height='7'/%3E%3Crect x='766' y='402' width='10' height='7'/%3E%3Crect x='788' y='402' width='10' height='7'/%3E%3Crect x='830' y='372' width='7' height='9'/%3E%3Crect x='848' y='372' width='7' height='9'/%3E%3Crect x='866' y='372' width='7' height='9'/%3E%3Crect x='830' y='392' width='7' height='9'/%3E%3Crect x='866' y='392' width='7' height='9'/%3E%3Crect x='848' y='412' width='7' height='9'/%3E%3C/g%3E%3Crect y='440' width='1000' height='160' fill='%23141A28'/%3E%3Crect y='440' width='1000' height='14' fill='%230F0E0C'/%3E%3Cpath d='M254 447H876' stroke='%23FFC97E' stroke-width='12' stroke-opacity='.2'/%3E%3Cpath d='M254 447H876M350 447v-7M400 447v-7M448 447v-7M519 447v-7M630 447v-7M755 447v-7M852 447v-7' fill='none' stroke='%23FFE2B0' stroke-width='2.4' stroke-linecap='round'/%3E%3Ccircle cx='254' cy='447' r='5' fill='%23E2582C'/%3E%3Cg stroke='%23FFC97E' stroke-opacity='.28' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M232 476h18M262 494h10M500 470h40M514 490h18M612 476h44M622 498h22M700 472h90M730 492h30M836 480h30'/%3E%3C/g%3E%3C/svg%3E") center / cover no-repeat; }
.gh[data-g="ciz"] .gh-poster { background: #F4F0E7 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 600' preserveAspectRatio='xMidYMid slice'%3E%3Cdefs%3E%3Cpattern id='p' width='20' height='20' patternUnits='userSpaceOnUse'%3E%3Cpath d='M20 0H0v20' fill='none' stroke='%233C64A8' stroke-opacity='.13'/%3E%3C/pattern%3E%3Cpattern id='h' width='9' height='9' patternUnits='userSpaceOnUse' patternTransform='rotate(45)'%3E%3Cpath d='M0 0v9' stroke='%231C1A17' stroke-opacity='.2' stroke-width='2'/%3E%3C/pattern%3E%3C/defs%3E%3Crect width='1000' height='600' fill='%23F4F0E7'/%3E%3Crect width='1000' height='600' fill='url(%23p)'/%3E%3Crect x='140' y='360' width='252' height='24' fill='%231C1A17'/%3E%3Crect x='140' y='384' width='252' height='96' fill='url(%23h)'/%3E%3Crect x='628' y='360' width='232' height='24' fill='%231C1A17'/%3E%3Crect x='628' y='384' width='232' height='96' fill='url(%23h)'/%3E%3Cpath d='M262 322C318 290 370 318 392 356M640 352C690 322 732 320 772 336' fill='none' stroke='%233C64A8' stroke-width='2.4' stroke-dasharray='7 8' stroke-linecap='round'/%3E%3Cpath d='M392 362Q451 396 510 396' fill='none' stroke='%231C1A17' stroke-width='7' stroke-linecap='round'/%3E%3Cpath d='M510 396Q569 396 628 362' fill='none' stroke='%233C64A8' stroke-width='4' stroke-linecap='round'/%3E%3Cpath d='M514 392q50 2 106-28' fill='none' stroke='%233C64A8' stroke-opacity='.45' stroke-width='1.6'/%3E%3Cpath d='M510 296v168' stroke='%23C8401A' stroke-width='2.4'/%3E%3Cpath d='M504 296h12M504 464h12' stroke='%23C8401A' stroke-width='2.4'/%3E%3Cpath d='M636 350l58-62 14 13-58 62-20 7z' fill='%23F4F0E7' stroke='%233C64A8' stroke-width='2.4' stroke-linejoin='round'/%3E%3Cpath d='M636 350l-6 19 20-7' fill='%233C64A8'/%3E%3Ccircle cx='236' cy='339' r='20' fill='%23C8401A'/%3E%3Ccircle cx='229' cy='332' r='6' fill='%23fff' fill-opacity='.45'/%3E%3Cpath d='M800 360V246' stroke='%231C1A17' stroke-width='4'/%3E%3Cpath d='M802 248l56 18-56 18z' fill='%23C8401A'/%3E%3Cpath d='M398 520H622M398 512v16M622 512v16' fill='none' stroke='%233C64A8' stroke-width='1.8'/%3E%3C/svg%3E") center / cover no-repeat; }
.gh[data-g="origami"] .gh-poster { background: #F0B48E url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 600' preserveAspectRatio='xMidYMid slice'%3E%3Cdefs%3E%3ClinearGradient id='k' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23F8E2C4'/%3E%3Cstop offset='.5' stop-color='%23F0B48E'/%3E%3Cstop offset='1' stop-color='%23A9809A'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='1000' height='600' fill='url(%23k)'/%3E%3Ccircle cx='700' cy='300' r='86' fill='%23FFF1D6' fill-opacity='.8'/%3E%3Cpath d='M0 384l150-52 150 40 170-62 170 50 180-62 180 52v250H0z' fill='%23D48E7C'/%3E%3Cpath d='M150 332l150 40 170-62 170 50 180-62' fill='none' stroke='%23FFF6EA' stroke-opacity='.3' stroke-width='1.5'/%3E%3Cpath d='M0 446l180-42 180 42 200-46 200 56 240-44v188H0z' fill='%23BC7F84'/%3E%3Cpath d='M0 514l220-42 210 46 220-36 210 42 140-26v102H0z' fill='%237E5E79'/%3E%3Cg fill='%235F4661'%3E%3Crect x='300' y='474' width='34' height='40'/%3E%3Crect x='342' y='462' width='28' height='52'/%3E%3Crect x='378' y='480' width='40' height='34'/%3E%3Cpath d='M296 474l21-16 21 16zM374 480l24-18 24 18z'/%3E%3C/g%3E%3Cg fill='%23FFD27A'%3E%3Crect x='310' y='486' width='6' height='8'/%3E%3Crect x='350' y='474' width='6' height='8'/%3E%3Crect x='392' y='492' width='6' height='8'/%3E%3Crect x='404' y='492' width='6' height='8'/%3E%3C/g%3E%3Cpath d='M150 338C230 300 300 300 382 252' fill='none' stroke='%23FFD27A' stroke-width='6' stroke-linecap='round'/%3E%3Cg fill='%23FFE7A8'%3E%3Ccircle cx='196' cy='322' r='3'/%3E%3Ccircle cx='252' cy='300' r='3.6'/%3E%3Ccircle cx='318' cy='288' r='2.6'/%3E%3C/g%3E%3Cg fill='%23E9A93A' stroke='%23B9741A' stroke-width='1.2'%3E%3Cpath transform='translate(560 200) scale(1)' d='M0-11C1-3 3-1 11 0 3 1 1 3 0 11-1 3-3 1-11 0-3-1-1-3 0-11Z'/%3E%3Cpath transform='translate(612 236) scale(0.85)' d='M0-11C1-3 3-1 11 0 3 1 1 3 0 11-1 3-3 1-11 0-3-1-1-3 0-11Z'/%3E%3Cpath transform='translate(664 196) scale(1.1)' d='M0-11C1-3 3-1 11 0 3 1 1 3 0 11-1 3-3 1-11 0-3-1-1-3 0-11Z'/%3E%3C/g%3E%3Cg stroke='%231C1A17' stroke-opacity='.45' stroke-width='1.4' stroke-linejoin='round'%3E%3Cpath d='M372 256l116-28-58 40z' fill='%23FFFCF6'/%3E%3Cpath d='M404 250l50-74 12 62z' fill='%23EDE6D8'/%3E%3Cpath d='M424 252l92-50-44 42z' fill='%23FFFCF6'/%3E%3Cpath d='M372 256l-34-14 46 10z' fill='%23D8CFC0'/%3E%3C/g%3E%3Cpath d='M842 132l26 34-26 34-26-34z' fill='%23C8401A'/%3E%3Cpath d='M842 200c-24 90 34 160 6 250' fill='none' stroke='%234B463E' stroke-width='1.4'/%3E%3C/svg%3E") center / cover no-repeat; }
/* /POSTERS */

/* while someone plays the seam is inert: the 'drag' hint under the frame would be a false promise */
.gh.pl .stage__meta > span:first-child { visibility: hidden; }