/* Words and Guff: Time Travel looks (14 Oct 2026). Each era redefines the game screen's colours inside #app and
   adds its own touches. Only during a game (body.in-game), only on the phone that chose it (era.js).
   #app in every selector keeps these above the board's own rules, the Power Board and Snowflakes included. */

/* ---------- GuffBot's time machine sheet (always the normal look) ---------- */
.eraintro { display: flex; gap: 12px; align-items: center; margin-bottom: 12px; }
.eraintro img { border-radius: 8px; flex: none; }
.eraintro h2 { margin: 0; }
.eraintro .sub { margin: 2px 0 0; }
.eraopts { display: grid; gap: 10px; }
.eraopt { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 64px; padding: 10px 12px; border: 2px solid; border-radius: 14px; text-align: left; cursor: pointer; font: inherit; }
.eraopt.here { box-shadow: 0 0 0 3px var(--tile); }
.erasw { display: grid; grid-template-columns: repeat(5, 14px); gap: 2px; flex: none; }
.erasw b { width: 14px; height: 14px; display: block; border-radius: 2px; }
.eraname { flex: 1; min-width: 0; display: grid; gap: 4px; }
.eraname small { font-size: 12px; opacity: .8; }
.erahere { font-size: 12px; font-weight: 700; white-space: nowrap; }

