/* website tokens (tokens.css), scoped to the two popups */
.lsw{--panel:#0B161C;--gold-border:#FFE699;--gold-pale:#E3CF9A;--gold:#E5B03C;--gold-link:#ECC980;--gold-dim:#9E8354;
  --red-top:#6B0D05;--red-mid:#5D0000;--red-bot:#300500;
  --cta-gradient:linear-gradient(180deg,var(--red-top) 0%,var(--red-mid) 55%,var(--red-bot) 100%);
  --text:#E1E4E9;--text-dim:#A9B2BC;--text-on-cta:#FFF3EE;
  /* the game's own font everywhere (Mike 2026-10-08: no new fonts); the website's colours stay */
  --font-display:'Times New Roman',Times,serif;--font-body:'Times New Roman',Times,serif;
  --font-ui:'Times New Roman',Times,serif;--radius:4px;
  color:var(--text);font-family:var(--font-body);user-select:text}
.lsw *,.lsw *::before,.lsw *::after{box-sizing:border-box}
#login-popup{width:600px;max-width:calc(100vw - 24px)}
#worlds-popup{width:820px;max-width:calc(100vw - 24px)}
#login-popup .lp-body{padding:3% 7% 4%}
#worlds-popup .lp-body{padding:2.4% 3.4% 3%}

