/* =====================================================================
   GameLab RMIT VN – look development options (1–5)
   Only active when <html data-look="N">. Original look = no attribute.
   ===================================================================== */

/* ---------- shared remap: every look sets these tokens ----------
   --white is reused as the card/surface colour, so text that sat on
   colour is re-pointed to --on-primary / --on-topbar here.            */
html[data-look] body { font-family: var(--font-body); background-color: var(--page); color: var(--text); }
html[data-look] h1, html[data-look] h2, html[data-look] h3, html[data-look] .h3, html[data-look] .hero-title,
html[data-look] .cat-btn-n, html[data-look] .feature-title, html[data-look] .kw-name, html[data-look] .footer-name,
html[data-look] .brand, html[data-look] .event-feature-title { font-family: var(--font-display); }
html[data-look] .topbar { background: var(--topbar); color: var(--on-topbar); }
html[data-look] .brand, html[data-look] .brand:hover, html[data-look] .mainnav a, html[data-look] .mainnav a:hover, html[data-look] .nav-toggle { color: var(--on-topbar); }
html[data-look] .brand-mark { fill: var(--on-topbar); }
html[data-look] .mainnav a:hover { border-color: color-mix(in srgb, var(--on-topbar) 45%, transparent); }
html[data-look] .mainnav a[aria-current] { background: var(--on-topbar); color: var(--topbar-solid, var(--topbar)); }
html[data-look] .btn, html[data-look] .btn:hover, html[data-look] .icon-btn:hover,
html[data-look] .cat-buttons a:hover .cat-btn-n, html[data-look] .cat-buttons a:hover .cat-btn-d,
html[data-look] .kwmap-nodes a:hover .kw-name, html[data-look] .kwmap-nodes a:focus-visible .kw-name,
html[data-look] .kwmap-nodes a:hover .kw-n, html[data-look] .kwmap-nodes a:focus-visible .kw-n { color: var(--on-primary); }
html[data-look] .btn-ghost { color: var(--blue); background: transparent; }
html[data-look] .btn-ghost:hover { color: var(--blue-deep); background: var(--panel); }
html[data-look] .btn-join, html[data-look] .btn-join:hover, html[data-look] .mainnav a.btn-join { color: var(--on-accent) !important; background: var(--marigold); border-color: var(--marigold); }
html[data-look] .footer, html[data-look] .board-cta { background: var(--footer); color: var(--on-footer-muted); }
html[data-look] .footer a, html[data-look] .footer-name, html[data-look] .board-cta h2 { color: var(--on-footer); }
html[data-look] .footer .muted { color: var(--on-footer-muted); }
html[data-look] .board-cta .btn-ghost { color: var(--on-footer); border-color: color-mix(in srgb, var(--on-footer) 40%, transparent); }
html[data-look] input[type=text], html[data-look] input:not([type]), html[data-look] input[type=email], html[data-look] input[type=url],
html[data-look] input[type=date], html[data-look] input[type=search], html[data-look] select, html[data-look] textarea { border-color: var(--line); color: var(--text); font-family: var(--font-body); }
html[data-look] .btn { font-family: var(--font-body); }
html[data-look] .tag { background: var(--panel); color: var(--blue-deep); }
html:where([data-look]) a { color: var(--link, var(--blue)); }
html[data-look] .card h3 a, html[data-look] .profile-card h3 a, html[data-look] .post h2 a, html[data-look] .feature-title a, html[data-look] .board-mini a { color: var(--ink); }
html[data-look] .kwmap { background-image: radial-gradient(var(--line) 1.2px, transparent 1.3px); }

/* =====================================================================
   1 · SAIGON NIGHT ARCADE  – neon shop-sign signage after dark
   ===================================================================== */
html[data-look="1"] {
  --page: #120E2E; --panel: #1D1745; --white: #191339; --ink: #FFF3FA; --text: #DCD5F7; --muted: #A39BD0; --line: #3A3172;
  --blue: #FF3E8F; --blue-deep: #FF79B2; --marigold: #EFFF45; --on-primary: #16082C; --on-accent: #16082C;
  --topbar: rgba(18,14,46,.82); --topbar-solid: #120E2E; --on-topbar: #FFFFFF; --footer: #0B0820; --on-footer: #FFFFFF; --on-footer-muted: #A39BD0;
  --cyan: #3DE8FF; --link: #7FF0FF;
  --font-display: "Bungee", "Lexend", sans-serif; --font-body: "Lexend", system-ui, sans-serif; --r: 14px; --r-sm: 10px;
}
html[data-look="1"] body { background-image: radial-gradient(900px 500px at 85% -10%, rgba(255,62,143,.22), transparent 60%), radial-gradient(700px 500px at -10% 30%, rgba(61,232,255,.14), transparent 60%); background-attachment: fixed; }
html[data-look="1"] .topbar { backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); }
html[data-look="1"] .brand-mark .mark-accent { fill: var(--blue); }
html[data-look="1"] h1, html[data-look="1"] h2 { font-weight: 400; letter-spacing: 0; }
html[data-look="1"] .hero-title { font-weight: 400; font-size: clamp(2.4rem, 6.4vw, 5.2rem); line-height: 1; max-width: 13ch; color: #FFF;
  text-shadow: 3px 3px 0 var(--blue), 6px 6px 0 var(--cyan); }