/* ============================== 1966: Swinging Sixties ============================== */
body.in-game.era-1966 { background: repeating-radial-gradient(circle at 50% -30%, #F4E9D0 0 16px, #EFE0C0 16px 32px) fixed; }
body.in-game.era-1966 #app {
  --paper: #F4E9D0; --grid: #E2D2AC; --card: #FFF7E6; --ink: #3B2414; --muted: #7A6248; --line: #D9C49A;
  --tile: #E5C688; --tile-hi: #F3DEB0; --tile-edge: #B58A4C;
  --red: #C93F22; --pink: #E0A82E; --pink-soft: #F7E7C2; --blue: #2C7A7B; --lblue: #A9B65A; --lblue-soft: #EEF0D2;
  --green: #E2602A; --green-soft: #FBE3D2; --display: "Righteous", "Trebuchet MS", sans-serif; --body: "Josefin Sans", "Futura", "Century Gothic", sans-serif;
  color: var(--ink); font-family: var(--body);
}
body.in-game.era-1966 #app .card { border-radius: 22px; border: 2px solid var(--line); }
body.in-game.era-1966 #app .gp { border-radius: 999px; background: var(--card); }
body.in-game.era-1966 #app .gp b { font-family: var(--display); font-weight: 400; }
body.in-game.era-1966 #app .gp.turn.me { background: #E8702A; border-color: #A9431A; }
body.in-game.era-1966 #app .gameboard { background: #6B3E1F; border: 0; gap: 2px; padding: 4px; border-radius: 10px; box-shadow: inset 0 0 0 2px #8A5530, 0 5px 0 #4A2A14; }
body.in-game.era-1966 #app .gameboard .sq { background: #EBDDBA; border-radius: 2px; color: var(--ink); font-family: var(--body); font-weight: 700; }
body.in-game.era-1966 #app .gameboard .sq.pQ { background: radial-gradient(circle, #E2602A 0 22%, #F4E9D0 23% 40%, #2C7A7B 41% 58%, #F4E9D0 59% 72%, #C93F22 73%); border-radius: 50%; color: #fff; box-shadow: none; text-shadow: 0 1px 1px rgba(0,0,0,.4); }
body.in-game.era-1966 #app .gameboard .sq.pT { background: radial-gradient(circle, #C93F22 0 31%, #F4E9D0 32% 56%, #2C7A7B 57%); border-radius: 50%; color: #fff; text-shadow: 0 1px 1px rgba(0,0,0,.4); }
body.in-game.era-1966 #app .gameboard .sq.pD { background: #E0A82E; border-radius: 50%; color: var(--ink); }
body.in-game.era-1966 #app .gameboard .sq.pt { background: #2C7A7B; color: #F4E9D0; }
body.in-game.era-1966 #app .gameboard .sq.pd { background: #A9B65A; color: var(--ink); }
body.in-game.era-1966 #app .gameboard .sq.tile:not(.peek) { background: linear-gradient(160deg, #F3DEB0, #E5C688); border: 1px solid #B58A4C; border-radius: 3px; box-shadow: 0 1px 0 #9C7038; }
body.in-game.era-1966 #app .gameboard .sq.tile span { font-family: var(--body); font-weight: 700; color: var(--ink); margin-top: 4%; text-shadow: none; }
body.in-game.era-1966 #app .gameboard .sq.tile i { font-family: var(--body); font-weight: 600; color: var(--ink); }
body.in-game.era-1966 #app .gameboard .sq.tile.fresh:not(.peek) { background: linear-gradient(160deg, #F2884A, #E2602A); border-color: #A9431A; }
body.in-game.era-1966 #app .gameboard .sq.tile.fresh span, body.in-game.era-1966 #app .gameboard .sq.tile.fresh i { color: #FFF4E2; }
body.in-game.era-1966 #app .gameboard .sq.tile.pending:not(.peek) { background: linear-gradient(160deg, #FFF0C8, #F2D79C); box-shadow: 0 0 0 2px #2C7A7B inset; }
body.in-game.era-1966 #app .gameboard .sq.tile.blank span { color: #C93F22; }
body.in-game.era-1966 #app .rtile { background: linear-gradient(160deg, #F3DEB0, #E5C688); border-color: #B58A4C; box-shadow: 0 3px 0 #9C7038; }
body.in-game.era-1966 #app .rtile span, body.in-game.era-1966 #app .rtile i { font-family: var(--body); font-weight: 700; color: var(--ink); }
body.in-game.era-1966 #app .rtile span { margin-top: 6%; }
body.in-game.era-1966 #app .rtile.sel { box-shadow: 0 8px 0 #9C7038, 0 0 0 2px #2C7A7B; }
body.in-game.era-1966 #app .btn { font-family: var(--display); font-weight: 400; border-radius: 999px; }
body.in-game.era-1966 #app .btn.ghost { border: 2px solid var(--ink); color: var(--ink); background: var(--card); }
body.in-game.era-1966 #app .btn.play:not(:disabled) { background: #E8702A; border-color: #A9431A; color: #FFF4E2; }
body.in-game.era-1966 #app .linkbtn { color: #B4461C; font-weight: 700; }
body.in-game.era-1966 #app .linkbtn.muted { color: var(--muted); }
body.in-game.era-1966 #app .msg .txt { border-radius: 18px; }
body.in-game.era-1966 #app .msg.me .txt { background: #F7DFC9; border-color: #E8A06A; }

/* ============================== 1983: Home Computer ============================== */
body.in-game.era-1983 { background: repeating-linear-gradient(180deg, #D70000 0 7px, #00D7D7 7px 13px, #D70000 13px 16px, #00D7D7 16px 25px) fixed; }
body.in-game.era-1983 #app {
  --paper: #000; --grid: #0000D7; --card: #000; --ink: #FFFFFF; --muted: #B0B0B0; --line: #0000D7;
  --tile: #FFFF00; --tile-hi: #FFFF00; --tile-edge: #D7D700;
  --red: #FF0000; --pink: #FF00FF; --pink-soft: #3a003a; --blue: #0000FF; --lblue: #00FFFF; --lblue-soft: #002a2a;
  --green: #00FF00; --green-soft: #003300; --display: "Press Start 2P", monospace; --body: "Press Start 2P", monospace;
  color: var(--ink); font-family: var(--body); font-size: 12px; line-height: 1.7;
}
body.in-game.era-1983 #app .card { background: #000; border: 2px solid #FFFFFF; border-radius: 0; box-shadow: none; }
body.in-game.era-1983 #app .gp { border-radius: 0; background: #000; border: 2px solid #555; }
body.in-game.era-1983 #app .gp .n { font-size: 10px; text-transform: uppercase; }
body.in-game.era-1983 #app .gp .n small { font-size: 8px; }
body.in-game.era-1983 #app .gp b { font-size: 15px; }
body.in-game.era-1983 #app .gp.turn { border-color: #00FF00; background: #000; }
body.in-game.era-1983 #app .gp.turn.me { background: #00FF00; border-color: #00FF00; color: #000; }
body.in-game.era-1983 #app .gp.turn.me .n small { color: #000; }
body.in-game.era-1983 #app .gbar .back { color: #FFFF00; }
body.in-game.era-1983 #app .gameboard { background: #0000D7; border: 2px solid #0000D7; border-radius: 0; gap: 1px; }
body.in-game.era-1983 #app .gameboard .sq { background: #000; color: #fff; font: 400 1.45cqw/1 "Press Start 2P", monospace; border-radius: 0; }
body.in-game.era-1983 #app .gameboard .sq.pQ { background: #FFFFFF; color: #FF0000; box-shadow: none; text-shadow: none; animation: flash83 1.28s steps(1) infinite; }
body.in-game.era-1983 #app .gameboard .sq.pT { background: #FF0000; color: #fff; text-shadow: none; }
body.in-game.era-1983 #app .gameboard .sq.pD { background: #FF00FF; color: #fff; }
body.in-game.era-1983 #app .gameboard .sq.pt { background: #0000FF; color: #fff; box-shadow: inset 0 0 0 1px #00FFFF; }
body.in-game.era-1983 #app .gameboard .sq.pd { background: #00FFFF; color: #000; }
@keyframes flash83 { 0%, 49% { background: #FFFFFF; color: #FF0000; } 50%, 100% { background: #FF0000; color: #FFFFFF; } }
body.in-game.era-1983 #app .gameboard .sq.tile:not(.peek) { background: #FFFF00; border: 0; border-radius: 0; box-shadow: none; animation: none; }
body.in-game.era-1983 #app .gameboard .sq.tile span { font: 400 2.9cqw/1 "Press Start 2P", monospace; color: #000; margin-top: 6%; }
body.in-game.era-1983 #app .gameboard .sq.tile i { font: 400 1.1cqw/1 "Press Start 2P", monospace; color: #000; }
body.in-game.era-1983 #app .gameboard .sq.tile.fresh:not(.peek) { background: #00FF00; }
body.in-game.era-1983 #app .gameboard .sq.tile.pending:not(.peek) { background: #FFFF00; box-shadow: inset 0 0 0 2px #FF00FF; }
body.in-game.era-1983 #app .gameboard .sq.tile.blank span { color: #D700D7; }
body.in-game.era-1983 #app .gameboard .sq.tile.peek .under { color: inherit; }
body.in-game.era-1983 #app .rtile { background: #FFFF00; border: 0; border-radius: 0; box-shadow: 3px 3px 0 #D700D7; }
body.in-game.era-1983 #app .rtile span { font: 400 clamp(13px, 4.6vw, 20px)/1 "Press Start 2P", monospace; color: #000; margin-top: 6%; }
body.in-game.era-1983 #app .rtile i { font: 400 clamp(6px, 1.8vw, 8px)/1 "Press Start 2P", monospace; color: #000; }
body.in-game.era-1983 #app .rtile.sel { box-shadow: 3px 3px 0 #D700D7, 0 0 0 2px #00FFFF; }
body.in-game.era-1983 #app .rtile.blank { background: #FFFFFF; }
body.in-game.era-1983 #app .btn { font-family: "Press Start 2P", monospace; font-size: 9px; border-radius: 0; background: #000; border: 2px solid #FFFFFF; color: #FFFFFF; }
body.in-game.era-1983 #app .btn.play:not(:disabled), body.in-game.era-1983 #app .btn.share { background: #00FF00; border-color: #00FF00; color: #000; }
body.in-game.era-1983 #app .btn:disabled { border-color: #555; color: #777; }
body.in-game.era-1983 #app .linkbtn { color: #00FFFF; text-decoration: none; font-size: 9px; }
body.in-game.era-1983 #app .linkbtn.muted { color: #B0B0B0; }
body.in-game.era-1983 #app .muted, body.in-game.era-1983 #app .tiny { font-size: 9px; }
body.in-game.era-1983 #app .preview { font-size: 9px; }
body.in-game.era-1983 #app .msg .txt { font-size: 10px; line-height: 1.8; border-radius: 0; background: #000; border: 2px solid #00FF00; color: #00FF00; }
body.in-game.era-1983 #app .msg.me .txt { border-color: #00FFFF; color: #00FFFF; background: #000; }
body.in-game.era-1983 #app .msg .who { font-size: 8px; }
body.in-game.era-1983 #app textarea { font-family: "Press Start 2P", monospace; font-size: 11px; background: #000; color: #00FF00; border-radius: 0; border-color: #00FF00; }
body.in-game.era-1983 #app .chip { border-radius: 0; background: #000; color: #fff; border-color: #fff; }

/* ============================== 2083: Hyperspace ============================== */
body.in-game.era-2083 { background: radial-gradient(90% 50% at 80% 0%, #2A1F66 0%, transparent 70%), radial-gradient(70% 40% at 0% 100%, #0F3A5C 0%, transparent 70%), #060914; background-attachment: fixed; }
body.in-game.era-2083 #app {
  --paper: #0B1130; --grid: rgba(120,180,255,.14); --card: rgba(14,20,48,.82); --ink: #DDF8FF; --muted: #93A4D0; --line: rgba(120,180,255,.28);
  --tile: #BFEFFF; --tile-hi: #E9FBFF; --tile-edge: #2EE6FF;
  --red: #FF3D81; --pink: #B07CFF; --pink-soft: rgba(176,124,255,.14); --blue: #2EE6FF; --lblue: #7CFFB2; --lblue-soft: rgba(46,230,255,.12);
  --green: #C8FF7A; --green-soft: rgba(200,255,122,.14); --display: "Orbitron", "Trebuchet MS", sans-serif; --body: "Exo 2", -apple-system, sans-serif;
  color: var(--ink); font-family: var(--body);
}
body.in-game.era-2083 #app .card { background: var(--card); border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 0 24px rgba(46,230,255,.08); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
body.in-game.era-2083 #app .gp { border-radius: 14px; background: rgba(120,160,255,.06); border: 1px solid var(--line); }
body.in-game.era-2083 #app .gp b { font-family: var(--display); font-weight: 800; }
body.in-game.era-2083 #app .gp.turn { border-color: #C8FF7A; background: rgba(200,255,122,.08); }
body.in-game.era-2083 #app .gp.turn.me { background: rgba(200,255,122,.18); border-color: #C8FF7A; color: #EFFFD9; box-shadow: 0 0 14px rgba(200,255,122,.45); }
body.in-game.era-2083 #app .gp.turn.me .n small { color: #C8FF7A; }
body.in-game.era-2083 #app .gameboard { background: rgba(40,60,140,.18); border: 0; gap: 2px; padding: 5px; border-radius: 14px; box-shadow: 0 0 0 1px rgba(46,230,255,.35), 0 0 30px rgba(46,230,255,.18), inset 0 0 40px rgba(120,80,255,.12); }
body.in-game.era-2083 #app .gameboard .sq { background: rgba(120,160,255,.07); border: 1px solid rgba(120,180,255,.14); box-sizing: border-box; border-radius: 4px; color: #9FB4E8; font-family: var(--display); font-weight: 600; letter-spacing: .03em; }
body.in-game.era-2083 #app .gameboard .sq.pQ { background: rgba(255,170,60,.08); border-color: #FFB13D; color: #FFD08A; box-shadow: 0 0 8px rgba(255,177,61,.8), inset 0 0 8px rgba(255,177,61,.5); text-shadow: none; }
body.in-game.era-2083 #app .gameboard .sq.pT { background: rgba(255,61,129,.06); border-color: #FF3D81; color: #FF8FB3; box-shadow: 0 0 6px rgba(255,61,129,.7), inset 0 0 6px rgba(255,61,129,.45); text-shadow: none; }
body.in-game.era-2083 #app .gameboard .sq.pD { background: rgba(176,124,255,.06); border-color: #B07CFF; color: #CDA9FF; box-shadow: 0 0 5px rgba(176,124,255,.6), inset 0 0 5px rgba(176,124,255,.35); }
body.in-game.era-2083 #app .gameboard .sq.pt { background: rgba(46,230,255,.06); border-color: #2EE6FF; color: #8FF2FF; box-shadow: 0 0 6px rgba(46,230,255,.7), inset 0 0 6px rgba(46,230,255,.4); }
body.in-game.era-2083 #app .gameboard .sq.pd { background: rgba(124,255,178,.05); border-color: #7CFFB2; color: #A8FFD0; box-shadow: 0 0 4px rgba(124,255,178,.5); }
body.in-game.era-2083 #app .gameboard .sq.tile:not(.peek) { background: linear-gradient(160deg, rgba(235,245,255,.42), rgba(150,190,255,.14)); border: 1px solid rgba(220,240,255,.7); border-radius: 4px; box-shadow: 0 0 8px rgba(46,230,255,.35); }
body.in-game.era-2083 #app .gameboard .sq.tile span { font-family: var(--display); font-weight: 600; color: #F2FDFF; text-shadow: 0 0 6px #2EE6FF; font-size: 3.4cqw; }
body.in-game.era-2083 #app .gameboard .sq.tile i { font-family: var(--display); color: #BFEFFF; }
body.in-game.era-2083 #app .gameboard .sq.tile.fresh:not(.peek) { background: linear-gradient(160deg, rgba(200,255,140,.55), rgba(120,255,180,.18)); border-color: #C8FF7A; box-shadow: 0 0 10px rgba(200,255,122,.7); }
body.in-game.era-2083 #app .gameboard .sq.tile.fresh span { text-shadow: 0 0 6px #C8FF7A; }
body.in-game.era-2083 #app .gameboard .sq.tile.pending:not(.peek) { background: linear-gradient(160deg, rgba(255,255,255,.5), rgba(46,230,255,.18)); border-color: #2EE6FF; box-shadow: 0 0 0 2px #2EE6FF inset, 0 0 12px rgba(46,230,255,.6); }
body.in-game.era-2083 #app .gameboard .sq.tile.blank span { color: #FF8FB3; text-shadow: 0 0 6px #FF3D81; }
body.in-game.era-2083 #app .rtile { border-radius: 9px; background: linear-gradient(160deg, rgba(235,245,255,.40), rgba(150,190,255,.12)); border: 1px solid rgba(220,240,255,.75); box-shadow: 0 0 12px rgba(46,230,255,.35), 0 8px 18px -8px rgba(0,0,0,.8); }
body.in-game.era-2083 #app .rtile span { font-family: var(--display); font-weight: 600; color: #F2FDFF; text-shadow: 0 0 8px #2EE6FF; }
body.in-game.era-2083 #app .rtile i { font-family: var(--display); color: #BFEFFF; }
body.in-game.era-2083 #app .rtile.sel { box-shadow: 0 0 16px rgba(200,255,122,.7), 0 0 0 2px #C8FF7A; }
body.in-game.era-2083 #app .btn { font-family: var(--display); font-weight: 600; letter-spacing: .05em; border-radius: 12px; background: rgba(46,230,255,.10); border: 1px solid rgba(46,230,255,.6); color: #DDF8FF; }
body.in-game.era-2083 #app .btn.play:not(:disabled), body.in-game.era-2083 #app .btn.share { background: rgba(200,255,122,.18); border-color: #C8FF7A; color: #EFFFD9; box-shadow: 0 0 14px rgba(200,255,122,.45); }
body.in-game.era-2083 #app .btn:disabled { opacity: .45; }
body.in-game.era-2083 #app .linkbtn { color: #2EE6FF; text-decoration: none; border-bottom: 1px solid rgba(46,230,255,.5); }
body.in-game.era-2083 #app .linkbtn.muted { color: var(--muted); border-color: transparent; }
body.in-game.era-2083 #app .msg .txt { background: rgba(120,160,255,.08); border-color: var(--line); color: var(--ink); }
body.in-game.era-2083 #app .msg.me .txt { background: rgba(46,230,255,.12); border-color: rgba(46,230,255,.5); }
body.in-game.era-2083 #app textarea { background: rgba(6,9,20,.7); color: var(--ink); border-color: var(--line); }
body.in-game.era-2083 #app .chip { background: rgba(120,160,255,.08); color: var(--ink); border-color: var(--line); }

/* the Time travel link: deliberately plain, an Easter egg for the curious (Carl, 14 Oct 2026) */
.linkbtn.eralink { font-weight: inherit; }

@media (prefers-reduced-motion: reduce) { body.in-game.era-1983 #app .gameboard .sq.pQ { animation: none; } }