/* The page of Valluvar's Pond on the KTS 5.0 portal: the students' game in a frame, from the site of its makers. */
:root{--bg:#1b120c;--card:#2a1c12;--ink:#f4e7cf;--muted:#cdbfa8;--gold:#f2bc5c;--line:#4a3523}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--ink);font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Noto Sans Tamil","Nirmala UI",sans-serif;line-height:1.5}
[lang="ta"]{font-family:"Noto Sans Tamil","Nirmala UI","Latha",system-ui,sans-serif}
.bar{display:flex;align-items:center;gap:14px;padding:10px 16px;border-bottom:1px solid var(--line)}
.bar h1{margin:0;font-size:1.25rem;color:var(--gold);line-height:1.3}
.bar h1 small{font-size:.8rem;color:var(--muted);font-weight:600;letter-spacing:.04em;margin-inline-start:6px}
.back{color:var(--ink);text-decoration:none;border:1px solid var(--line);border-radius:999px;padding:6px 14px;white-space:nowrap;font-size:.9rem}
.back:hover,.back:focus-visible{border-color:var(--gold)}
main{padding:14px 16px 28px;max-width:1240px;margin:0 auto}
/* as wide as the window, as high as it allows: the game is made for a screen held sideways */
.stage{position:relative;width:min(100%,calc((100vh - 150px) * 16 / 9));min-width:min(100%,320px);aspect-ratio:16 / 9;margin:0 auto;background:var(--card);
  border:1px solid var(--line);border-radius:14px;overflow:hidden;display:grid;place-items:center}
.stage.on{background:#000;border-color:#000}
.stage iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
.stage:fullscreen{width:100vw;height:100vh;border-radius:0;border:0;aspect-ratio:auto}
.cover{text-align:center;padding:16px 20px;max-width:46em}
.lead{margin:.3em 0;font-size:1.02rem}
.note{margin:12px 0 0;font-size:.82rem;color:var(--muted)}
.play{margin-top:12px;font:inherit;font-weight:700;font-size:1.1rem;color:#1b120c;background:var(--gold);border:0;border-radius:12px;padding:12px 26px;cursor:pointer;min-height:48px}
.play:hover,.play:focus-visible{filter:brightness(1.08)}
.tools{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin:14px 0 6px}
.link{font:inherit;font-size:.92rem;color:var(--gold);background:transparent;border:1px solid var(--line);border-radius:999px;padding:7px 16px;cursor:pointer;text-decoration:none;min-height:40px;
  display:inline-flex;align-items:center;gap:4px}
.link:hover,.link:focus-visible{border-color:var(--gold)}
.link[hidden]{display:none}
.credit{max-width:60em;margin:10px auto 0;font-size:.84rem;color:var(--muted);text-align:center}
@media (max-width:560px){ .bar h1{font-size:1.05rem} .lead{font-size:.92rem} .stage{aspect-ratio:4 / 3} }