/* --- login.html form (site.css) --- */
.lsw .ls-panel-head{text-align:center;padding-top:6px;cursor:move}
.lsw .ls-panel-head h1{font-family:var(--font-display);font-weight:700;font-size:40px;margin:0;letter-spacing:.01em;
  background:linear-gradient(180deg,#FFF3C0 0%,#E5B03C 52%,#B9812A 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.lsw .ls-panel-head .sub{font-family:var(--font-display);font-size:13px;font-weight:400;letter-spacing:.26em;text-transform:uppercase;color:var(--text);margin:8px 0 0}
.lsw .ls-field{margin-top:20px}
.lsw .ls-field>label{display:block;font-family:var(--font-display);font-weight:400;font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--text);margin-bottom:7px}
.lsw .ls-input{display:flex;align-items:center;gap:12px;background:var(--panel);border:1px solid rgba(158,131,84,.55);border-radius:var(--radius);padding:0 14px;height:54px;transition:border-color .18s ease,box-shadow .18s ease}
.lsw .ls-input:focus-within{border-color:var(--gold);box-shadow:0 0 0 3px rgba(229,176,60,.12)}
.lsw .ls-input img{width:20px;height:auto;opacity:.85;flex:0 0 auto}
.lsw .ls-input input{flex:1 1 auto;min-width:0;background:none;border:0;outline:none;color:var(--text);font-family:var(--font-ui);font-size:15px}
.lsw .ls-input input::placeholder{color:#7F8A95}
.lsw .ls-eye{background:none;border:0;padding:4px;cursor:pointer;opacity:.7;flex:0 0 auto;line-height:0}
.lsw .ls-eye:hover{opacity:1}
.lsw .ls-eye img{width:20px}
.lsw .ls-fieldnote{text-align:right;margin:9px 0 0}
.lsw .ls-fieldnote a{font-family:var(--font-ui);font-size:13.5px;color:var(--gold-link);text-decoration:none}
.lsw .ls-fieldnote a:hover{text-decoration:underline}
.lsw .ls-or{display:flex;align-items:center;gap:16px;margin:26px 0 20px;font-family:var(--font-display);font-size:13px;letter-spacing:.18em;text-transform:uppercase;color:var(--text-dim)}
.lsw .ls-or::before,.lsw .ls-or::after{content:'';flex:1 1 auto;height:1px;background:linear-gradient(90deg,transparent,var(--gold-dim),transparent)}
.lsw .ls-socials{display:flex;justify-content:center;gap:14px}
.lsw .ls-social{width:72px;height:64px;display:flex;align-items:center;justify-content:center;background:var(--panel);border:1px solid rgba(158,131,84,.55);border-radius:var(--radius);cursor:pointer;text-decoration:none;transition:border-color .18s ease,background .18s ease}
.lsw .ls-social:hover{border-color:var(--gold);background:rgba(229,176,60,.08)}
.lsw .ls-social img,.lsw .ls-social svg{width:28px;height:28px;display:block}
.lsw .ls-social[aria-disabled="true"]{opacity:.38;cursor:not-allowed;position:relative}
.lsw .ls-social[aria-disabled="true"]:hover{border-color:rgba(158,131,84,.55);background:var(--panel)}
.lsw .ls-cta{display:inline-flex;align-items:center;justify-content:center;gap:16px;min-width:0;padding:22px 46px;
  font-family:var(--font-display);font-size:25px;font-weight:400;letter-spacing:.07em;text-transform:uppercase;
  color:var(--text-on-cta);text-decoration:none;background:var(--cta-gradient);border:2px solid var(--gold-border);border-radius:var(--radius);
  box-shadow:0 0 22px rgba(229,176,60,.18),inset 0 1px 0 rgba(255,255,255,.12);cursor:pointer;transition:filter .18s ease,box-shadow .18s ease,transform .12s ease}
.lsw .ls-cta:hover{filter:brightness(1.18);box-shadow:0 0 34px rgba(229,176,60,.34)}
.lsw .ls-cta:active{transform:translateY(1px)}
.lsw .ls-cta img{width:26px;height:24px}
.lsw .ls-cta[disabled],.lsw .ls-cta.is-busy{opacity:.6;pointer-events:none}

/* --- realm.html My Games (its own <style>) --- */
.lsw .rm-head{display:flex;align-items:center;gap:20px;flex-wrap:wrap;cursor:move}
.lsw .rm-head>.id{display:flex;align-items:center;gap:16px;flex:1 1 auto;min-width:0}
.lsw .rm-head .badge-ico{height:56px;width:auto;flex:0 0 auto}
.lsw .rm-head h2{font-family:var(--font-display);font-weight:700;font-size:30px;letter-spacing:.03em;text-transform:uppercase;margin:0;
  background:linear-gradient(180deg,#FFF3C0 0%,#E5B03C 52%,#B9812A 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.lsw .rm-head p{font-family:var(--font-body);font-size:16px;color:var(--text-dim);margin:2px 0 0}
.lsw .rm-stats{display:flex;gap:10px;flex:0 0 auto}
.lsw .rm-stat{display:flex;align-items:center;gap:10px;background:rgba(11,22,28,.75);border:1px solid rgba(158,131,84,.38);border-radius:var(--radius);padding:9px 16px}
.lsw .rm-stat img{width:22px;height:auto}
.lsw .rm-stat b{font-family:var(--font-display);font-size:19px;color:var(--gold);display:block;line-height:1}
.lsw .rm-stat span{font-family:var(--font-ui);font-size:11.5px;color:var(--text-dim)}
.lsw .rm-rule{height:1px;margin:18px 0 0;background:linear-gradient(90deg,transparent,rgba(158,131,84,.55),transparent)}
.lsw .rm-tabs{display:flex;gap:10px;margin:16px 0 6px}
.lsw .rm-tab{position:relative;font-family:var(--font-body);font-size:17px;color:var(--text-dim);background:rgba(11,22,28,.6);border:1px solid rgba(158,131,84,.30);border-radius:var(--radius);padding:11px 26px;cursor:pointer}
.lsw .rm-tab:hover{color:var(--text);border-color:rgba(158,131,84,.6)}
.lsw .rm-tab.on{color:var(--gold);border-color:var(--gold-dim);background:rgba(229,176,60,.07)}
.lsw .rm-tab.on::after{content:'';position:absolute;left:14%;right:14%;bottom:-1px;height:2px;background:linear-gradient(90deg,transparent,var(--gold),transparent)}
.lsw .rm-list{display:flex;flex-direction:column;gap:12px;margin-top:14px}
.lsw .rm-card{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:16px;background:rgba(9,18,26,.78);border:1px solid rgba(158,131,84,.28);border-radius:var(--radius);padding:14px 16px;transition:border-color .18s ease,background .18s ease}
.lsw .rm-card:hover{border-color:rgba(229,176,60,.55);background:rgba(14,26,34,.86)}
.lsw .rm-thumb,.lsw .rm-thumb-none{flex:0 0 auto;width:124px;height:78px;border-radius:var(--radius);object-fit:cover;border:1px solid rgba(158,131,84,.40)}
.lsw .rm-thumb-none{display:flex;align-items:center;justify-content:center;text-align:center;
  background:radial-gradient(120% 90% at 50% 0%,rgba(229,176,60,.10),transparent 70%),#0A141C;
  font-family:var(--font-display);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:rgba(158,131,84,.85);padding:0 8px}
.lsw .rm-body{min-width:0}
.lsw .rm-name{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-family:var(--font-body);font-weight:600;font-size:20px;color:var(--text);line-height:1.2}
.lsw .rm-pill{font-family:var(--font-ui);font-size:10.5px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;padding:4px 11px;border-radius:11px}
.lsw .rm-pill.active{background:rgba(22,86,52,.85);color:#BFEBCE;border:1px solid rgba(80,180,120,.5)}
.lsw .rm-pill.waiting{background:rgba(96,64,14,.85);color:#F0DCAE;border:1px solid rgba(229,176,60,.45)}
.lsw .rm-meta{display:flex;flex-direction:column;gap:6px;margin-top:8px}
.lsw .rm-meta .row{display:flex;gap:16px;flex-wrap:wrap}
.lsw .rm-meta span{display:flex;align-items:center;gap:8px;font-family:var(--font-ui);font-size:13px;color:var(--text-dim)}
.lsw .rm-meta img,.lsw .rm-meta svg{width:17px;height:15px;flex:0 0 auto;opacity:.95}
.lsw .rm-meta .turn{color:var(--gold)}
.lsw .rm-meta .day{font-family:var(--font-display);letter-spacing:.06em;text-transform:uppercase;font-size:12px}
.lsw .rm-act{display:flex;align-items:center;gap:10px;flex:0 0 auto}
.lsw .rm-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-width:112px;height:42px;padding:0 16px;cursor:pointer;text-decoration:none;
  font-family:var(--font-display);font-size:15px;letter-spacing:.07em;text-transform:uppercase;border-radius:var(--radius)}
.lsw .rm-btn img{width:15px;height:15px}
.lsw .rm-btn.red{color:var(--text-on-cta);background:var(--cta-gradient);border:1px solid var(--gold-border)}
.lsw .rm-btn.red:hover{filter:brightness(1.2)}
.lsw .rm-btn.ghost{color:var(--gold);background:rgba(70,52,18,.5);border:1px solid var(--gold-dim)}
.lsw .rm-btn.ghost:hover{border-color:var(--gold)}
.lsw .rm-btn[aria-disabled="true"]{cursor:default;opacity:.75}
.lsw .rm-empty{display:flex;align-items:center;gap:18px;margin-top:14px;background:rgba(9,18,26,.6);border:1px solid rgba(158,131,84,.24);border-radius:var(--radius);padding:20px 22px}
.lsw .rm-empty img{width:42px;opacity:.8}
.lsw .rm-empty b{font-family:var(--font-body);font-size:19px;color:var(--text);font-weight:600;display:block}
.lsw .rm-empty span{font-family:var(--font-ui);font-size:12.5px;color:var(--text-dim)}
/* narrow (the website's 900px rules, applied by the popup's own width) */
.lsw.narrow .rm-stats{width:100%}
.lsw.narrow .rm-stat{flex:1 1 0;justify-content:center;padding:9px 8px}
.lsw.narrow .rm-card{grid-template-columns:1fr;gap:12px}
.lsw.narrow .rm-thumb,.lsw.narrow .rm-thumb-none{width:100%;height:150px;font-size:12px}
.lsw.narrow .rm-act{width:100%}
.lsw.narrow .rm-btn{flex:1 1 auto;min-width:0}
.lsw.narrow .rm-tab{flex:1 1 0;min-width:0;white-space:nowrap;padding:11px 6px;font-size:13.5px;text-align:center}
.lsw.narrow .ls-panel-head h1{font-size:30px}
.lsw.narrow .ls-social{width:64px;height:58px}
.lsw.narrow .ls-cta{padding:18px 24px;font-size:21px}