/* ════════════════════════════════════════════════════════════════════
   SymposiON — Home Revamp · GAME PREVIEW styles
   A framed "game screenshot" + modal. Themed via tokens.
   ════════════════════════════════════════════════════════════════════ */
.pv-scene { background: var(--bg); color: var(--fg); border-radius: 16px; overflow: hidden; display: flex; flex-direction: column; min-height: 340px; font-family: var(--sans, 'Montserrat', sans-serif); }
.pv-illu { display: inline-block; color: currentColor; } .pv-illu svg { width: 100%; height: 100%; display: block; }

/* HUD */
.pv-hud { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; background: color-mix(in srgb, var(--fg) 7%, var(--card)); border-bottom: 1px solid var(--line); }
.pv-hud__l { display: flex; align-items: center; gap: 9px; }
.pv-hud__dot { width: 9px; height: 9px; border-radius: 50%; background: var(--terra); box-shadow: 0 0 8px var(--terra); }
.pv-hud__t { font-family: var(--disp, sans-serif); font-weight: 600; font-size: 15px; letter-spacing: .03em; text-transform: uppercase; }
.pv-hud__sub { font-size: 11px; font-weight: 600; letter-spacing: .04em; color: var(--muted); margin-left: 4px; }
.pv-hud__r { display: flex; align-items: center; gap: 12px; }
.pv-hud__lives { color: var(--terra); font-size: 13px; letter-spacing: 1px; }
.pv-hud__score { font-family: var(--disp, sans-serif); font-weight: 600; font-size: 16px; color: var(--gold); }

/* stage */
.pv-stage { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; padding: 22px; text-align: center; background:
  radial-gradient(120% 80% at 50% 0%, color-mix(in srgb, var(--terra) 8%, transparent), transparent 60%); }
.pv-stage > .pv-illu { width: 60px; height: 60px; color: color-mix(in srgb, var(--fg) 60%, var(--terra)); opacity: .9; }
.pv-q { font-family: var(--serif, Georgia, serif); font-size: 21px; font-weight: 600; line-height: 1.3; max-width: 22em; }
.pv-q--sm { font-size: 17px; }

/* choices */
.pv-choices { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; width: 100%; max-width: 420px; }
.pv-choice { position: relative; display: flex; align-items: center; gap: 9px; padding: 12px 14px; border-radius: 11px; border: 1.5px solid var(--line-bold); background: var(--card); color: var(--fg); font-family: var(--sans, sans-serif); font-weight: 600; font-size: 14px; text-align: left; cursor: default; }
.pv-choice__k { display: grid; place-items: center; width: 22px; height: 22px; flex: none; border-radius: 6px; background: var(--sink); color: var(--muted); font-size: 12px; }
.pv-choice--ok { border-color: var(--sage); background: color-mix(in srgb, var(--sage) 14%, var(--card)); }
.pv-choice--ok .pv-choice__k { background: var(--sage); color: #fff; }
.pv-choice__tick { margin-left: auto; color: var(--sage); font-weight: 800; }

/* foot */
.pv-foot { display: flex; align-items: center; justify-content: space-between; padding: 11px 16px; border-top: 1px solid var(--line); font-size: 12px; color: var(--muted); background: var(--card); }
.pv-timer { font-family: var(--disp, sans-serif); font-weight: 600; color: var(--fg-70); letter-spacing: .05em; }

/* grammar paradigm */
.pv-para { width: 100%; max-width: 440px; background: var(--card); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.pv-para__hd { padding: 10px 14px; font-family: var(--disp, sans-serif); font-weight: 600; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--terra-dk); background: var(--terra-soft); }
.pv-table { width: 100%; border-collapse: collapse; }
.pv-table td { padding: 8px 14px; font-size: 15px; border-top: 1px solid var(--line); text-align: left; }
.pv-table__p { color: var(--muted); font-size: 12px; font-weight: 600; letter-spacing: .04em; width: 34%; }
.pv-table__f { font-family: var(--serif, Georgia, serif); font-weight: 600; font-size: 17px; }
.pv-table--3 .pv-table__f { font-size: 15px; }
.pv-table__head td { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); font-weight: 700; }
.pv-row--ask { background: color-mix(in srgb, var(--gold) 12%, transparent); }
.pv-blank { display: inline-block; min-width: 64px; padding: 2px 8px; border-radius: 6px; border: 1.5px dashed var(--gold); color: var(--gold); letter-spacing: 2px; font-family: var(--disp, sans-serif); }

