/* Centro de Juegos — styles copied from PathLight (css/styles.css, .gm-/.wg-/.lv- rules), Oct 30, 2026.
   PathLight's design variables are mapped to the IEC site's tokens here. */
.juegos-app{--color-primary:var(--navy);--color-primary-rgb:12,74,90;--color-foreground:var(--ink);--color-ink-rgb:19,38,43;--color-muted-foreground:var(--muted);
--color-border:var(--line);--color-card:#fff;--color-surface:var(--paper);--color-input:var(--line);--font-sans:var(--body);--font-serif:var(--display);
--radius-md:12px;--radius-lg:16px;--radius-xl:24px;--iec-gold-deep:var(--gold-dark);
--shadow-border:0 0 0 1px rgba(19,38,43,.07),0 1px 2px -1px rgba(19,38,43,.07),0 2px 4px rgba(19,38,43,.04);
--shadow-border-hover:0 0 0 1px rgba(19,38,43,.1),0 1px 2px -1px rgba(19,38,43,.09),0 2px 4px rgba(19,38,43,.06);
font-family:var(--body);color:var(--ink)}
.juegos-app .stack{display:flex;flex-direction:column;gap:2rem}
.juegos-app .stack-sm{display:flex;flex-direction:column;gap:.75rem}
/* No game server on this site yet: hide Trivia, the live classroom game and word games with friends */
.juegos-sin-servidor a.gm-sq[href$="/trivia"],.juegos-sin-servidor a.gm-sq[href$="/vivo"],.juegos-sin-servidor .wg-lobby-fr{display:none}
@keyframes gm-shake{ 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
@keyframes gm-flick{ from { transform: scaleY(1) skewX(0); } to { transform: scaleY(1.06) skewX(2deg); } }
@keyframes gm-smoke{ from { opacity: .9; } to { opacity: 0; transform: translateY(-10px); } }
@keyframes lv-pulse{ 50% { transform: scale(1.25); opacity: .6; } }
@keyframes lv-in{ from { transform: scale(.6); opacity: 0; } }
.stack{ display: flex; flex-direction: column; gap: 2rem; }
.stack-sm{ display: flex; flex-direction: column; gap: 0.75rem; }
.back-link{
  display: inline-flex; align-items: center; gap: 0.35rem;
  font-size: 0.875rem; font-weight: 600; color: var(--color-muted-foreground);
  margin-bottom: 0.5rem;
}
.gm-page{ --gm-gold: #c98e12; --gm-gold-soft: rgba(214,158,27,0.14); --gm-ok: #2f7d4f; --gm-bad: #b3412f; gap: 1rem; }
.gm-head h1{ font-family: var(--font-serif); font-size: 1.6rem; margin: 0; color: var(--color-primary); }
.gm-head p{ margin: .25rem 0 0; color: var(--color-muted-foreground); font-size: .92rem; }
.gm-hero{ text-align: center; padding: 1.4rem 1rem 1.2rem; border-radius: var(--radius-xl); color: #fdf8ec;
  background: radial-gradient(circle at 50% 0%, rgba(255,214,102,0.28), transparent 60%), linear-gradient(160deg, #26397a 0%, #141f45 100%); }
.gm-hero-ic{ display: block; color: #f0c65a; font-size: 1.6rem; line-height: 1; }
.gm-hero h1{ font-family: var(--font-serif); margin: .35rem 0 .2rem; font-size: 1.75rem; color: #fff; }
.gm-hero p{ margin: 0; color: #e4dcc6; }
.gm-hero .gm-hero-v{ margin-top: .7rem; font-family: var(--font-serif); font-style: italic; font-size: .95rem; color: #f5e7bd; }
.gm-hero-v span{ display: block; font-style: normal; font-family: var(--font-sans); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: #d9b75c; margin-top: .2rem; }
.gm-feature{ display: flex; align-items: center; gap: .85rem; padding: 1rem; border-radius: var(--radius-lg); text-decoration: none; color: inherit;
  background: linear-gradient(150deg, #fff7df 0%, #f6e3ad 100%); border: 1px solid #e2c070; box-shadow: var(--shadow-border); }
.gm-feature-ic{ font-size: 2.2rem; line-height: 1; flex: none; }
.gm-feature-txt{ display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.gm-feature-txt strong{ font-family: var(--font-serif); font-size: 1.2rem; color: #0c4a5a; }
.gm-feature-txt span{ font-size: .85rem; color: #5b4a22; }
.gm-go{ margin-left: auto; font-size: 1.8rem; color: var(--gm-gold); }
.gm-grid{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem; }
@media (min-width: 720px){.gm-grid{ grid-template-columns: repeat(3, minmax(0, 1fr)); }}
.gm-card{ display: flex; flex-direction: column; gap: .25rem; padding: .9rem .8rem; border-radius: var(--radius-lg); text-decoration: none; color: inherit;
  background: var(--color-card); box-shadow: var(--shadow-border); border-top: 3px solid var(--gm-gold); }
.gm-card:hover{ box-shadow: var(--shadow-border-hover); }
.gm-card-ic{ font-size: 1.7rem; line-height: 1.1; }
.gm-card-t{ font-weight: 700; color: var(--color-primary); font-size: .98rem; line-height: 1.2; }
.gm-card-d{ font-size: .78rem; color: var(--color-muted-foreground); line-height: 1.3; flex: 1; }
.gm-stars{ color: rgba(var(--color-ink-rgb),0.18); letter-spacing: .05em; font-size: .95rem; }
.gm-stars .on{ color: #e2a915; }
.gm-stars.big{ font-size: 2.2rem; }
.gm-foot{ font-size: .78rem; color: var(--color-muted-foreground); text-align: center; margin: 0; }
.gm-note{ padding: .8rem 1rem; border-radius: var(--radius-md); background: var(--gm-gold-soft); color: var(--color-foreground); }
.gm-loading{ color: var(--color-muted-foreground); text-align: center; }
.gm-body{ display: flex; flex-direction: column; gap: .9rem; }
.gm-bar{ display: flex; justify-content: space-between; align-items: center; gap: .6rem; flex-wrap: wrap; font-size: .85rem; color: var(--color-muted-foreground); }
.gm-ref{ font-weight: 700; color: var(--gm-gold); }
.gm-btn{ display: inline-flex; align-items: center; justify-content: center; gap: .4rem; min-height: 46px; padding: .6rem 1.1rem; border-radius: 999px;
  font: inherit; font-weight: 700; font-size: .95rem; cursor: pointer; text-decoration: none; border: 2px solid transparent; }
.gm-btn.primary{ background: linear-gradient(155deg, #11596b 0%, #08313c 100%); color: #fdf8ec; }
.gm-btn.ghost{ background: transparent; color: var(--color-primary); border-color: rgba(var(--color-primary-rgb),0.35); }
.gm-link{ background: none; border: 0; color: var(--color-primary); text-decoration: underline; font: inherit; font-size: .85rem; cursor: pointer; padding: .3rem; }
.gm-actions{ display: flex; flex-wrap: wrap; gap: .6rem; justify-content: center; }
.gm-levels{ display: grid; gap: .7rem; }
.gm-done, .gm-reveal{ text-align: center; display: flex; flex-direction: column; gap: .6rem; align-items: center; padding: 1rem; border-radius: var(--radius-lg); background: var(--color-card); box-shadow: var(--shadow-border); }
.gm-done h2, .gm-reveal h2{ margin: 0; font-family: var(--font-serif); color: var(--color-primary); font-size: 1.3rem; }
.gm-done p, .gm-reveal p{ margin: 0; }
.gm-verse{ font-family: var(--font-serif); font-size: 1.12rem; line-height: 1.5; }
.gm-slots{ min-height: 64px; padding: .6rem; border-radius: var(--radius-md); border: 2px dashed rgba(var(--color-primary-rgb),0.3); display: flex; flex-wrap: wrap; gap: .4rem; align-content: flex-start; background: var(--color-card); }
.gm-slots-hint{ color: var(--color-muted-foreground); font-size: .88rem; align-self: center; }
.gm-pool{ display: flex; flex-wrap: wrap; gap: .45rem; justify-content: center; }
.gm-slots.rows, .gm-pool.rows{ flex-direction: column; flex-wrap: nowrap; align-items: stretch; }
.gm-chip{ font: inherit; font-size: 1rem; padding: .55rem .8rem; border-radius: 10px; border: 1px solid #e2c070; background: #fff8e4; color: #2a2412; cursor: pointer; min-height: 44px; text-align: left; line-height: 1.3; }
.gm-chip-n{ display: inline-flex; width: 1.5rem; height: 1.5rem; border-radius: 50%; background: #0c4a5a; color: #fff; font-size: .78rem; align-items: center; justify-content: center; margin-right: .5rem; }
.gm-pool .gm-chip-n{ display: none; }
.gm-chip.ok{ background: #e3f3e8; border-color: var(--gm-ok); }
.gm-chip.bad{ background: #fbe4df; border-color: var(--gm-bad); animation: gm-shake .4s; }
.gm-memo{ display: grid; gap: .5rem; }
.gm-memo.cols3{ grid-template-columns: repeat(3, 1fr); max-width: 360px; margin: 0 auto; width: 100%; }
.gm-memo.cols4{ grid-template-columns: repeat(4, 1fr); max-width: 460px; margin: 0 auto; width: 100%; }
.gm-mc{ position: relative; aspect-ratio: 3 / 4; border-radius: 12px; border: 0; padding: .2rem; cursor: pointer; font: inherit;
  background: linear-gradient(155deg, #11596b 0%, #08313c 100%); color: #f0c65a; box-shadow: var(--shadow-border); transition: transform .25s; }
.gm-mc-back{ font-size: 1.6rem; }
.gm-mc-face{ display: none; font-weight: 700; font-size: .82rem; line-height: 1.15; color: #0c4a5a; word-break: break-word; }
.gm-mc-face.pic{ font-size: 2rem; }
.gm-mc.up{ background: #fff8e4; transform: rotateY(0deg) scale(1.02); box-shadow: 0 0 0 2px #e2c070; }
.gm-mc.up .gm-mc-back{ display: none; }
.gm-mc.up .gm-mc-face{ display: block; }
.gm-mc.done{ background: #e3f3e8; box-shadow: 0 0 0 2px var(--gm-ok); }
.gm-sopa{ display: grid; grid-template-columns: repeat(10, 1fr); gap: 2px; width: 100%; max-width: 440px; margin: 0 auto; touch-action: none; user-select: none; -webkit-user-select: none;
  background: #e2c070; padding: 2px; border-radius: 10px; }
.gm-sc{ aspect-ratio: 1; display: flex; align-items: center; justify-content: center; background: #fffaf0; color: #0c4a5a; font-weight: 700; font-size: clamp(.85rem, 4.2vw, 1.15rem); cursor: pointer; }
.gm-sc:first-child{ border-top-left-radius: 8px; }
.gm-sc.sel{ background: #f6d77a; }
.gm-sc.found{ color: #fff; }
.gm-sc.f1{ background: #3d7fc4; }
.gm-sc.f2{ background: #3f9a55; }
.gm-sc.f3{ background: #b8773f; }
.gm-sc.f4{ background: #7a5bb8; }
.gm-sc.f5{ background: #c6423a; }
.gm-sc.f6{ background: #2a8a7f; }
.gm-sc.found.sel{ background: #f6d77a; color: #0c4a5a; }
.gm-words{ list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .4rem .8rem; justify-content: center; font-weight: 700; font-size: .9rem; color: var(--color-primary); }
.gm-words li.got{ text-decoration: line-through; opacity: .45; }
.gm-vela{ display: flex; gap: 1rem; align-items: center; }
.gm-vela{ gap: .6rem; }
.gm-vela-art{ flex: none; width: 66px; }
.gm-candle{ width: 66px; height: auto; display: block; }
.gm-flame{ transform-origin: 40px 60%; animation: gm-flick 1.6s ease-in-out infinite alternate; }
.gm-smoke{ animation: gm-smoke 2s ease-out forwards; }
.gm-vela-main{ flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .5rem; }
.gm-hint{ margin: 0; font-size: .95rem; }
.gm-word{ display: flex; flex-wrap: nowrap; gap: .2rem; }
.gm-word span{ flex: 1 1 0; min-width: 0; max-width: 1.9rem; height: 2.2rem; border-bottom: 3px solid #0c4a5a; display: flex; align-items: flex-end; justify-content: center; font-weight: 800; font-size: clamp(.9rem, 4.6vw, 1.3rem); color: var(--color-primary); }
.gm-word span.miss{ color: var(--gm-bad); }
.gm-left{ margin: 0; font-size: .82rem; color: var(--color-muted-foreground); }
.gm-kb{ display: grid; grid-template-columns: repeat(9, 1fr); gap: .3rem; max-width: 460px; margin: 0 auto; width: 100%; }
.gm-kb button{ min-height: 42px; border-radius: 8px; border: 1px solid rgba(var(--color-primary-rgb),0.25); background: var(--color-card); color: var(--color-primary); font: inherit; font-weight: 700; cursor: pointer; padding: 0; }
.gm-kb button.ok{ background: #e3f3e8; border-color: var(--gm-ok); color: var(--gm-ok); }
.gm-kb button.bad{ background: #fbe4df; border-color: var(--gm-bad); color: var(--gm-bad); opacity: .7; }
.gm-clues{ margin: 0; padding: .8rem 1rem .8rem 2.2rem; background: #fff8e4; border-left: 4px solid #d69e1b; border-radius: 10px; color: #2a2412; display: flex; flex-direction: column; gap: .35rem; font-size: 1rem; }
.gm-opts{ display: grid; grid-template-columns: 1fr 1fr; gap: .55rem; }
.gm-opt{ min-height: 54px; padding: .55rem .7rem; border-radius: 12px; border: 2px solid rgba(var(--color-primary-rgb),0.22); background: var(--color-card); color: var(--color-foreground);
  font: inherit; font-weight: 600; font-size: .95rem; cursor: pointer; line-height: 1.25; }
.gm-opt:not(:disabled):hover{ border-color: #d69e1b; }
.gm-opt.picked{ border-color: #d69e1b; }
.gm-opt.ok{ background: #e3f3e8; border-color: var(--gm-ok); color: #174a2c; }
.gm-opt.bad{ background: #fbe4df; border-color: var(--gm-bad); color: #7a2618; }
.gm-opt:disabled{ cursor: default; }
@media (max-width: 380px){.gm-opts{ grid-template-columns: 1fr; }}
.gm-book{ text-align: center; padding: 1.6rem 1rem; border-radius: var(--radius-lg); background: #fff8e4; border: 2px solid #e2c070; display: flex; flex-direction: column; gap: .4rem; }
.gm-book-n{ font-family: var(--font-serif); font-size: 2rem; font-weight: 700; color: #0c4a5a; }
.gm-book-fb{ min-height: 1.3em; font-weight: 700; color: #5b4a22; }
.gm-book.ok{ background: #e3f3e8; border-color: var(--gm-ok); }
.gm-book.bad{ background: #fbe4df; border-color: var(--gm-bad); }
.gm-tt{ display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.gm-tt .gm-btn{ border-radius: 14px; min-height: 64px; color: #fff; }
.gm-tt .at{ background: linear-gradient(155deg, #b8773f 0%, #74411a 100%); }
.gm-tt .nt{ background: linear-gradient(155deg, #11596b 0%, #08313c 100%); }
.gm-tlevels{ display: grid; gap: .6rem; }
.gm-tl{ display: flex; flex-direction: column; align-items: flex-start; gap: .15rem; padding: .85rem 1rem; border-radius: var(--radius-lg); border: 0; cursor: pointer; font: inherit; text-align: left; color: #fff; }
.gm-tl strong{ font-size: 1.15rem; }
.gm-tl span{ font-size: .85rem; opacity: .9; }
.gm-tl em{ font-style: normal; font-size: .78rem; background: rgba(255,255,255,0.18); padding: .1rem .5rem; border-radius: 999px; margin-top: .2rem; }
.gm-tl.l1{ background: linear-gradient(155deg, #3f9a55 0%, #1e5e30 100%); }
.gm-tl.l2{ background: linear-gradient(155deg, #11596b 0%, #08313c 100%); }
.gm-tl.l3{ background: linear-gradient(155deg, #a83a32 0%, #6b1a16 100%); }
.gm-board{ padding: 1rem; border-radius: var(--radius-lg); background: var(--color-card); box-shadow: var(--shadow-border); border-top: 3px solid #d69e1b; display: flex; flex-direction: column; gap: .6rem; }
.gm-board h2{ margin: 0; font-family: var(--font-serif); font-size: 1.25rem; color: var(--color-primary); }
.gm-tabs{ display: flex; gap: .3rem; flex-wrap: wrap; }
.gm-tabs button{ flex: 1; min-height: 38px; border-radius: 999px; border: 1px solid rgba(var(--color-primary-rgb),0.25); background: transparent; color: var(--color-primary); font: inherit; font-size: .85rem; font-weight: 600; cursor: pointer; }
.gm-tabs button.on{ background: #0c4a5a; border-color: #0c4a5a; color: #fff; }
.gm-tabs.pd button.on{ background: #d69e1b; border-color: #d69e1b; color: #1a1300; }
.gm-rank{ list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.gm-rank li{ display: flex; align-items: center; gap: .6rem; padding: .5rem .2rem; border-bottom: 1px solid var(--color-border); }
.gm-rank li:last-child{ border-bottom: 0; }
.gm-rk{ width: 1.8rem; text-align: center; font-weight: 700; color: var(--color-muted-foreground); flex: none; }
.gm-nm{ flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.gm-sc2{ font-weight: 800; color: var(--gm-gold); }
.gm-del{ border: 0; background: none; color: var(--gm-bad); cursor: pointer; font-size: 1rem; padding: .2rem .4rem; }
.gm-rank .gm-empty, .gm-rank .gm-loading{ justify-content: center; color: var(--color-muted-foreground); font-size: .88rem; text-align: center; }
.gm-timer{ height: 6px; border-radius: 99px; background: rgba(var(--color-primary-rgb),0.12); overflow: hidden; }
.gm-timer span{ display: block; height: 100%; width: 100%; background: linear-gradient(90deg, #d69e1b, #f0c65a); }
.gm-question{ font-family: var(--font-serif); font-size: 1.25rem; line-height: 1.35; margin: 0; color: var(--color-foreground); }
.gm-fb{ display: flex; flex-wrap: wrap; gap: .5rem .8rem; align-items: center; justify-content: center; text-align: center; min-height: 1.5em; }
.gm-fb p{ margin: 0; width: 100%; }
.gm-good{ color: var(--gm-ok); }
.gm-big{ font-size: 3rem; font-weight: 800; color: var(--gm-gold); line-height: 1; }
.gm-sub{ color: var(--color-muted-foreground); font-size: .9rem; }
.gm-save{ display: flex; flex-direction: column; gap: .4rem; width: 100%; max-width: 340px; text-align: left; }
.gm-save label{ font-weight: 700; font-size: .9rem; }
.gm-save input{ min-height: 46px; border-radius: 10px; border: 1px solid var(--color-input); padding: 0 .8rem; font: inherit; font-size: 1rem; }
.gm-save .gm-foot{ text-align: left; }
.gm-err{ color: var(--gm-bad); font-size: .85rem; min-height: 0; margin: 0; }
.gm-saved{ padding: .7rem 1rem; border-radius: var(--radius-md); background: #e3f3e8; color: #174a2c; font-weight: 600; margin: 0; }
.gm-head.has-art{ display: flex; align-items: center; gap: .8rem; }
.gm-head-art{ width: 96px; height: 72px; object-fit: cover; border-radius: 12px; flex: none; box-shadow: var(--shadow-border); border: 2px solid #e2c070; }
.gm-card.has-art{ padding: 0 0 .8rem; overflow: hidden; }
.gm-card.has-art > :not(.gm-card-art){ padding: 0 .8rem; }
.gm-card-art{ display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-bottom: 2px solid #e2c070; margin-bottom: .35rem; background: #cdeefb; }
.gm-feature-art{ width: 96px; height: 72px; object-fit: cover; border-radius: 12px; flex: none; border: 2px solid #e2c070; }
.gm-feature.live{ background: linear-gradient(150deg, #e7f0ff 0%, #c9dbf7 100%); border-color: #8fb0e3; }
.lv-box{ padding: 1rem; border-radius: var(--radius-lg); background: var(--color-card); box-shadow: var(--shadow-border); display: flex; flex-direction: column; gap: .6rem; }
.lv-box h2{ margin: 0; font-family: var(--font-serif); font-size: 1.25rem; color: var(--color-primary); }
.lv-box h3{ margin: .4rem 0 .1rem; font-size: 1rem; color: var(--color-primary); }
.lv-box h3 small{ font-weight: 400; font-size: .75rem; color: var(--color-muted-foreground); }
.lv-join{ border-top: 3px solid #3f9a55; }
.lv-host{ border-top: 3px solid #d69e1b; }
.lv-row{ display: flex; gap: .5rem; }
.lv-code{ flex: 1; min-width: 0; min-height: 52px; font: inherit; font-size: 1.6rem; font-weight: 800; letter-spacing: .25em; text-align: center; border-radius: 12px; border: 2px solid var(--color-input); }
.lv-note{ margin: 0; font-size: .88rem; color: var(--color-muted-foreground); }
.lv-opts{ display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.lv-opts .gm-tabs{ flex: 1 1 220px; }
.lv-n{ display: flex; align-items: center; gap: .35rem; font-size: .88rem; font-weight: 600; }
.lv-n select, .lv-edmeta select{ font: inherit; min-height: 38px; border-radius: 8px; border: 1px solid var(--color-input); padding: 0 .4rem; background: var(--color-surface); color: var(--color-foreground); }
.lv-list{ list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .4rem; }
.lv-list li{ display: flex; align-items: center; gap: .5rem; padding: .5rem .6rem; border-radius: 12px; border: 1px solid var(--color-border); }
.lv-list .gm-btn{ min-height: 38px; padding: .3rem .8rem; font-size: .85rem; }
.lv-qt{ flex: 1; min-width: 0; display: flex; flex-direction: column; }
.lv-qt b{ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lv-qt small{ color: var(--color-muted-foreground); font-size: .75rem; }
.lv-new{ align-self: flex-start; }
.lv-msg{ text-align: center; align-items: center; padding: 2rem 1rem; }
.lv-msg p{ margin: 0; }
.lv-pulse{ font-size: 2rem; color: #d69e1b; animation: lv-pulse 1.6s ease-in-out infinite; }
.lv-tt{ font-size: .85rem; color: var(--color-muted-foreground); }
.lv-joinform input{ min-height: 48px; border-radius: 10px; border: 1px solid var(--color-input); padding: 0 .8rem; font: inherit; font-size: 1.05rem; }
.lv-joinform label{ font-weight: 700; }
.lv-qhead{ display: flex; justify-content: space-between; align-items: center; font-size: .9rem; color: var(--color-muted-foreground); }
.lv-cd{ min-width: 2.4rem; height: 2.4rem; border-radius: 50%; background: #0c4a5a; color: #fff; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; font-size: 1.1rem; }
.lv-qtext{ font-family: var(--font-serif); font-size: 1.2rem; margin: .2rem 0 .4rem; color: var(--color-foreground); }
.lv-btns{ display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.lv-btns button{ min-height: 120px; border: 0; border-radius: 16px; color: #fff; font: inherit; font-weight: 700; font-size: 1rem; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .3rem; padding: .6rem; cursor: pointer; box-shadow: inset 0 -5px 0 rgba(0,0,0,0.22); line-height: 1.2; }
.lv-btns button:disabled{ opacity: .35; }
.lv-btns button.picked{ opacity: 1; outline: 4px solid #0c4a5a; outline-offset: 2px; }
.lv-btns .lv-sh{ font-size: 1.8rem; line-height: 1; }
.lv-res{ text-align: center; align-items: center; padding: 1.6rem 1rem; }
.lv-res.ok{ background: #e3f3e8; }
.lv-res.bad{ background: #fbe4df; }
.lv-res h2{ font-size: 1.7rem; }
.lv-res.ok h2{ color: #1e6b3c; }
.lv-res.bad h2{ color: #9a2f22; }
.lv-res p{ margin: 0; }
.lv-pts{ font-size: 2.2rem; font-weight: 800; color: #1e6b3c; }
.lv-rank{ font-size: .95rem; }
.lv-big{ font-size: 1.6rem; font-weight: 800; color: var(--color-primary); }
.lv-top{ list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .3rem; width: 100%; max-width: 420px; }
.lv-top li{ display: flex; align-items: center; gap: .6rem; padding: .4rem .6rem; border-radius: 10px; background: rgba(var(--color-primary-rgb),0.06); }
.lv-top li span{ width: 1.8rem; text-align: center; font-weight: 800; }
.lv-top li b{ flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lv-top li em{ font-style: normal; font-weight: 800; color: #c98e12; }
.lv-hostpage{ background: #101a3a; color: #fff; border-radius: 18px; overflow: hidden; min-height: 78vh; display: flex; flex-direction: column; }
.lv-hostpage:fullscreen{ border-radius: 0; min-height: 100vh; }
.lv-hbar{ display: flex; align-items: center; gap: .8rem; padding: .5rem .9rem; background: rgba(255,255,255,0.06); font-size: .9rem; }
.lv-hback{ color: #f0c65a; text-decoration: none; font-weight: 700; }
.lv-htitle{ flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #d8def0; }
.lv-fs{ background: none; border: 1px solid rgba(255,255,255,0.35); color: #fff; border-radius: 8px; padding: .25rem .6rem; font: inherit; font-size: .8rem; cursor: pointer; }
.lv-stage{ flex: 1; display: flex; flex-direction: column; padding: clamp(.8rem, 2.5vw, 2rem); }
.lv-stage .gm-foot{ color: #aeb7d3; }
.lv-hmsg{ margin: auto; text-align: center; }
.lv-lobby{ display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 1.5rem; align-items: start; }
@media (max-width: 760px){.lv-lobby{ grid-template-columns: 1fr; }}
.lv-joininfo{ text-align: center; background: #fff; color: #0c4a5a; border-radius: 16px; padding: 1rem; }
.lv-joininfo p{ margin: .2rem 0; }
.lv-qr{ width: min(240px, 60vw); image-rendering: pixelated; }
.lv-url{ font-size: .85rem; color: #4a5575; }
.lv-codelbl{ font-weight: 700; text-transform: uppercase; letter-spacing: .12em; font-size: .8rem; color: #8a6a14; }
.lv-bigcode{ font-size: clamp(3rem, 9vw, 5.5rem); font-weight: 900; letter-spacing: .12em; line-height: 1; color: #0c4a5a; }
.lv-players h2{ margin: 0 0 .6rem; font-family: var(--font-serif); color: #fff; }
.lv-chips{ display: flex; flex-wrap: wrap; gap: .45rem; min-height: 60px; margin-bottom: 1rem; }
.lv-chip{ background: rgba(255,255,255,0.12); color: #fff; border: 1px solid rgba(255,255,255,0.25); border-radius: 999px; padding: .4rem .9rem; font: inherit; font-weight: 700; font-size: clamp(.9rem, 1.6vw, 1.15rem); cursor: pointer; animation: lv-in .35s ease-out; }
.lv-wait{ color: #aeb7d3; }
.lv-start{ font-size: 1.15rem; min-height: 56px; padding: .6rem 1.6rem; background: linear-gradient(155deg, #3f9a55 0%, #1e5e30 100%) !important; }
.lv-hq{ display: flex; flex-direction: column; gap: 1rem; flex: 1; }
.lv-hqtop{ display: flex; justify-content: space-between; gap: 1rem; color: #cfd6ec; font-size: clamp(.9rem, 1.5vw, 1.15rem); }
.lv-ref{ color: #f0c65a; font-weight: 700; }
.lv-hqtext{ margin: 0; text-align: center; font-family: var(--font-serif); font-size: clamp(1.4rem, 3.4vw, 2.6rem); line-height: 1.2; background: #fff; color: #0c4a5a; border-radius: 14px; padding: .8rem 1rem; }
.lv-hmid{ display: flex; justify-content: center; }
.lv-ring{ width: clamp(70px, 9vw, 110px); height: clamp(70px, 9vw, 110px); border-radius: 50%; background: #d69e1b; display: flex; align-items: center; justify-content: center; }
.lv-ring .lv-cd{ background: none; font-size: clamp(1.8rem, 4vw, 3rem); width: auto; height: auto; }
.lv-hans{ display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
.lv-ha{ position: relative; border-radius: 14px; padding: clamp(.7rem, 1.6vw, 1.2rem) 1rem; display: flex; align-items: center; gap: .8rem; font-weight: 700; font-size: clamp(1rem, 2.2vw, 1.7rem); min-height: clamp(64px, 10vh, 110px); box-shadow: inset 0 -6px 0 rgba(0,0,0,0.2); transition: opacity .3s; }
.lv-ha .lv-sh{ font-size: 1.4em; }
.lv-ha .lv-ht{ flex: 1; min-width: 0; }
.lv-ha.dim{ opacity: .35; }
.lv-ha.right{ outline: 5px solid #fff; }
.lv-check{ font-size: 1.6em; }
.lv-cnt{ display: flex; align-items: center; gap: .4rem; width: 28%; min-width: 70px; }
.lv-cnt i{ display: block; height: 12px; border-radius: 6px; background: rgba(255,255,255,0.85); min-width: 4px; }
.lv-hact{ display: flex; justify-content: center; }
.lv-hact .gm-btn.ghost, .lv-hend .gm-btn.ghost{ color: #fff; border-color: rgba(255,255,255,0.4); }
.lv-hbottom{ display: flex; gap: 1rem; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; }
.lv-htop{ flex: 1; min-width: 240px; }
.lv-htop h3{ margin: 0 0 .4rem; color: #f0c65a; }
.lv-htop .lv-top li{ background: rgba(255,255,255,0.1); font-size: clamp(.95rem, 1.6vw, 1.2rem); }
.lv-next{ font-size: 1.1rem; min-height: 56px; }
.lv-hend{ text-align: center; display: flex; flex-direction: column; align-items: center; gap: 1rem; }
.lv-hend h2{ margin: 0; font-family: var(--font-serif); font-size: clamp(1.8rem, 4vw, 3rem); color: #f0c65a; }
.lv-podium{ display: flex; align-items: flex-end; gap: .8rem; }
.lv-pod{ width: clamp(90px, 16vw, 180px); display: flex; flex-direction: column; align-items: center; gap: .2rem; }
.lv-pod b{ font-size: clamp(1rem, 2vw, 1.5rem); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lv-pod em{ font-style: normal; color: #f0c65a; font-weight: 800; }
.lv-block{ width: 100%; border-radius: 10px 10px 0 0; display: flex; align-items: flex-start; justify-content: center; padding-top: .4rem; font-size: 2rem; font-weight: 900; color: #fff; }
.lv-pod.p1 .lv-block{ height: 150px; background: #d69e1b; }
.lv-pod.p2 .lv-block{ height: 105px; background: #9fb3c8; }
.lv-pod.p3 .lv-block{ height: 75px; background: #c47a3f; }
.lv-rest{ max-width: 420px; }
.lv-rest li{ background: rgba(255,255,255,0.1); }
.lv-ed{ display: flex; flex-direction: column; gap: .8rem; }
.lv-ed label{ display: flex; flex-direction: column; gap: .25rem; font-weight: 700; font-size: .88rem; }
.lv-ed input[type=text], .lv-ed textarea, .lv-edt input, .lv-edr{ font: inherit; font-weight: 400; font-size: 1rem; border: 1px solid var(--color-input); border-radius: 10px; padding: .5rem .6rem; background: var(--color-surface); color: var(--color-foreground); width: 100%; box-sizing: border-box; }
.lv-edqs{ list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .8rem; }
.lv-edq{ padding: .8rem; border-radius: var(--radius-lg); background: var(--color-card); box-shadow: var(--shadow-border); border-left: 4px solid #d69e1b; display: flex; flex-direction: column; gap: .5rem; }
.lv-edqh{ display: flex; justify-content: space-between; align-items: center; color: var(--color-primary); }
.lv-edos{ display: grid; grid-template-columns: 1fr 1fr; gap: .4rem; }
@media (max-width: 520px){.lv-edos{ grid-template-columns: 1fr; }}
.lv-edo{ flex-direction: row !important; align-items: center; gap: .35rem !important; padding: .25rem .35rem; border-radius: 10px; background: var(--c); }
.lv-edo .lv-sh{ color: #fff; font-size: 1rem; width: 1.2rem; text-align: center; }
.lv-edo input[type=radio]{ width: 22px; height: 22px; accent-color: #fff; flex: none; margin: 0; }
.lv-edo input[type=text]{ border: 0; }
.lv-edhint{ margin: 0; font-size: .75rem; color: var(--color-muted-foreground); }
.lv-edmeta{ display: flex; gap: .6rem; flex-wrap: wrap; }
.lv-edmeta label{ flex-direction: row; align-items: center; gap: .35rem; font-weight: 600; }
.lv-edmeta .lv-edr{ width: 11rem; }
.lv-feat{ flex-direction: row !important; align-items: center; gap: .5rem !important; font-weight: 600 !important; }
.lv-ed .hy-link.danger{ align-self: flex-end; }
.lv-hostpage{ width: calc(100vw - 24px); max-width: 1500px; position: relative; left: 50%; transform: translateX(-50%); }
.lv-hostpage:fullscreen{ width: 100vw; max-width: none; left: 0; transform: none; }
body:has(.lv-hostpage){ overflow-x: clip; }
.lv-bigcode{ font-size: clamp(2.4rem, 6.5vw, 5.5rem); letter-spacing: .06em; }
.lv-joininfo{ overflow: hidden; }
.lv-edo:has(input[type=radio]:checked){ outline: 3px solid #0c4a5a; outline-offset: 1px; }
.wg-top{ display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; }
.wg-pl-chip{ display: inline-flex; align-items: center; gap: .4rem; padding: .3rem .7rem; border-radius: 999px; background: var(--color-card); box-shadow: var(--shadow-border); font-size: .88rem; }
.wg-pl-chip em{ font-style: normal; font-weight: 800; color: #c98e12; }
.wg-pl-chip.turn{ outline: 2.5px solid #3f9a55; }
.wg-pl-chip.out{ opacity: .45; text-decoration: line-through; }
.wg-bag{ margin-left: auto; font-size: .85rem; color: var(--color-muted-foreground); }
.wg-board{ display: grid; grid-template-columns: repeat(11, 1fr); gap: 2px; background: #0c4a5a; padding: 3px; border-radius: 10px; touch-action: manipulation; }
.wg-c{ aspect-ratio: 1; border: 0; padding: 0; margin: 0; background: #f4efe2; border-radius: 3px; display: flex; align-items: center; justify-content: center; font: inherit; cursor: pointer; position: relative; min-width: 0; color: #0c4a5a; }
.wg-c.p-tp{ background: #c6423a; }
.wg-c.p-dp{ background: #e9a3ad; }
.wg-c.p-tl{ background: #2e6fc4; }
.wg-c.p-dl{ background: #9cc8ec; }
.wg-c.star{ background: #e9a3ad; color: #8a1c2c; font-size: clamp(.8rem, 3.5vw, 1.2rem); }
.wg-pl{ font-size: clamp(.42rem, 1.9vw, .62rem); font-weight: 800; color: #fff; letter-spacing: .02em; font-family: var(--font-sans, sans-serif); }
.wg-c.p-dl .wg-pl, .wg-c.p-dp .wg-pl{ color: #0c4a5a; }
.wg-t{ position: absolute; inset: 1px; border-radius: 4px; background: linear-gradient(160deg, #fff4d2, #f2d98f); box-shadow: inset 0 -2px 0 rgba(0,0,0,0.18); display: flex; align-items: center; justify-content: center; color: #2a2412; }
.wg-l{ font-weight: 800; font-size: clamp(.8rem, 3.8vw, 1.35rem); font-family: var(--font-sans, sans-serif); }
.wg-v{ position: absolute; right: 2px; bottom: 0; font-size: clamp(.4rem, 1.6vw, .6rem); font-weight: 700; }
.wg-t.blank .wg-l{ color: #2e6fc4; }
.wg-c.pend .wg-t{ background: linear-gradient(160deg, #fff, #ffe38a); box-shadow: 0 0 0 2px #d69e1b; }
.wg-c.last .wg-t{ box-shadow: 0 0 0 2px #3f9a55; }
.wg-msg{ min-height: 1.3em; font-size: .9rem; text-align: center; }
.wg-msg.bad{ color: #b3412f; }
.wg-msg.ok{ color: #2f7d4f; }
.wg-msg.hint{ color: var(--color-muted-foreground); }
.wg-bib{ color: #c98e12; font-weight: 700; }
.wg-rack{ display: grid; grid-template-columns: repeat(7, 1fr); gap: .35rem; max-width: 420px; margin: 0 auto; width: 100%; }
.wg-rt{ position: relative; aspect-ratio: 1; border: 0; padding: 0; background: none; cursor: pointer; transition: transform .15s; }
.wg-rt .wg-t{ inset: 0; border-radius: 8px; }
.wg-rt .wg-l{ font-size: clamp(1.1rem, 5.5vw, 1.6rem); }
.wg-rt .wg-v{ font-size: .65rem; right: 4px; bottom: 2px; }
.wg-rt.sel{ transform: translateY(-8px); }
.wg-rt.sel .wg-t{ box-shadow: 0 0 0 3px #d69e1b, 0 6px 12px rgba(0,0,0,0.2); }
.wg-rt.used{ opacity: .2; }
.wg-rt.swap .wg-t{ box-shadow: 0 0 0 3px #c6423a; }
.wg-btns{ display: flex; gap: .4rem; justify-content: center; align-items: center; flex-wrap: wrap; }
.wg-btns .gm-btn{ min-height: 44px; }
.wg-play{ min-width: 8rem; }
.wg-more{ position: relative; }
.wg-more summary{ list-style: none; }
.wg-more summary::-webkit-details-marker{ display: none; }
.wg-more > div{ position: absolute; right: 0; bottom: 110%; background: var(--color-card); box-shadow: 0 8px 24px rgba(0,0,0,0.25); border-radius: 12px; padding: .4rem; display: flex; flex-direction: column; gap: .3rem; z-index: 5; min-width: 11rem; }
.wg-more > div button{ border: 0; background: rgba(var(--color-primary-rgb),0.07); color: var(--color-foreground); border-radius: 8px; padding: .55rem .7rem; font: inherit; text-align: left; cursor: pointer; }
.wg-more > div button:disabled{ opacity: .4; }
.wg-log{ list-style: none; margin: 0; padding: 0; font-size: .85rem; color: var(--color-muted-foreground); display: flex; flex-direction: column; gap: .15rem; }
.wg-log em{ font-style: normal; font-weight: 800; color: #c98e12; }
.wg-blank{ position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 9000; display: flex; align-items: center; justify-content: center; padding: 1rem; }
.wg-blank > div{ background: var(--color-card); border-radius: 14px; padding: 1rem; max-width: 360px; display: flex; flex-direction: column; gap: .6rem; }
.wg-blank p{ margin: 0; font-weight: 700; }
.wg-blank-g{ display: grid; grid-template-columns: repeat(7, 1fr); gap: .3rem; }
.wg-blank-g button{ aspect-ratio: 1; border: 0; border-radius: 8px; background: #f2d98f; font: inherit; font-weight: 800; font-size: 1.1rem; cursor: pointer; }
.wg-bnote{ position: relative; padding: .7rem 2rem .7rem .9rem; border-radius: 12px; background: #fff8e4; border: 1.5px solid #e2c070; color: #2a2412; }
.wg-bnote p{ margin: .3rem 0 0; font-family: var(--font-serif); font-size: .95rem; }
.wg-bx{ position: absolute; right: .4rem; top: .3rem; border: 0; background: none; font-size: 1rem; cursor: pointer; color: #8a6a14; }
.wg-dl .wg-bar{ height: 10px; border-radius: 99px; background: rgba(var(--color-primary-rgb),0.12); overflow: hidden; }
.wg-dl .wg-bar i{ display: block; height: 100%; width: 0; background: #3f9a55; transition: width .2s; }
.wg-myturn{ border-color: #3f9a55 !important; background: rgba(63,154,85,0.07); }
.wg-new, .wg-join{ display: flex; flex-direction: column; gap: .5rem; }
.wg-new label, .wg-join label{ display: flex; flex-direction: column; gap: .25rem; font-weight: 700; font-size: .88rem; }
.wg-new input, .wg-join input, .wg-new select{ min-height: 44px; border-radius: 10px; border: 1px solid var(--color-input); padding: 0 .7rem; font: inherit; font-size: 1rem; background: var(--color-surface); color: var(--color-foreground); }
.wg-lv{ margin: .2rem 0; }
.wg-again{ margin-top: .4rem; }
.gm-badge{ display: inline-block; align-self: flex-start; font-size: .7rem; font-weight: 800; padding: .12rem .5rem; border-radius: 999px; background: rgba(214,158,27,0.16); color: #8a6a14; letter-spacing: .01em; margin-bottom: .15rem; font-family: var(--font-sans, sans-serif); }
.gm-badge.mp{ background: rgba(63,154,85,0.16); color: #1e6b3c; }
.gm-card.has-art > .gm-badge{ padding: .12rem .5rem; margin-left: .8rem; }
.gm-howto{ border-radius: var(--radius-lg); background: rgba(63,154,85,0.08); border: 1px solid rgba(63,154,85,0.35); padding: .6rem .9rem; font-size: .9rem; }
.gm-howto summary{ cursor: pointer; font-weight: 700; color: var(--color-primary); }
.gm-howto ol{ margin: .5rem 0 .1rem; padding-left: 1.2rem; display: flex; flex-direction: column; gap: .3rem; }
.gm-sq{ position: relative; display: flex; flex-direction: column; aspect-ratio: 1 / 1; min-width: 0; overflow: hidden; border-radius: var(--radius-lg); text-decoration: none; color: inherit;
  background: var(--color-card); box-shadow: var(--shadow-border); border-top: 3px solid var(--gm-gold, #d69e1b); transition: transform .12s ease, box-shadow .12s ease; }
.gm-sq:hover{ box-shadow: var(--shadow-border-hover); transform: translateY(-1px); }
.gm-sq:active{ transform: scale(.98); }
.gm-sq-pic{ position: relative; flex: 1 1 auto; min-height: 0; display: flex; align-items: center; justify-content: center; background: #cdeefb; border-bottom: 2px solid #e2c070; }
.gm-sq-pic img{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.gm-sq-ic{ font-size: 2.4rem; line-height: 1; }
.gm-sq-tag, .gm-sq-pic .gm-stars{ position: absolute; top: .4rem; left: .4rem; max-width: calc(100% - .8rem); padding: .12rem .5rem; border-radius: 999px; font-size: .68rem; font-weight: 800; line-height: 1.35;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; background: rgba(255,255,255,.93); color: #1e6b3c; box-shadow: 0 1px 3px rgba(0,0,0,.2); font-family: var(--font-sans, sans-serif); }
.gm-sq-tag.gold{ color: #8a6a14; }
.gm-sq-pic .gm-stars{ font-size: .8rem; letter-spacing: .04em; color: rgba(0,0,0,.2); }
.gm-sq-pic .gm-stars .on{ color: #e2a915; }
.gm-sq-txt{ flex: none; display: flex; flex-direction: column; gap: .1rem; padding: .45rem .65rem .55rem; }
.gm-sq .gm-card-t{ font-size: .95rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gm-sq .gm-card-d{ flex: none; font-size: .75rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
@media (max-width: 480px){.gm-sq .gm-card-d{ display: none; }.gm-sq .gm-card-t{ font-size: .88rem; }.gm-sq-txt{ padding: .4rem .55rem .5rem; }}
body.th-site:not(.landing-page) .back-link{
  color: #15202E; background: #FFFDF8; border: 1px solid #E3D8C3; border-radius: 999px; padding: .45rem .9rem; margin-bottom: 1rem;
  box-shadow: inset 0 1px 0 #fff, 0 3px 0 #D2C4AA; transition: transform .08s ease-out, box-shadow .08s ease-out;
}
body.th-site:not(.landing-page) .back-link:active{ transform: translateY(3px); box-shadow: inset 0 1px 0 #fff, 0 0 0 #D2C4AA; }
body.th-site:not(.landing-page) .back-link{ display: inline-flex; align-self: flex-start; width: max-content; max-width: 100%; }