html[data-look="1"] .hero-intro { color: var(--text); }
html[data-look="1"] .cat-buttons { border: 0; gap: 1rem; background: none; overflow: visible; }
html[data-look="1"] .cat-buttons a { border: 2px solid var(--c); border-radius: var(--r); background: color-mix(in srgb, var(--c) 8%, transparent); box-shadow: 0 0 0 1px color-mix(in srgb, var(--c) 30%, transparent), 0 0 28px color-mix(in srgb, var(--c) 22%, transparent); }
html[data-look="1"] .cat-buttons a:nth-child(1) { --c: var(--blue); } html[data-look="1"] .cat-buttons a:nth-child(2) { --c: var(--cyan); } html[data-look="1"] .cat-buttons a:nth-child(3) { --c: var(--marigold); }
html[data-look="1"] .cat-btn-n { color: var(--c); font-weight: 400; }
html[data-look="1"] .cat-buttons a:hover { background: var(--c); }
html[data-look="1"] .btn { border-radius: var(--r-sm); box-shadow: 0 4px 0 #8E1650; transform: translateY(-2px); font-weight: 700; }
html[data-look="1"] .btn:active { transform: translateY(1px); box-shadow: 0 1px 0 #8E1650; }
html[data-look="1"] .btn-join { box-shadow: 0 4px 0 #8C9420; }
html[data-look="1"] .btn-ghost { box-shadow: none; transform: none; border-color: var(--line); }
html[data-look="1"] .split-text { background: var(--panel); border: 1px solid var(--line); }
html[data-look="1"] .split-media, html[data-look="1"] .card-img, html[data-look="1"] .feature-img, html[data-look="1"] .profile-img, html[data-look="1"] .event-feature { position: relative; }
html[data-look="1"] .split-media::after, html[data-look="1"] .feature-img::after, html[data-look="1"] .card-img::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(0,0,0,.18) 0 1px, transparent 1px 3px), linear-gradient(180deg, transparent 55%, rgba(18,14,46,.55)); }
html[data-look="1"] .card:hover, html[data-look="1"] .profile-card:hover, html[data-look="1"] .feature:hover, html[data-look="1"] .post:hover, html[data-look="1"] .event-feature:hover { border-color: var(--blue); box-shadow: 0 0 0 1px var(--blue), 0 0 26px rgba(255,62,143,.35); }
html[data-look="1"] .card-meta, html[data-look="1"] .card-when { color: var(--cyan); }
html[data-look="1"] .kwmap { background-color: #0F0B27; }
html[data-look="1"] .kwmap-nodes a { border-color: var(--cyan); box-shadow: 0 0 16px rgba(61,232,255,.25); }
html[data-look="1"] .kwmap-lines path { stroke: var(--cyan); opacity: .3; }
html[data-look="1"] .kwmap-lines path.on { stroke: var(--blue); opacity: 1; }
html[data-look="1"] .kwmap-nodes a:hover { background: var(--cyan); }
html[data-look="1"] .post { border-left-color: var(--blue); }
html[data-look="1"] .section-tint { background: #17123A; }
html[data-look="1"] .board-cta { border: 2px solid var(--marigold); box-shadow: 0 0 30px rgba(239,255,69,.15); }

/* =====================================================================
   2 · PIXEL CARTRIDGE  – chunky 8-bit, hard shadows, primary colours
   ===================================================================== */
html[data-look="2"] {
  --page: #E9EEF8; --panel: #FFE36E; --white: #FFFFFF; --ink: #000000; --text: #161616; --muted: #4A4A4A; --line: #000000;
  --blue: #2B59FF; --blue-deep: #0F36D6; --marigold: #FFD23F; --on-primary: #FFFFFF; --on-accent: #000000; --red: #FF4B3E; --green: #19C27A;
  --topbar: #FFD23F; --on-topbar: #000000; --footer: #000000; --on-footer: #FFFFFF; --on-footer-muted: #C9C9C9; --link: #0F36D6;
  --font-display: "Silkscreen", "Work Sans", monospace; --font-body: "Work Sans", system-ui, sans-serif; --r: 0px; --r-sm: 0px;
  --hard: 6px 6px 0 #000;
}
html[data-look="2"] body { background-image: linear-gradient(rgba(43,89,255,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(43,89,255,.07) 1px, transparent 1px); background-size: 16px 16px; }
html[data-look="2"] .topbar { border-bottom: 3px solid #000; }
html[data-look="2"] .mainnav a[aria-current] { background: #000; color: #FFD23F; }
html[data-look="2"] .mainnav a.btn-join { background: var(--red); border: 3px solid #000; color: #fff !important; }
html[data-look="2"] h2, html[data-look="2"] h3, html[data-look="2"] .h3, html[data-look="2"] .feature-title, html[data-look="2"] .kw-name, html[data-look="2"] .event-feature-title { font-family: var(--font-body); font-weight: 800; letter-spacing: -0.02em; }
html[data-look="2"] .hero-title { font-weight: 700; font-size: clamp(2.2rem, 6vw, 4.6rem); line-height: 1.05; letter-spacing: 0; max-width: 16ch; text-shadow: 4px 4px 0 var(--marigold); }
html[data-look="2"] h1 { font-weight: 700; letter-spacing: 0; }
html[data-look="2"] .cat-buttons { border: 0; gap: 1.25rem; background: none; overflow: visible; }
html[data-look="2"] .cat-buttons a { border: 3px solid #000; box-shadow: var(--hard); background: var(--c); transition: transform .08s, box-shadow .08s; }
html[data-look="2"] .cat-buttons a:nth-child(1) { --c: var(--blue); } html[data-look="2"] .cat-buttons a:nth-child(2) { --c: var(--red); } html[data-look="2"] .cat-buttons a:nth-child(3) { --c: var(--green); }
html[data-look="2"] .cat-btn-n, html[data-look="2"] .cat-btn-d { color: #fff; }
html[data-look="2"] .cat-btn-n { font-weight: 700; }
html[data-look="2"] .cat-buttons a:hover { background: var(--c); transform: translate(-3px, -3px); box-shadow: 9px 9px 0 #000; }
html[data-look="2"] .btn { border: 3px solid #000; box-shadow: 4px 4px 0 #000; font-weight: 700; transition: transform .08s, box-shadow .08s; }
html[data-look="2"] .btn:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 #000; border-color: #000; }
html[data-look="2"] .btn:active { transform: translate(3px, 3px); box-shadow: 1px 1px 0 #000; }
html[data-look="2"] .btn-ghost { background: #fff; color: #000; }
html[data-look="2"] .split-in { border: 3px solid #000; box-shadow: var(--hard); }
html[data-look="2"] .split-text { background: var(--panel); }
html[data-look="2"] .split-flip .split-text { background: #A9F0D1; }
html[data-look="2"] #network .split-text { background: #FFB7C9; }
html[data-look="2"] .split-media { border-right: 3px solid #000; }
html[data-look="2"] .split-flip .split-media { border-right: 0; border-left: 3px solid #000; }
html[data-look="2"] .card, html[data-look="2"] .profile-card, html[data-look="2"] .feature, html[data-look="2"] .post, html[data-look="2"] .partners li, html[data-look="2"] .event-feature,
html[data-look="2"] .join-box, html[data-look="2"] .kwmap, html[data-look="2"] .contact-card, html[data-look="2"] fieldset, html[data-look="2"] .empty { border: 3px solid #000; box-shadow: var(--hard); }
html[data-look="2"] .card:hover, html[data-look="2"] .profile-card:hover, html[data-look="2"] .feature:hover, html[data-look="2"] .post:hover, html[data-look="2"] .event-feature:hover { border-color: #000; transform: translate(-2px, -2px); box-shadow: 8px 8px 0 #000; }
html[data-look="2"] .card-img, html[data-look="2"] .profile-img { border-bottom: 3px solid #000; }
html[data-look="2"] .tag { background: #000; color: #fff; }
html[data-look="2"] .card-meta { color: var(--red); }
html[data-look="2"] .pill-ph { background: var(--marigold); color: #000; border: 2px solid #000; }
html[data-look="2"] .post { border-left-width: 10px; border-left-color: var(--blue); }
html[data-look="2"] .kwmap { background-color: #fff; }
html[data-look="2"] .kwmap-nodes a { border: 3px solid #000; box-shadow: 4px 4px 0 #000; border-radius: 0; }
html[data-look="2"] .kwmap-nodes a:hover { background: var(--blue); }
html[data-look="2"] .kwmap-lines path { stroke: #000; opacity: .25; stroke-dasharray: 6 6; }
html[data-look="2"] .kwmap-lines path.on { opacity: 1; }
html[data-look="2"] .section-tint { background: #CFE0FF; border-top: 3px solid #000; border-bottom: 3px solid #000; }
html[data-look="2"] .board-cta { border: 3px solid #000; box-shadow: var(--hard); background: var(--blue); color: #fff; }
html[data-look="2"] .footer { border-top: 3px solid #000; }
html[data-look="2"] input[type=text], html[data-look="2"] input:not([type]), html[data-look="2"] input[type=email], html[data-look="2"] input[type=search], html[data-look="2"] select, html[data-look="2"] textarea { border: 3px solid #000; }

/* =====================================================================
   3 · LACQUER & GOLD  – Vietnamese sơn mài: black lacquer, vermilion, gold leaf
   ===================================================================== */
html[data-look="3"] {
  --page: #170B08; --panel: #2B120D; --white: #211009; --ink: #F4DDA8; --text: #EAD8C2; --muted: #B8987D; --line: #5B3324;
  --blue: #C8312A; --blue-deep: #E2534A; --marigold: #D9A441; --on-primary: #FFF3E2; --on-accent: #1A0B06;
  --topbar: #0F0604; --on-topbar: #F4DDA8; --footer: #0D0503; --on-footer: #F4DDA8; --on-footer-muted: #B8987D; --link: #E9B95A;
  --gold: linear-gradient(100deg, #F7E7B6 0%, #D9A441 40%, #9E6E22 70%, #F2D58D 100%);
  --font-display: "Playfair Display", Georgia, serif; --font-body: "Be Vietnam Pro", system-ui, sans-serif; --r: 2px; --r-sm: 2px;
}
html[data-look="3"] body { line-height: 1.7; background-image:
  radial-gradient(circle at 20% 15%, rgba(200,49,42,.10), transparent 40%),
  radial-gradient(circle at 80% 70%, rgba(217,164,65,.07), transparent 45%),
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cg fill='%23D9A441' opacity='.05'%3E%3Cpath d='M10 12l9-3 4 7-8 4zM70 40l12-2 2 9-10 3zM40 90l7-5 6 6-7 6zM95 95l10 1-2 8-9-2z'/%3E%3C/g%3E%3C/svg%3E"); }
html[data-look="3"] .topbar { border-bottom: 1px solid #6E4A1E; }
html[data-look="3"] .brand-mark .mark-accent { fill: var(--blue); }
html[data-look="3"] h1, html[data-look="3"] h2 { font-weight: 700; letter-spacing: -0.01em; }
html[data-look="3"] .hero { text-align: center; }
html[data-look="3"] .hero .wrap > * { margin-left: auto; margin-right: auto; }
html[data-look="3"] .hero-title { font-style: italic; font-weight: 800; font-size: clamp(2.6rem, 6.6vw, 5.4rem); max-width: 16ch; letter-spacing: -0.02em;
  background: var(--gold); -webkit-background-clip: text; background-clip: text; color: transparent; padding-bottom: .1em; }
html[data-look="3"] .hero-intro { color: var(--text); }
html[data-look="3"] .hero .wrap::after { content: ""; display: block; width: 120px; height: 14px; margin: 1.75rem auto 0; background:
  radial-gradient(circle, #D9A441 3px, transparent 3.5px) center/14px 14px no-repeat, linear-gradient(90deg, transparent, #D9A441 30%, #D9A441 70%, transparent) center/100% 1px no-repeat; }
html[data-look="3"] .cat-buttons { border: 1px solid #D9A441; background: transparent; outline: 1px solid rgba(217,164,65,.35); outline-offset: 5px; text-align: left; }
html[data-look="3"] .cat-buttons a { border-right-color: rgba(217,164,65,.4); padding: 1.8rem; }
html[data-look="3"] .cat-btn-n { color: var(--ink); font-style: italic; }
html[data-look="3"] .cat-btn-d { color: var(--muted); }
html[data-look="3"] .cat-buttons a:hover { background: var(--blue); }
html[data-look="3"] .btn { border-radius: 0; letter-spacing: .02em; }
html[data-look="3"] .btn-ghost { border-color: #8A6227; color: var(--ink); }
html[data-look="3"] .split-in { border: 1px solid #8A6227; outline: 1px solid rgba(217,164,65,.25); outline-offset: 6px; }
html[data-look="3"] .split-text { background: linear-gradient(160deg, #2E130D, #1C0B07); }
html[data-look="3"] #research .split-text { background: linear-gradient(160deg, #6A1712, #3A0C09); }
html[data-look="3"] .split-media img { filter: saturate(.85) contrast(1.05); }
html[data-look="3"] .card, html[data-look="3"] .profile-card, html[data-look="3"] .feature, html[data-look="3"] .post, html[data-look="3"] .partners li, html[data-look="3"] .event-feature,
html[data-look="3"] .join-box, html[data-look="3"] .contact-card { border-color: #5B3324; box-shadow: inset 0 0 0 1px rgba(217,164,65,.12); }
html[data-look="3"] .card:hover, html[data-look="3"] .profile-card:hover, html[data-look="3"] .feature:hover, html[data-look="3"] .post:hover, html[data-look="3"] .event-feature:hover { border-color: #D9A441; }
html[data-look="3"] .card-meta, html[data-look="3"] .card-when { color: #D9A441; }
html[data-look="3"] .tag { background: rgba(200,49,42,.25); color: #F2B8A8; }
html[data-look="3"] .kwmap { background-color: #1C0D08; border-color: #8A6227; background-image: radial-gradient(rgba(217,164,65,.25) 1px, transparent 1.3px); }
html[data-look="3"] .kwmap-nodes a { border: 1px solid #D9A441; background: #2B120D; }
html[data-look="3"] .kwmap-nodes a:hover { background: var(--blue); }
html[data-look="3"] .kwmap-lines path { stroke: #D9A441; opacity: .3; }
html[data-look="3"] .kwmap-lines path.on { opacity: .95; }
html[data-look="3"] .post { border-left-color: var(--blue); }
html[data-look="3"] .section-tint { background: #250E09; }
html[data-look="3"] .board-cta { background: linear-gradient(120deg, #7A1A14, #3A0C09); border: 1px solid #D9A441; }
html[data-look="3"] .footer { border-top: 1px solid #6E4A1E; }

/* =====================================================================
   4 · HOLO  – iridescent glass, inspired by the 3D holo models project
   ===================================================================== */
html[data-look="4"] {
  --page: #ECEEFB; --panel: rgba(255,255,255,.55); --white: rgba(255,255,255,.62); --ink: #17154A; --text: #2D2B5C; --muted: #67669A; --line: rgba(255,255,255,.95);
  --blue: #6A45FF; --blue-deep: #4E2BE6; --marigold: #B9F3E4; --on-primary: #FFFFFF; --on-accent: #17154A;
  --topbar: rgba(255,255,255,.55); --topbar-solid: #6A45FF; --on-topbar: #17154A; --footer: #17154A; --on-footer: #FFFFFF; --on-footer-muted: #B6B4E0;
  --holo: linear-gradient(115deg, #7CF6E4 0%, #A9B8FF 30%, #E7A8FF 55%, #FFB8D9 75%, #FFE7A6 100%);
  --font-display: "Unbounded", system-ui, sans-serif; --font-body: "Manrope", system-ui, sans-serif; --r: 22px; --r-sm: 999px;
  --glass-shadow: 0 10px 30px rgba(60,50,140,.10), inset 0 1px 0 rgba(255,255,255,.9);
}
html[data-look="4"] body { background-image:
  radial-gradient(600px 420px at 10% 0%, rgba(124,246,228,.55), transparent 65%),
  radial-gradient(700px 500px at 95% 15%, rgba(231,168,255,.55), transparent 65%),
  radial-gradient(800px 600px at 50% 110%, rgba(169,184,255,.6), transparent 60%); background-attachment: fixed; }
html[data-look="4"] .topbar { backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4); border-bottom: 1px solid rgba(255,255,255,.9); }
html[data-look="4"] .brand-mark { fill: var(--blue); } html[data-look="4"] .brand-mark .mark-accent { fill: #E7A8FF; }
html[data-look="4"] .mainnav a { border-radius: 999px; }
html[data-look="4"] .mainnav a[aria-current] { background: var(--ink); color: #fff; }
html[data-look="4"] .btn-join, html[data-look="4"] .mainnav a.btn-join { background: var(--holo) !important; border: 0 !important; background-size: 200% 100% !important; }
html[data-look="4"] h1, html[data-look="4"] h2 { font-weight: 600; letter-spacing: -0.03em; }
html[data-look="4"] h3, html[data-look="4"] .h3, html[data-look="4"] .feature-title, html[data-look="4"] .kw-name, html[data-look="4"] .event-feature-title { font-weight: 500; letter-spacing: -0.02em; }
html[data-look="4"] .hero-title { font-weight: 600; font-size: clamp(2.2rem, 5.6vw, 4.6rem); line-height: 1.02; max-width: 15ch;
  background: linear-gradient(115deg, #17154A 0%, #17154A 35%, #6A45FF 50%, #E06BD8 62%, #17154A 80%); background-size: 250% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent; animation: holo-sheen 7s ease-in-out infinite; }
@keyframes holo-sheen { 0%, 100% { background-position: 100% 0; } 50% { background-position: 0 0; } }
@media (prefers-reduced-motion: reduce) { html[data-look="4"] .hero-title { animation: none; } }
html[data-look="4"] .card, html[data-look="4"] .profile-card, html[data-look="4"] .feature, html[data-look="4"] .post, html[data-look="4"] .partners li, html[data-look="4"] .event-feature,
html[data-look="4"] .join-box, html[data-look="4"] .kwmap, html[data-look="4"] .contact-card, html[data-look="4"] fieldset, html[data-look="4"] .empty, html[data-look="4"] .cat-buttons,
html[data-look="4"] .subnav a, html[data-look="4"] .chip, html[data-look="4"] .split-text {
  backdrop-filter: blur(16px) saturate(1.3); -webkit-backdrop-filter: blur(16px) saturate(1.3); box-shadow: var(--glass-shadow); }
html[data-look="4"] .cat-buttons { border: 1px solid #fff; gap: .5rem; padding: .5rem; }
html[data-look="4"] .cat-buttons a { border: 0; border-radius: 16px; }
html[data-look="4"] .cat-btn-n { color: var(--ink); font-weight: 600; }
html[data-look="4"] .cat-buttons a:hover { background: var(--holo); }
html[data-look="4"] .cat-buttons a:hover .cat-btn-n, html[data-look="4"] .cat-buttons a:hover .cat-btn-d { color: var(--ink); }
html[data-look="4"] .btn { border-radius: 999px; padding-left: 1.4rem; padding-right: 1.4rem; box-shadow: 0 6px 18px rgba(106,69,255,.3); }
html[data-look="4"] .btn-ghost { background: rgba(255,255,255,.6); border-color: #fff; box-shadow: none; color: var(--ink); }
html[data-look="4"] .split { padding: 1.25rem 0; }
html[data-look="4"] .split-in { gap: 1rem; }
html[data-look="4"] .split-media, html[data-look="4"] .split-text, html[data-look="4"] .split-flip .split-media, html[data-look="4"] .split-flip .split-text { border-radius: var(--r); }
html[data-look="4"] .split-text { background: rgba(255,255,255,.55); border: 1px solid #fff; }
html[data-look="4"] .split-media::after { content: ""; position: absolute; inset: 0; background: var(--holo); mix-blend-mode: soft-light; opacity: .55; pointer-events: none; }
html[data-look="4"] .card:hover, html[data-look="4"] .profile-card:hover, html[data-look="4"] .feature:hover, html[data-look="4"] .post:hover, html[data-look="4"] .event-feature:hover { border-color: #fff; box-shadow: 0 16px 40px rgba(106,69,255,.18), inset 0 1px 0 #fff; }
html[data-look="4"] .card-img, html[data-look="4"] .profile-img { border-radius: 16px; margin: .5rem; }
html[data-look="4"] .profile-img { margin: 0 0 1rem; }
html[data-look="4"] .card-meta { color: var(--blue); }
html[data-look="4"] .tag { background: rgba(106,69,255,.12); color: var(--blue-deep); border-radius: 999px; }
html[data-look="4"] .post { border-left: 1px solid #fff; border-radius: var(--r); }
html[data-look="4"] .kwmap { background-image: radial-gradient(rgba(106,69,255,.18) 1.2px, transparent 1.3px); border: 1px solid #fff; }
html[data-look="4"] .kwmap-nodes a { border: 0; background: rgba(255,255,255,.85); box-shadow: 0 0 0 2px transparent, 0 6px 18px rgba(106,69,255,.15); background-image: linear-gradient(#fff,#fff), var(--holo); background-origin: border-box; background-clip: padding-box, border-box; border: 2px solid transparent; }
html[data-look="4"] .kwmap-nodes a:hover { background-image: var(--holo), var(--holo); }
html[data-look="4"] .kwmap-nodes a:hover .kw-name, html[data-look="4"] .kwmap-nodes a:hover .kw-n { color: var(--ink); }
html[data-look="4"] .kwmap-lines path { stroke: #A07BFF; }
html[data-look="4"] .section-tint { background: rgba(255,255,255,.35); }
html[data-look="4"] .board-cta { border-radius: var(--r); background: linear-gradient(120deg, #17154A, #3A2B8F); }
html[data-look="4"] .footer { margin-top: 3rem; }
html[data-look="4"] input[type=text], html[data-look="4"] input:not([type]), html[data-look="4"] input[type=email], html[data-look="4"] input[type=search], html[data-look="4"] select, html[data-look="4"] textarea { background: rgba(255,255,255,.8); border-color: #D7D6F2; border-radius: 14px; }

/* =====================================================================
   5 · LEVEL SELECT  – game UI / HUD: chamfered panels, scan grid, mint + amber
   ===================================================================== */
html[data-look="5"] {
  --page: #08171B; --panel: #0E2329; --white: #0C1F25; --ink: #E8FFF7; --text: #BCE0D7; --muted: #7FA69D; --line: #1E444B;
  --blue: #3CF0B5; --blue-deep: #8BFFD8; --marigold: #FFB23E; --on-primary: #03140E; --on-accent: #1A0F00;
  --topbar: #061114; --on-topbar: #E8FFF7; --footer: #040C0E; --on-footer: #E8FFF7; --on-footer-muted: #7FA69D; --link: #5CF5C3;
  --font-display: "Chakra Petch", system-ui, sans-serif; --font-body: "IBM Plex Sans", system-ui, sans-serif; --r: 0px; --r-sm: 0px;
  --cut: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px));
  --cut-sm: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px));
}
html[data-look="5"] body { background-image: linear-gradient(rgba(60,240,181,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(60,240,181,.05) 1px, transparent 1px); background-size: 40px 40px; }
html[data-look="5"] .topbar { border-bottom: 1px solid var(--line); }
html[data-look="5"] .brand-mark { fill: var(--blue); } html[data-look="5"] .brand-mark .mark-accent { fill: var(--marigold); }
html[data-look="5"] .mainnav a[aria-current] { background: var(--blue); color: var(--on-primary); }
html[data-look="5"] h1, html[data-look="5"] h2, html[data-look="5"] h3, html[data-look="5"] .h3 { font-weight: 700; letter-spacing: 0; }
html[data-look="5"] .hero-title { font-weight: 700; font-size: clamp(2.3rem, 5.8vw, 4.8rem); line-height: 1; max-width: 16ch; color: var(--ink); }
html[data-look="5"] .hero-title::after { content: "_"; color: var(--blue); animation: caret 1.1s steps(1) infinite; margin-left: .05em; }
@keyframes caret { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { html[data-look="5"] .hero-title::after { animation: none; } }
html[data-look="5"] .hero-intro { color: var(--text); border-left: 3px solid var(--blue); padding-left: 1rem; }
html[data-look="5"] .cat-buttons { border: 0; background: none; gap: 1rem; overflow: visible; }
html[data-look="5"] .cat-buttons a { position: relative; background: var(--panel); border: 0; clip-path: var(--cut); padding: 1.5rem 1.5rem 1.75rem 2.6rem;
  box-shadow: inset 0 0 0 1px var(--line); }
html[data-look="5"] .cat-buttons a::before { content: "▶"; position: absolute; left: 1rem; top: 1.85rem; font-size: .8rem; color: var(--blue); opacity: .35; }
html[data-look="5"] .cat-buttons a::after { content: ""; position: absolute; left: 2.6rem; right: 1.5rem; bottom: 1rem; height: 4px; background: linear-gradient(90deg, var(--blue) var(--p), var(--line) var(--p)); }
html[data-look="5"] .cat-buttons a:nth-child(1) { --p: 72%; } html[data-look="5"] .cat-buttons a:nth-child(2) { --p: 48%; } html[data-look="5"] .cat-buttons a:nth-child(3) { --p: 90%; }
html[data-look="5"] .cat-btn-n { color: var(--ink); }
html[data-look="5"] .cat-buttons a:hover { background: #12333A; }
html[data-look="5"] .cat-buttons a:hover::before { opacity: 1; }
html[data-look="5"] .cat-buttons a:hover .cat-btn-n { color: var(--blue); } html[data-look="5"] .cat-buttons a:hover .cat-btn-d { color: var(--text); }
html[data-look="5"] .btn { clip-path: var(--cut-sm); font-family: var(--font-display); font-weight: 700; letter-spacing: .02em; }
html[data-look="5"] .btn-ghost { box-shadow: inset 0 0 0 1px var(--line); border: 0; }
html[data-look="5"] .split-in { background: var(--panel); clip-path: var(--cut); }
html[data-look="5"] .split-text { background: transparent; }
html[data-look="5"] .split-media { box-shadow: inset 0 0 0 1px var(--line); }
html[data-look="5"] .split-media::after, html[data-look="5"] .feature-img::after { content: ""; position: absolute; inset: 10px; pointer-events: none;
  background: linear-gradient(var(--blue),var(--blue)) top left/18px 2px, linear-gradient(var(--blue),var(--blue)) top left/2px 18px,
              linear-gradient(var(--blue),var(--blue)) top right/18px 2px, linear-gradient(var(--blue),var(--blue)) top right/2px 18px,
              linear-gradient(var(--blue),var(--blue)) bottom left/18px 2px, linear-gradient(var(--blue),var(--blue)) bottom left/2px 18px,
              linear-gradient(var(--blue),var(--blue)) bottom right/18px 2px, linear-gradient(var(--blue),var(--blue)) bottom right/2px 18px; background-repeat: no-repeat; }
html[data-look="5"] .split-media figcaption, html[data-look="5"] .feature-img figcaption { left: 20px; bottom: 18px; }
html[data-look="5"] .card, html[data-look="5"] .profile-card, html[data-look="5"] .feature, html[data-look="5"] .post, html[data-look="5"] .partners li, html[data-look="5"] .event-feature,
html[data-look="5"] .join-box, html[data-look="5"] .contact-card { border: 0; clip-path: var(--cut); box-shadow: inset 0 0 0 1px var(--line); }
html[data-look="5"] .card:hover, html[data-look="5"] .profile-card:hover, html[data-look="5"] .feature:hover, html[data-look="5"] .post:hover, html[data-look="5"] .event-feature:hover { box-shadow: inset 0 0 0 1px var(--blue); background: #10292F; }
html[data-look="5"] .post { box-shadow: inset 4px 0 0 var(--blue), inset 0 0 0 1px var(--line); }
html[data-look="5"] .card-meta, html[data-look="5"] .card-when { color: var(--marigold); font-family: var(--font-display); }
html[data-look="5"] .tag { background: rgba(60,240,181,.12); color: var(--blue); font-family: var(--font-display); }
html[data-look="5"] .kwmap { background-color: #071417; border-color: var(--line);
  background-image: radial-gradient(circle at 50% 50%, transparent 0 24%, rgba(60,240,181,.08) 24.2% 24.6%, transparent 24.8% 49%, rgba(60,240,181,.08) 49.2% 49.6%, transparent 49.8%), radial-gradient(var(--line) 1px, transparent 1.3px);
  background-size: 100% 100%, 22px 22px; }
html[data-look="5"] .kwmap-nodes a { border: 1px solid var(--blue); border-radius: 0; clip-path: var(--cut-sm); background: #0C2228; }
html[data-look="5"] .kwmap-nodes a:hover { background: var(--blue); }
html[data-look="5"] .kwmap-lines path { stroke: var(--blue); opacity: .25; }
html[data-look="5"] .kwmap-lines path.on { opacity: 1; }
html[data-look="5"] .section-tint { background: #0B1E23; }
html[data-look="5"] .board-cta { clip-path: var(--cut); background: linear-gradient(90deg, #0E2B2A, #0C1F25); box-shadow: inset 0 0 0 1px var(--blue); }
html[data-look="5"] .footer { border-top: 1px solid var(--line); }

/* ---------- mobile fixes shared by the looks */
@media (max-width: 680px) {
  html[data-look] .cat-buttons { gap: .75rem; }
  html[data-look="1"] .cat-buttons a, html[data-look="2"] .cat-buttons a { border-bottom-width: 2px; }
  html[data-look="3"] .hero { text-align: left; } html[data-look="3"] .hero .wrap > * { margin-left: 0; }
}
@media (max-width: 860px) {
  html[data-look] .mainnav { background: var(--topbar-solid, var(--topbar)); }
  html[data-look="4"] .mainnav { background: #fff; }
}

/* ---------- the look switcher (only shown in review mode) */
.look-switch { position: fixed; z-index: 50; left: 50%; bottom: 16px; transform: translateX(-50%); display: flex; align-items: center; gap: .35rem;
  background: rgba(10,10,20,.88); color: #fff; padding: .4rem .45rem .4rem .9rem; border-radius: 999px; font: 500 13px/1.2 system-ui, sans-serif;
  box-shadow: 0 10px 30px rgba(0,0,0,.35); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); max-width: calc(100vw - 24px); }
.look-switch .ls-name { min-width: 13ch; margin-right: .35rem; white-space: nowrap; }
.look-switch .ls-name small { display: block; opacity: .6; font-size: 11px; }
.look-switch button { all: unset; cursor: pointer; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; color: #fff; background: rgba(255,255,255,.1); }
.look-switch button:hover { background: rgba(255,255,255,.25); }
.look-switch button[aria-pressed="true"] { background: #fff; color: #111; }
.look-switch button:focus-visible { outline: 2px solid #FFC23D; outline-offset: 2px; }
.look-switch .ls-hide { width: 24px; height: 24px; font-weight: 400; opacity: .7; background: none; }
@media (max-width: 520px) { .look-switch .ls-name small { display: none; } .look-switch .ls-name { min-width: 0; } .look-switch button { width: 28px; height: 28px; } }

/* ---------- fixes: decorated panels hug content, not the page gutter */
html[data-look="2"] .split-in, html[data-look="3"] .split-in, html[data-look="5"] .split-in { padding: 0; width: calc(100% - 48px); }
@media (max-width: 600px) { html[data-look="2"] .split-in, html[data-look="3"] .split-in, html[data-look="5"] .split-in { width: calc(100% - 32px); } }
/* recolour the pixel-art illustration so it belongs to each palette */
html[data-look="1"] img[src*="students.svg"] { filter: invert(.93) hue-rotate(150deg) saturate(1.8); }
html[data-look="2"] img[src*="students.svg"] { filter: saturate(1.6) contrast(1.1); }
html[data-look="3"] img[src*="students.svg"] { filter: invert(.92) hue-rotate(180deg) sepia(.75) saturate(2.2) hue-rotate(-12deg); }
html[data-look="4"] img[src*="students.svg"] { filter: hue-rotate(25deg) saturate(1.2); }
html[data-look="5"] img[src*="students.svg"] { filter: invert(.94) hue-rotate(180deg) hue-rotate(-60deg) saturate(1.3); }