/* tug of war */
.pv-tow { display: flex; align-items: center; gap: 12px; width: 100%; max-width: 440px; }
.pv-tow__av { display: grid; place-items: center; width: 46px; height: 46px; flex: none; border-radius: 50%; font-family: var(--disp, sans-serif); font-weight: 700; color: #fff; }
.pv-tow__av--a { background: var(--terra-dk); } .pv-tow__av--b { background: var(--sage); }
.pv-tow__rope { position: relative; flex: 1; height: 5px; border-radius: 3px; background: repeating-linear-gradient(90deg, var(--stone) 0 8px, transparent 8px 12px); }
.pv-tow__flag { position: absolute; top: 50%; transform: translate(-50%,-50%); width: 14px; height: 14px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 4px color-mix(in srgb, var(--gold) 30%, transparent); }

/* flashcard */
.pv-card3d { width: 240px; padding: 28px 20px; border-radius: 16px; background: linear-gradient(160deg, var(--card), var(--sink)); border: 1px solid var(--line-bold); box-shadow: 0 16px 34px var(--shadow); }
.pv-card3d__lbl { font-size: 10px; letter-spacing: .2em; color: var(--muted); font-weight: 700; }
.pv-card3d__term { font-family: var(--serif, Georgia, serif); font-size: 38px; font-weight: 700; margin: 10px 0; color: var(--terra-dk); }
.pv-card3d__hint { font-size: 11px; color: var(--muted); }
.pv-flash__rate { display: flex; gap: 8px; }
.pv-rate { padding: 9px 16px; border-radius: 999px; border: 1.5px solid var(--line-bold); background: var(--card); color: var(--fg); font-weight: 700; font-size: 13px; }
.pv-rate--bad { border-color: #c2553a; color: #c2553a; } .pv-rate--ok { border-color: var(--gold); color: var(--gold); } .pv-rate--easy { border-color: var(--sage); color: var(--sage); }

/* runner */
.pv-stage--runner { padding: 0; overflow: hidden; }
.pv-run { position: relative; width: 100%; height: 230px; background: linear-gradient(180deg, color-mix(in srgb, var(--terra) 12%, var(--bg)), var(--bg)); perspective: 320px; overflow: hidden; }
.pv-run__col { position: absolute; bottom: 0; width: 30%; height: 100%; background: repeating-linear-gradient(0deg, transparent 0 22px, color-mix(in srgb, var(--fg) 6%, transparent) 22px 24px); transform: rotateX(56deg); transform-origin: bottom; }
.pv-run__col--1 { left: 6%; } .pv-run__col--2 { left: 35%; } .pv-run__col--3 { left: 64%; }
.pv-run__hero { position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%); width: 52px; height: 52px; color: var(--terra-dk); }
.pv-run__gate { position: absolute; top: 26px; left: 50%; transform: translateX(-50%); display: flex; gap: 26px; font-family: var(--serif, Georgia, serif); font-size: 20px; }
.pv-run__gate b { padding: 6px 12px; border-radius: 8px; background: color-mix(in srgb, var(--sage) 22%, var(--card)); border: 1px solid var(--sage); }
.pv-run__gate b.wrong { background: color-mix(in srgb, #c2553a 18%, var(--card)); border-color: #c2553a; }

/* memory */
.pv-mem { display: grid; grid-template-columns: repeat(4, 1fr); gap: 9px; max-width: 360px; }
.pv-mem__c { display: grid; place-items: center; height: 64px; border-radius: 11px; background: var(--card); border: 1px solid var(--line-bold); font-family: var(--serif, Georgia, serif); font-size: 19px; font-weight: 600; }
.pv-mem__c--down { background: var(--terra-soft); border-color: transparent; background-image: radial-gradient(circle at 50% 50%, var(--gold-soft) 20%, transparent 21%); }

/* ── modal ── */
.pv-overlay { position: fixed; inset: 0; z-index: 9600; display: grid; place-items: center; padding: 24px; background: color-mix(in srgb, #07080c 66%, transparent); backdrop-filter: blur(3px); opacity: 0; transition: opacity .2s; }
.pv-overlay.in { opacity: 1; }
.pv-modal { width: min(560px, 96vw); background: var(--card); border: 1px solid var(--line-bold); border-radius: 20px; overflow: hidden; box-shadow: 0 40px 90px rgba(0,0,0,.5); }
.pv-modal__bar { display: flex; align-items: center; justify-content: space-between; padding: 13px 16px; border-bottom: 1px solid var(--line); }
.pv-modal__title { display: flex; align-items: center; gap: 9px; font-family: var(--disp, sans-serif); font-weight: 600; font-size: 15px; letter-spacing: .03em; text-transform: uppercase; }
.pv-modal__dot { width: 9px; height: 9px; border-radius: 50%; background: var(--terra); }
.pv-modal__tools { display: flex; align-items: center; gap: 8px; }
.pv-modal__x { background: var(--sink); border: 1px solid var(--line); color: var(--fg); width: 32px; height: 32px; border-radius: 8px; font-size: 18px; cursor: pointer; }
.pv-frame { padding: 14px; }
.pv-modal__cta { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 16px; border-top: 1px solid var(--line); flex-wrap: wrap; }
.pv-modal__note { font-size: 12px; color: var(--muted); flex: 1; min-width: 180px; }
.pv-modal__play { display: inline-flex; align-items: center; gap: 8px; background: var(--terra-dk); color: #fff; border: 0; font-family: var(--sans, sans-serif); font-weight: 700; font-size: 13.5px; padding: 11px 18px; border-radius: 999px; cursor: pointer; }
.pv-modal__play .pv-illu { width: 16px; height: 16px; color: #fff; }

/* tiny preview tools (display segmented inside modal) */
.pv-seg { display: inline-flex; background: var(--sink); border: 1px solid var(--line); border-radius: 8px; padding: 2px; gap: 2px; }
.pv-seg button { border: 0; background: transparent; color: var(--muted); font-family: var(--sans, sans-serif); font-weight: 600; font-size: 11px; padding: 5px 9px; border-radius: 6px; cursor: pointer; }
.pv-seg button.active { background: var(--card); color: var(--fg); }

@media (max-width: 560px) {
  .pv-choices { grid-template-columns: 1fr; }
}

/* ════════════════════════════════════════════════════════════════════
   INFO PANELS — footer About / Contact / Feedback preview modals
   ════════════════════════════════════════════════════════════════════ */
.info-modal { width: min(540px, 96vw); }
.info-editlink { display: inline-flex; align-items: center; gap: 6px; background: color-mix(in srgb, var(--sage) 16%, var(--card)); color: var(--sage); border: 1px solid color-mix(in srgb, var(--sage) 40%, transparent); font-family: var(--sans, sans-serif); font-weight: 700; font-size: 12px; padding: 7px 12px; border-radius: 999px; cursor: pointer; }
.info-editlink:hover { background: color-mix(in srgb, var(--sage) 26%, var(--card)); }
.info-editlink__q { font-size: 13px; line-height: 1; }
.info-body { padding: 20px 20px 22px; display: flex; flex-direction: column; gap: 16px; max-height: 72vh; overflow: auto; }

.info-hero { display: flex; align-items: center; gap: 14px; }
.info-mark { width: 46px; height: 46px; flex: none; display: grid; place-items: center; border-radius: 13px; background: var(--terra-soft); }
.info-mark__svg { width: 30px; height: 30px; color: var(--fg); }
.info-kicker { font-family: var(--disp, sans-serif); font-weight: 600; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-bottom: 3px; }
.info-title { font-family: var(--serif, Georgia, serif); font-weight: 700; font-size: clamp(20px, 3.4vw, 26px); line-height: 1.15; margin: 0; color: var(--fg); }
.info-lead { font-family: var(--serif, Georgia, serif); font-size: 15.5px; line-height: 1.55; color: var(--fg-70); margin: 0; text-wrap: pretty; }

.info-meta { display: flex; flex-direction: column; gap: 10px; padding-top: 4px; border-top: 1px solid var(--line); }
.info-meta__row { display: flex; align-items: center; gap: 12px; }
.info-meta__ic { width: 26px; height: 26px; flex: none; color: var(--terra-dk); }
.info-meta__l { display: block; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); font-weight: 700; }
.info-meta__v { display: block; font-size: 14px; color: var(--fg-70); font-weight: 500; }

.info-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.info-card { display: flex; flex-direction: column; gap: 6px; padding: 14px 12px; border-radius: 13px; border: 1px solid var(--line-bold); background: var(--bg); }
.info-card__ic { width: 26px; height: 26px; color: var(--terra-dk); }
.info-card__l { font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); font-weight: 700; }
.info-card__v { font-size: 13.5px; color: var(--fg); font-weight: 600; word-break: break-word; }

.info-form { display: flex; flex-direction: column; gap: 10px; padding-top: 14px; border-top: 1px solid var(--line); }
.info-form__lbl { font-family: var(--disp, sans-serif); font-weight: 600; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--fg-70); }
.info-seg { display: inline-flex; gap: 6px; }
.info-seg__b { display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border-radius: 999px; border: 1.5px solid var(--line-bold); background: var(--card); color: var(--muted); font-family: var(--sans, sans-serif); font-weight: 600; font-size: 13px; cursor: pointer; }
.info-seg__ic { width: 16px; height: 16px; }
.info-seg__b.on { border-color: var(--terra); color: var(--terra-dk); background: var(--terra-soft); }
.info-input { width: 100%; padding: 11px 13px; border-radius: 11px; border: 1.5px solid var(--line-bold); background: var(--bg); color: var(--fg); font-family: var(--sans, sans-serif); font-size: 14px; }
.info-input:focus { outline: none; border-color: var(--terra); }
.info-textarea { resize: vertical; min-height: 76px; line-height: 1.5; }
.info-form__foot { display: flex; justify-content: flex-end; }
.info-submit { display: inline-flex; align-items: center; gap: 8px; background: var(--terra-dk); color: #fff; border: 0; font-family: var(--sans, sans-serif); font-weight: 700; font-size: 14px; padding: 11px 22px; border-radius: 999px; cursor: pointer; }
.info-submit:hover { transform: translateY(-1px); }
.info-input.shake { animation: info-shake .4s; border-color: #c2553a; }
@keyframes info-shake { 0%,100%{transform:translateX(0)} 20%{transform:translateX(-6px)} 40%{transform:translateX(6px)} 60%{transform:translateX(-4px)} 80%{transform:translateX(4px)} }

.info-done { display: flex; align-items: center; gap: 14px; padding: 18px; border-radius: 14px; background: color-mix(in srgb, var(--sage) 12%, var(--card)); border: 1px solid color-mix(in srgb, var(--sage) 36%, transparent); }
.info-done__ic { width: 40px; height: 40px; flex: none; color: var(--sage); }
.info-done strong { font-family: var(--disp, sans-serif); font-size: 16px; }
.info-done p { margin: 3px 0 0; font-size: 13.5px; color: var(--fg-70); line-height: 1.4; }

.info-recent { display: flex; flex-direction: column; gap: 9px; padding-top: 14px; border-top: 1px solid var(--line); }
.info-recent__h { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); font-weight: 700; }
.info-rc { padding: 11px 13px; border-radius: 11px; background: var(--bg); border: 1px solid var(--line); }
.info-rc__n { font-family: var(--disp, sans-serif); font-weight: 600; font-size: 12.5px; color: var(--terra-dk); }
.info-rc__t { margin: 3px 0 0; font-size: 13.5px; color: var(--fg-70); line-height: 1.45; }

@media (max-width: 480px) {
  .info-cards { grid-template-columns: 1fr; }
}

/* GUIDES panel — list + how-to-play detail */
.info-guides { display: flex; flex-direction: column; gap: 10px; }
.info-guide { display: flex; align-items: center; gap: 14px; text-align: left; padding: 14px; border-radius: 14px; border: 1px solid var(--line-bold); background: var(--bg); cursor: pointer; transition: border-color .16s, transform .16s; }
.info-guide:hover { border-color: var(--terra); transform: translateY(-1px); }
.info-guide__ic { width: 40px; height: 40px; flex: none; color: var(--terra-dk); }
.info-guide__tx { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.info-guide__kick { font-family: var(--disp, sans-serif); font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.info-guide__hd { font-family: var(--serif, Georgia, serif); font-weight: 700; font-size: 18px; color: var(--fg); }
.info-guide__in { font-size: 13px; color: var(--fg-70); line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.info-guide__arr { color: var(--terra-dk); font-weight: 800; flex: none; }
.info-back { align-self: flex-start; display: inline-flex; align-items: center; gap: 7px; background: none; border: 0; color: var(--muted); font-family: var(--sans, sans-serif); font-weight: 700; font-size: 12.5px; cursor: pointer; padding: 0; }
.info-back:hover { color: var(--terra-dk); }
.info-mark--illu { background: var(--terra-soft); }
.info-mark__illu { width: 30px; height: 30px; color: var(--terra-dk); }
.info-steps { list-style: none; counter-reset: step; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.info-step { counter-increment: step; display: flex; align-items: flex-start; gap: 13px; }
.info-step::before { content: counter(step); flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--terra-dk); color: #fff; font-family: var(--disp, sans-serif); font-weight: 700; font-size: 14px; display: grid; place-items: center; }
.info-step__t { font-size: 14.5px; line-height: 1.5; color: var(--fg); padding-top: 3px; }