/* ===== English theme (Viv, 14 Nov 2026): guitar, vintage grunge, scratches, peeling paint, Polaroid cards, orange light ===== */
html[data-theme="english"] { --verm: #ff8a2a; --type: 'Special Elite', 'Courier New', monospace; --marker: 'Permanent Marker', 'Segoe Print', 'Bradley Hand', cursive; --paint: #e4dcc6; }
html[data-theme="english"] .scene img { opacity: .72; filter: sepia(.35) contrast(1.15) saturate(.9) brightness(.62); object-position: 50% 35%; }
html[data-theme="english"] .scene-shade { background: radial-gradient(120% 90% at 50% 40%, transparent 30%, rgba(0,0,0,.75) 85%), linear-gradient(180deg, rgba(10,6,2,.35), rgba(0,0,0,.2) 40%, rgba(5,3,1,.8)); }
/* film grain and scratches over the scene */
html[data-theme="english"] .scene::after { content: ''; position: absolute; inset: -50%; z-index: 2; background: url(assets/grain.svg), url(assets/scratches.svg); opacity: .22; mix-blend-mode: screen; animation: grain 1.2s steps(6) infinite; }
@keyframes grain { 0% { transform: translate(0,0); } 20% { transform: translate(-3%,2%); } 40% { transform: translate(2%,-3%); } 60% { transform: translate(-2%,-1%); } 80% { transform: translate(3%,1%); } 100% { transform: translate(0,0); } }
/* peeling paint round the page edge */
html[data-theme="english"] .scene::before { content: ''; position: absolute; inset: 0; z-index: 1; background: url(assets/peel.svg) 0 0 / 420px; opacity: .45;
  -webkit-mask-image: radial-gradient(130% 110% at 50% 50%, transparent 64%, #000 94%); mask-image: radial-gradient(130% 110% at 50% 50%, transparent 64%, #000 94%); }
@media (prefers-reduced-motion: reduce) { html[data-theme="english"] .scene::after { animation: none; } }

/* type: typewriter text, marker captions; no kanji in this theme */
html[data-theme="english"] .ask h1, html[data-theme="english"] .chip, html[data-theme="english"] .brand b, html[data-theme="english"] .ctext b, html[data-theme="english"] .typer input, html[data-theme="english"] .covh, html[data-theme="english"] .sideh, html[data-theme="english"] .tile h2 { font-family: var(--type) !important; letter-spacing: 0 !important; }
html[data-theme="english"] .jp { display: none !important; }
html[data-theme="english"] .seal { background: var(--verm); color: #120a03; }
html[data-theme="english"] .side > *, html[data-theme="english"] .maincol .ask { background: rgba(16,12,8,.66) !important; border-color: rgba(228,220,198,.12) !important; }

/* picture cards become Polaroids: worn cream frame with peeling paint, the photo inside, a marker caption, a strip of tape */
html[data-theme="english"] .covgrid { gap: 30px 20px; padding: 14px 4px 6px; }
html[data-theme="english"] .ccard { position: relative; border: 0 !important; padding: 10px 10px 0; background: url(assets/peel.svg) 0 0 / 420px !important; box-shadow: 0 14px 30px rgba(0,0,0,.7), 0 1px 0 rgba(0,0,0,.4); color: #1a1612; }
html[data-theme="english"] .ccard:nth-child(3n+1) { transform: rotate(-2deg); background-position: 120px 40px !important; }
html[data-theme="english"] .ccard:nth-child(3n+2) { transform: rotate(1.4deg); background-position: 260px 300px !important; }
html[data-theme="english"] .ccard:nth-child(3n) { transform: rotate(-.6deg); background-position: 30px 210px !important; }
html[data-theme="english"] .ccard:hover, html[data-theme="english"] .ccard:focus-visible { transform: rotate(0) translateY(-4px) scale(1.03); box-shadow: 0 22px 44px rgba(0,0,0,.8); }
html[data-theme="english"] .ccard.on { box-shadow: 0 0 0 2px var(--verm), 0 18px 36px rgba(0,0,0,.8); }
html[data-theme="english"] .ccard::after { content: ''; position: absolute; top: -12px; left: 50%; width: 74px; height: 22px; margin-left: -37px; transform: rotate(-4deg); pointer-events: none;
  background: linear-gradient(90deg, rgba(255,255,255,.08), rgba(255,255,255,.22) 35%, rgba(255,255,255,.06)), rgba(214,196,158,.6); box-shadow: 0 2px 5px rgba(0,0,0,.35); }
html[data-theme="english"] .ccard:nth-child(even)::after { transform: rotate(5deg); left: 30%; }
html[data-theme="english"] .cimg { aspect-ratio: 1; background: #15110d; box-shadow: inset 0 0 0 1px rgba(0,0,0,.35), inset 0 0 24px rgba(0,0,0,.6); }
html[data-theme="english"] .cimg img { filter: sepia(.28) contrast(1.08) saturate(.9); }
html[data-theme="english"] .cimg::after { content: ''; position: absolute; inset: 0; background: url(assets/scratches.svg) 0 0 / 360px; opacity: .35; mix-blend-mode: screen; pointer-events: none; }
html[data-theme="english"] .cmeta { padding: 12px 4px 16px; }
html[data-theme="english"] .cnum { color: #b4521a; font-family: var(--marker); font-size: 18px; }
html[data-theme="english"] .ctitle { font-family: var(--marker); font-size: 17px; letter-spacing: 0; color: #1a1612; white-space: normal; line-height: 1.15; }
html[data-theme="english"] .ctype { color: #e9e0cc; }
html[data-theme="english"] .ctype b { color: var(--verm); }

/* the open card: a large Polaroid */
html[data-theme="english"] .tiles.staged .tile.asked { border: 16px solid transparent !important; border-bottom-width: 54px !important; background: url(assets/scratches.svg) 0 0 / 600px padding-box, linear-gradient(#13100c, #13100c) padding-box, url(assets/peel.svg) 0 0 / 420px border-box !important; padding: 30px 26px 26px !important; box-shadow: 0 26px 60px rgba(0,0,0,.8) !important; transform: rotate(-.4deg) !important; }
html[data-theme="english"] .tiles.staged .tile.asked h2 { color: #f2e9d6 !important; }
html[data-theme="english"] .stageclose { top: 22px; right: 26px; }
@media (max-width: 699px) { html[data-theme="english"] .covgrid { gap: 24px 14px; } html[data-theme="english"] .ctitle { font-size: 15px; } html[data-theme="english"] .tiles.staged .tile.asked { border-width: 10px !important; border-bottom-width: 36px !important; padding: 34px 14px 20px !important; } }

html[data-theme="english"] .ctitle, html[data-theme="english"] .cnum { position: relative; z-index: 1; text-shadow: 0 0 3px #e9e1cc, 0 0 6px #e9e1cc; }

/* the globe sits on the amplifier */
.ampbed { display: none; }
html[data-theme="english"] .ampbed { display: block; position: absolute; left: -30%; width: 160%; top: 99%; height: 40%; overflow: hidden; z-index: 0; pointer-events: none;
  -webkit-mask-image: radial-gradient(ellipse 52% 100% at 50% 0%, #000 60%, transparent 100%); mask-image: radial-gradient(ellipse 52% 100% at 50% 0%, #000 60%, transparent 100%); }
html[data-theme="english"] .ampbed img { display: block; width: 100%; margin-top: -53.6%; margin-left: -11.25%; filter: sepia(.2) contrast(1.08) brightness(.8); }
html[data-theme="english"] .orbwrap canvas { position: relative; z-index: 1; }
html[data-theme="english"] .side > .orbcol { overflow: hidden; }
html[data-theme="english"] .orbstatus, html[data-theme="english"] #restart { position: relative; z-index: 2; text-shadow: 0 1px 6px #000, 0 0 2px #000; }

/* redo (Viv, 14 Nov 2026): the whole amp photo behind the globe panel, the stand on the amp's top; no cut strip, no dark square */
html[data-theme="english"] .ampbed { display: none !important; }
html[data-theme="english"] .side > .orbcol { background:
    radial-gradient(70% 55% at 50% 38%, transparent 40%, rgba(8,5,2,.55) 100%),
    linear-gradient(180deg, rgba(8,5,2,.35), transparent 30%, transparent 78%, rgba(8,5,2,.7)),
    url(assets/guitar-amp.webp) var(--ampx, 0) var(--ampy, 0) / var(--amps, 160%) auto no-repeat, #120d08 !important; }
html[data-theme="english"] .orbwrap canvas { -webkit-mask-image: radial-gradient(circle at 50% 49.5%, #000 55.2%, transparent 58.2%); mask-image: radial-gradient(circle at 50% 49.5%, #000 55.2%, transparent 58.2%); }

/* globe panel back to plain dark (Viv, 14 Nov 2026: photo behind the globe looked wrong) */
html[data-theme="english"] .side > .orbcol { background: rgba(16,12,8,.66) !important; }
html[data-theme="english"] .orbwrap canvas { mix-blend-mode: normal; -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 58%, transparent 71%); mask-image: radial-gradient(circle at 50% 50%, #000 58%, transparent 71%); }

/* background: the guitar workshop (Unsplash, Ali Kaan Uçar), cropped to the bulbs and wall guitars, softly out of focus, lower clutter darkened */
html[data-theme="english"] .scene img { object-position: 38% 0%; filter: sepia(.25) contrast(1.05) saturate(.95) brightness(.6) blur(2.5px); opacity: .8; }
html[data-theme="english"] .scene-shade { background: radial-gradient(110% 80% at 45% 22%, transparent 25%, rgba(0,0,0,.6) 80%), linear-gradient(180deg, rgba(8,5,2,.25), rgba(0,0,0,.15) 35%, rgba(4,2,1,.85) 85%); }

/* background: desk by the window (Unsplash, Cody Manning): calm, one guitar, a desk; dimmed to night, no blur */
html[data-theme="english"] .scene img { object-position: 50% 45%; filter: sepia(.3) contrast(1.12) saturate(.9) brightness(.5); opacity: .85; }
html[data-theme="english"] .scene-shade { background: radial-gradient(120% 90% at 50% 45%, transparent 30%, rgba(0,0,0,.7) 85%), linear-gradient(180deg, rgba(8,5,2,.3), rgba(0,0,0,.1) 40%, rgba(4,2,1,.75)); }
html[data-theme="english"] .scene .scene-alt { object-position: 38% 0%; filter: sepia(.25) contrast(1.05) saturate(.95) brightness(.55) blur(2.5px); }

/* better fonts (Viv, 14 Nov 2026): Bebas Neue headings, DM Sans text, Caveat handwriting on the Polaroids */
html[data-theme="english"] { --head: 'Bebas Neue', 'Oswald', 'Arial Narrow', sans-serif; --text: 'DM Sans', 'Segoe UI', system-ui, sans-serif; --marker: 'Caveat', 'Segoe Print', cursive; }
html[data-theme="english"] .ask h1, html[data-theme="english"] .covh, html[data-theme="english"] .sideh, html[data-theme="english"] .tile h2, html[data-theme="english"] .brand b, html[data-theme="english"] .ctext b, html[data-theme="english"] .sethead h2, html[data-theme="english"] .setsec h3 { font-family: var(--head) !important; font-weight: 400 !important; letter-spacing: .04em !important; }
html[data-theme="english"] .ask h1 { font-size: clamp(30px, 3.6vw, 44px) !important; line-height: 1.02; }
html[data-theme="english"] .covh, html[data-theme="english"] .sideh { font-size: 22px !important; }
html[data-theme="english"] .tiles.staged .tile.asked h2 { font-size: 34px !important; }
html[data-theme="english"] .chip, html[data-theme="english"] .typer input, html[data-theme="english"] .topics button, html[data-theme="english"] .stagehint, html[data-theme="english"] .tile, html[data-theme="english"] .ctext span, html[data-theme="english"] .setdlg { font-family: var(--text) !important; }
html[data-theme="english"] .chip { font-size: 14.5px !important; }
html[data-theme="english"] .ctitle { font-family: var(--marker) !important; font-size: 21px !important; font-weight: 700; }
html[data-theme="english"] .cnum { font-family: var(--marker) !important; font-size: 21px !important; font-weight: 700; }

/* match Dani's Intelli Voice dashboards: Poppins throughout (Viv, 14 Nov 2026) */
html[data-theme="english"] { --head: 'Poppins', 'Segoe UI', system-ui, sans-serif; --text: 'Poppins', 'Segoe UI', system-ui, sans-serif; --marker: 'Poppins', 'Segoe UI', system-ui, sans-serif; }
html[data-theme="english"] .ask h1, html[data-theme="english"] .covh, html[data-theme="english"] .sideh, html[data-theme="english"] .tile h2, html[data-theme="english"] .brand b, html[data-theme="english"] .ctext b, html[data-theme="english"] .sethead h2, html[data-theme="english"] .setsec h3 { font-weight: 500 !important; letter-spacing: -.005em !important; }
html[data-theme="english"] .ask h1 { font-size: clamp(24px, 2.6vw, 32px) !important; line-height: 1.2; }
html[data-theme="english"] .covh, html[data-theme="english"] .sideh { font-size: 17px !important; }
html[data-theme="english"] .tiles.staged .tile.asked h2 { font-size: 26px !important; }
html[data-theme="english"] .ctitle, html[data-theme="english"] .cnum { font-size: 14px !important; font-weight: 500; }
html[data-theme="english"] .chip { font-size: 13.5px !important; }
html[data-theme="english"] .cmeta { background: linear-gradient(180deg, rgba(232,224,203,.94), rgba(226,217,195,.9)); margin: 0 -2px; }
html[data-theme="english"] .ctitle, html[data-theme="english"] .cnum { text-shadow: none; }

/* empty Favourite photos card: looks like an undeveloped instant photo, not a black box with text (Viv, 15 Nov 2026: "doesn't look real") */
html[data-theme="english"] .ccard[data-id="photos"] .cimg:has(.ctype) { background: radial-gradient(120% 95% at 28% 18%, #4a5a5e 0%, #2a3739 38%, #161e20 72%, #0c1112 100%) !important; box-shadow: inset 0 0 0 1px rgba(0,0,0,.45), inset 0 0 30px rgba(0,0,0,.55); }
html[data-theme="english"] .ccard[data-id="photos"] .cimg:has(.ctype)::before { content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background: linear-gradient(118deg, transparent 30%, rgba(255,255,255,.10) 42%, rgba(255,255,255,.03) 50%, transparent 60%), radial-gradient(60% 40% at 70% 85%, rgba(120,140,120,.12), transparent 70%); }
html[data-theme="english"] .ccard[data-id="photos"] .cimg:has(.ctype)::after { opacity: .18 !important; }
html[data-theme="english"] .ccard[data-id="photos"] .ctype { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }