/* Windows XP, maximized. Luna title bar, beige menu + status bar, flat felt. System fonts only. */
:root{--felt:#008000;--beige:#ece9d8;--edge:#aca899;--sel:#316ac5;--ui:Tahoma,Verdana,"Segoe UI",sans-serif;--ttl:"Trebuchet MS",Tahoma,"Segoe UI",sans-serif;color-scheme:light}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--felt);overflow:hidden}
body{font:12px/1.35 var(--ui);color:#000;-webkit-font-smoothing:auto;-webkit-text-size-adjust:100%}
button{font:inherit;color:inherit}
.xpw{display:flex;flex-direction:column;height:100vh;height:100dvh;min-height:320px}

/* title bar */
.xpw-title{flex:none;display:flex;align-items:center;gap:6px;height:30px;padding:0 3px 0 7px;color:#fff;
  background:linear-gradient(180deg,#0997ff 0,#0053ee 8%,#0050ee 40%,#06f 88%,#06f 93%,#005bff 95%,#003dd7 96%,#003dd7 100%)}
.xpw-ico{width:16px;height:16px;flex:none;border-radius:2px;image-rendering:auto}
.xpw-title h1{margin:0;flex:1;min-width:0;font:700 13px/1 var(--ttl);letter-spacing:.2px;text-shadow:1px 1px #0f1089;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.xpw-ctl{display:flex;gap:2px;flex:none}
.xpw-ctl>*{position:relative;display:block;width:21px;height:21px;padding:0;margin:0;border:1px solid #fff;border-radius:3px;cursor:default;
  background:linear-gradient(180deg,#5d9cfb 0,#2b6ae8 45%,#1e57d6 100%);box-shadow:inset 1px 1px 1px rgba(255,255,255,.35),inset -1px -1px 1px rgba(0,30,120,.45)}
.xpw-ctl>.cls{background:linear-gradient(180deg,#f0987a 0,#e2582c 45%,#c63c12 100%)}
.xpw-ctl>*::before,.xpw-ctl>*::after{content:"";position:absolute;background:#fff}
.xpw-ctl .min::before{left:5px;bottom:5px;width:7px;height:3px}
.xpw-ctl .max::before{left:7px;top:4px;width:6px;height:6px;background:none;border:1px solid #fff;border-top-width:2px}
.xpw-ctl .max::after{left:4px;top:7px;width:6px;height:6px;background:#2b6ae8;border:1px solid #fff;border-top-width:2px}
.xpw-ctl .cls::before,.xpw-ctl .cls::after{left:4px;top:8.5px;width:11px;height:2px;transform:rotate(45deg)}
.xpw-ctl .cls::after{transform:rotate(-45deg)}

/* the pun: SOL in Solana purple-green, the rest as written (.sol is the game table, so the wordmark is .pun) */
.pun{font-weight:inherit;background:linear-gradient(90deg,#9945ff 0,#7a6cf0 45%,#14f195 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.xpw-title .pun,.xpd-title .pun,.tb .pun{background:linear-gradient(90deg,#e0c2ff 0,#b9a6ff 40%,#5dffc0 100%);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:none;filter:drop-shadow(1px 1px 0 #0f1089)}
.wm{letter-spacing:.2px}

/* menu bar */
.xpm{flex:none;position:relative;z-index:6000;display:flex;align-items:center;height:22px;padding:0 2px;background:var(--beige);border-bottom:1px solid #d8d2bd}
.xpm-item{position:relative}
.xpm-top{border:0;background:none;padding:3px 7px;margin:0;cursor:default;line-height:16px}
.xpm-top u{text-decoration:none}
.xpm.is-alt .xpm-top u,.xpm-top:focus-visible u{text-decoration:underline}
.xpm-top[aria-expanded="true"],.xpm-top:hover{background:var(--sel);color:#fff}
.xpm-top:focus-visible{outline:1px dotted #000;outline-offset:-2px}
.xpm-drop{position:absolute;left:0;top:100%;min-width:186px;padding:2px;background:#fff;border:1px solid var(--edge);box-shadow:2px 2px 2px rgba(0,0,0,.28);display:flex;flex-direction:column}
.xpm-drop[hidden]{display:none}
.xpm-drop>button,.xpm-drop>a{display:flex;align-items:center;gap:4px;width:100%;border:0;background:none;padding:3px 10px 3px 22px;text-align:left;color:#000;text-decoration:none;white-space:nowrap;cursor:default;position:relative;line-height:16px}
.xpm-drop>button:hover,.xpm-drop>a:hover,.xpm-drop>button:focus-visible,.xpm-drop>a:focus-visible{background:var(--sel);color:#fff;outline:0}
.xpm-drop>button:disabled{color:#aca899;background:none}
.xpm-drop>[aria-checked="true"]::before{content:"";position:absolute;left:8px;top:50%;width:6px;height:6px;margin-top:-3px;border-radius:50%;background:currentColor}
.xpm-drop kbd{margin-left:auto;padding-left:28px;font:inherit}
.xpm-drop hr{border:0;border-top:1px solid var(--edge);margin:3px 1px}
.xpm-tick,.xpm-out{margin-left:auto;padding:0 8px;color:#444;letter-spacing:.3px;white-space:nowrap}
.xpm-out{color:#0b3fb8;text-decoration:none}
.xpm-out:hover{text-decoration:underline}

/* felt */
.xpw-felt{flex:1;min-height:0;display:flex;background:var(--felt);padding:0}
.xpw-felt .sol{flex:1}

/* status bar */
.xps{flex:none;display:flex;align-items:stretch;height:22px;background:var(--beige);border-top:1px solid #fff;box-shadow:0 -1px 0 #d8d2bd;padding:0 2px}
.xps-p{margin:0;display:flex;align-items:center;padding:0 9px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border-left:1px solid #fff;box-shadow:-1px 0 0 #c5c1ae}
.xps-p:first-child{border:0;box-shadow:none}
.xps-msg{flex:1;min-width:0;display:block;line-height:21px}
.xps-num{display:block;line-height:21px;font-variant-numeric:tabular-nums;min-width:86px}
.xps-mint{gap:6px}
.xps-left{display:block;line-height:21px;font-variant-numeric:tabular-nums;min-width:74px}
.mint-copy{border:0;background:none;padding:0;margin:0;font:inherit;color:#0b3fb8;font-weight:700;cursor:pointer;font-variant-numeric:tabular-nums}
.mint-copy:hover{text-decoration:underline}
.mint-x{color:#0b3fb8;text-decoration:none}.mint-x:hover{text-decoration:underline}

/* dialogs: XP message box, no dimming (XP never dimmed) */
.xpd{position:fixed;inset:0;z-index:8000;display:grid;place-items:center;padding:12px}
.xpd[hidden]{display:none}
.xpd-win,.sol-done{background:var(--beige);border:3px solid #0831d9;border-top:0;border-radius:8px 8px 0 0;box-shadow:2px 3px 8px rgba(0,0,0,.35);color:#000;font:12px/1.4 var(--ui);width:min(400px,100%)}
.xpd-title{display:flex;align-items:center;height:28px;margin:0 -3px;padding:0 4px 0 9px;border-radius:7px 7px 0 0;color:#fff;
  background:linear-gradient(180deg,#0997ff 0,#0053ee 8%,#0050ee 40%,#06f 88%,#06f 93%,#005bff 95%,#003dd7 96%,#003dd7 100%)}
.xpd-title h2,.xpd-title p{margin:0;flex:1;font:700 13px/1 var(--ttl);text-shadow:1px 1px #0f1089}
.xpd-x{position:relative;width:21px;height:21px;border:1px solid #fff;border-radius:3px;background:linear-gradient(180deg,#f0987a 0,#e2582c 45%,#c63c12 100%);cursor:pointer;padding:0}
.xpd-x::before,.xpd-x::after{content:"";position:absolute;left:4px;top:8.5px;width:11px;height:2px;background:#fff;transform:rotate(45deg)}
.xpd-x::after{transform:rotate(-45deg)}
.xpd-body{padding:12px 14px 4px}
.xpd-body p{margin:0 0 9px}
.xpd-about{display:flex;gap:12px;align-items:flex-start}
.xpd-about img{flex:none;border-radius:3px}
.xpd-mint{display:flex;gap:6px;flex-wrap:wrap}
.xpd-btns{display:flex;justify-content:flex-end;gap:6px;padding:4px 12px 12px}
.xpb{min-width:75px;height:23px;padding:0 10px;border:1px solid #003c74;border-radius:3px;background:linear-gradient(180deg,#fff 0,#ecebe6 86%,#d6d0c5 100%);color:#000;font:12px/21px var(--ui);text-decoration:none;text-align:center;cursor:pointer;display:inline-block;white-space:nowrap}
.xpb:hover{box-shadow:inset -1px 1px #fff0cf,inset 1px 2px #fdd889,inset -2px 2px #fbc761,inset 2px -2px #e5a01a}
.xpb:active{background:linear-gradient(180deg,#cdcac3 0,#e3e3db 8%,#e5e5de 94%,#f2f2f1 100%)}
.xpb:focus-visible{outline:1px dotted #000;outline-offset:-4px}
.xpb.is-def{box-shadow:inset -1px 1px #cee7ff,inset 1px 2px #98b8ea,inset -2px 2px #bcd4f6,inset 1px -1px #89ade4,inset 2px -2px #89ade4}
.sol-done .xpd-body{display:flex;gap:12px;align-items:center}
.sol-done-i{flex:none;width:32px;height:32px;border-radius:50%;background:#2f6fe0;border:2px solid #fff;box-shadow:0 0 0 1px #1b4aa8;color:#fff;font:700 20px/28px Georgia,serif;text-align:center;font-style:italic}
.sol-done-h{font-weight:700}
.sol-done-s{font-variant-numeric:tabular-nums}

/* phones: touch-size menus, two-line status bar */
@media (max-width:640px){
  body{font-size:13px}
  .xpw-title{height:28px}
  .xpm{height:30px}
  .xpm-top{padding:6px 11px}
  .xpm-drop>button,.xpm-drop>a{padding:9px 14px 9px 26px;font-size:14px}
  .xpm-drop{min-width:210px}
  .xps{height:auto;flex-wrap:wrap;padding:0}
  .xps-p{height:25px;padding:0 8px}
  .xps-msg{flex-basis:100%;order:3;border-left:0;box-shadow:none;border-top:1px solid #fff;outline:0;line-height:25px;box-shadow:0 -1px 0 #c5c1ae}
  .xps-mint{flex:1;min-width:0;border:0;box-shadow:none}
  .xps-num{min-width:0;line-height:25px}
}
/* the tweet card: 11px chrome, no ticker clutter */
.is-embed{font-size:11px}
.is-embed .xpw-title,.is-embed .xpm,.is-embed .xps,.is-embed .xpd,.is-embed .sol-done{touch-action:manipulation}
.xps-paid a{color:#0b3fb8;text-decoration:none}.xps-paid a:hover{text-decoration:underline}
.xps-paid[hidden]{display:none}
.is-embed .xpw-title{height:24px;padding-left:5px}
.is-embed .xpw-title h1{font-size:12px}
.is-embed .xpw-ctl>*{width:17px;height:17px}
.is-embed .xpw-ctl .min::before{left:4px;bottom:3px;width:6px;height:2px}
.is-embed .xpw-ctl .max::before{left:6px;top:3px;width:5px;height:5px}
.is-embed .xpw-ctl .max::after{left:3px;top:6px;width:5px;height:5px}
.is-embed .xpw-ctl .cls::before,.is-embed .xpw-ctl .cls::after{left:3px;top:6.5px;width:9px}
.is-embed .xpm{height:20px}
.is-embed .xpm-top{padding:2px 6px}
.is-embed .xpm-drop>button,.is-embed .xpm-drop>a{padding:4px 10px 4px 22px;font-size:12px}
.is-embed .xps{height:20px;flex-wrap:nowrap}
.is-embed .xps-p{height:auto;padding:0 7px}
.is-embed .xps-msg{flex-basis:auto;order:0;border-top:0;box-shadow:none;line-height:19px}
.is-embed .xps-num{min-width:58px;line-height:19px}
.is-embed .xps-left{min-width:0;line-height:19px}
.is-embed .xps-paid:not([hidden]){display:block;line-height:19px}
.is-embed .xpd-win{font-size:12px}

/* Select Card Back */
.deck-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.deck-opt{display:flex;flex-direction:column;align-items:center;gap:4px;padding:6px;border:1px solid transparent;background:none;cursor:pointer;font:11px/1.2 var(--ui);color:#000}
.deck-opt img{width:56px;height:78px}
.deck-opt[aria-pressed="true"]{border:1px dotted #000;background:#316ac5;color:#fff}
/* Best Times */
.best-win{width:min(420px,100%)}
.best-tabs{display:flex;flex-wrap:wrap;gap:0;padding:8px 10px 0;border-bottom:1px solid #919b9c}
.best-tabs button{border:1px solid #919b9c;border-bottom:0;margin-right:-1px;padding:3px 8px;background:linear-gradient(180deg,#fff,#ecebe6);font:11px/1.3 var(--ui);cursor:pointer;border-radius:3px 3px 0 0}
.best-tabs button[aria-selected="true"]{background:#fcfcfe;border-top:2px solid #e68b2c;position:relative;top:1px}
.best-body{background:#fcfcfe;margin:0 10px;border:1px solid #919b9c;border-top:0;padding:8px}
.best-list{list-style:none;margin:0;padding:0;min-height:120px;max-height:240px;overflow:auto;font-variant-numeric:tabular-nums}
.best-list li{display:grid;grid-template-columns:26px 1fr auto auto;gap:8px;padding:3px 4px}
.best-list li:nth-child(odd){background:#f1f4fa}
.best-list li.is-me{background:#316ac5;color:#fff}.best-list li.is-me a{color:#fff}
.best-list .who{font-family:"Lucida Console","Courier New",monospace;font-size:11px}
.best-list a{color:#0b3fb8}
.best-note{margin:6px 0 0;font-size:11px;color:#444}
.xps-pace{color:#0a6a2a}
.xps-pace:empty{display:none}
@media (max-width:640px){ .xps-score{display:none} }

/* motion: menus fade like XP's, message boxes pop in; nothing moves with reduced motion */
@media (prefers-reduced-motion:no-preference){
  .xpm-drop:not([hidden]){animation:menuIn .13s ease-out}
  .xpd:not([hidden]) .xpd-win{animation:dlgIn .16s cubic-bezier(.2,.8,.2,1)}
  .sol-done:not([hidden]){animation:doneIn .2s cubic-bezier(.2,.8,.2,1)}
  .xpb,.deal,.xpm-top,.mint-copy{transition:box-shadow .1s,background-color .1s,filter .1s}
}
@keyframes menuIn{from{opacity:0;translate:0 -2px}to{opacity:1;translate:0 0}}
@keyframes dlgIn{from{opacity:0;scale:.94}to{opacity:1;scale:1}}
@keyframes doneIn{from{opacity:0;scale:.9}to{opacity:1;scale:1}}
.xpb:active{translate:0 1px}