/* ============================================================
   MYGIFTTONASH — free network tools
   Three themes: t-os (Retro OS), t-bp (Blueprint), t-term (Phosphor)
   ============================================================ */

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{
  min-height:100vh;
  font-size:15px;
  line-height:1.5;
  -webkit-font-smoothing:auto;
}
a{ color:inherit; }
.wrap{ max-width:960px; margin:0 auto; padding:18px 14px 60px; }
.hide{ display:none !important; }

/* per-theme visibility */
.os-only, .bp-only, .term-only{ display:none; }
body.t-os   .os-only{ display:revert; }
body.t-bp   .bp-only{ display:revert; }
body.t-term .term-only{ display:revert; }

/* ---------------- THEME: RETRO OS ---------------- */
body.t-os{
  --bg:#008080; --panel:#C0C0C0; --panel2:#FFFFFF; --fg:#000000; --fg-dim:#3F3F3F;
  --line:#808080; --accent:#000080; --good:#008000; --warn:#808000; --bad:#A00000;
  --font-ui:Tahoma,'MS Sans Serif',Verdana,sans-serif; --font-mono:'Courier New',monospace;
  background:var(--bg);
  font-family:var(--font-ui);
  color:var(--fg);
}
body.t-os .frame{ background:var(--panel); border:2px solid; border-color:#FFF #404040 #404040 #FFF; box-shadow:4px 4px 0 rgba(0,0,0,.3); }
body.t-os .chrome{ background:var(--accent); color:#FFF; padding:4px 8px; font-size:13px; display:flex; justify-content:space-between; align-items:center; }
body.t-os .chrome .btns span{ display:inline-block; background:var(--panel); color:#000; border:1px solid; border-color:#FFF #404040 #404040 #FFF; width:18px; text-align:center; font-size:11px; margin-left:2px; }
body.t-os nav{ padding:4px 8px; border-bottom:1px solid var(--line); font-size:13px; }
body.t-os nav a, body.t-os nav button{ color:var(--fg); text-decoration:none; margin-right:12px; }
body.t-os main{ padding:14px; }
body.t-os input[type=text], body.t-os select{ background:#FFF; border:2px solid; border-color:#404040 #FFF #FFF #404040; font-family:var(--font-mono); }
body.t-os .btn{ background:var(--panel); color:#000; border:2px solid; border-color:#FFF #404040 #404040 #FFF; font-family:var(--font-ui); }
body.t-os .btn:active{ border-color:#404040 #FFF #FFF #404040; }
body.t-os .card{ background:var(--panel2); border:2px solid; border-color:#404040 #FFF #FFF #404040; }
body.t-os .statusline{ border-top:1px solid var(--line); padding:3px 8px; font-size:12px; display:flex; justify-content:space-between; }
body.t-os .stamp.pass{ background:var(--good); color:#FFF; border:0; }
body.t-os .stamp.warn{ background:var(--warn); color:#FFF; border:0; }
body.t-os .stamp.fail{ background:var(--bad);  color:#FFF; border:0; }

/* ---------------- THEME: BLUEPRINT ---------------- */
body.t-bp{
  --bg:#123B6B; --panel:transparent; --panel2:rgba(220,233,247,.06); --fg:#DCE9F7; --fg-dim:#9FC0E4;
  --line:#5E82AC; --accent:#DCE9F7; --good:#7CE8A8; --warn:#FFD37C; --bad:#FF9C9C;
  --font-ui:'Courier New',monospace; --font-mono:'Courier New',monospace;
  background:var(--bg);
  background-image:
    repeating-linear-gradient(0deg, rgba(255,255,255,.07) 0 1px, transparent 1px 24px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.07) 0 1px, transparent 1px 24px);
  font-family:var(--font-ui);
  color:var(--fg);
}
body.t-bp .frame{ border:2px solid var(--accent); }
body.t-bp .chrome{ border-bottom:2px solid var(--accent); padding:10px 14px; display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; }
body.t-bp .chrome .btns{ font-size:11px; color:var(--fg-dim); text-align:right; line-height:1.6; }
body.t-bp nav{ display:flex; flex-wrap:wrap; border-bottom:1px solid var(--line); font-size:12px; letter-spacing:.1em; }
body.t-bp nav a, body.t-bp nav button{ color:var(--fg-dim); text-decoration:none; padding:6px 10px; border-right:1px solid var(--line); }
body.t-bp nav a.here{ color:var(--fg); background:rgba(220,233,247,.12); }
body.t-bp main{ padding:16px 14px; }
body.t-bp input[type=text], body.t-bp select{ background:rgba(0,0,0,.15); border:1px solid var(--accent); color:var(--fg); font-family:var(--font-mono); }
body.t-bp select option{ background:#123B6B; }
body.t-bp .btn{ background:rgba(220,233,247,.14); color:var(--fg); border:1px solid var(--accent); letter-spacing:.12em; }
body.t-bp .card{ border:1px dashed #7FA3CD; background:var(--panel2); }
body.t-bp .statusline{ border-top:1px solid var(--line); padding:6px 14px; font-size:11px; letter-spacing:.1em; color:var(--fg-dim); display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px; }
body.t-bp .stamp{ background:transparent; }
body.t-bp .stamp.pass{ color:var(--good); border:1px solid var(--good); }
body.t-bp .stamp.warn{ color:var(--warn); border:1px solid var(--warn); }
body.t-bp .stamp.fail{ color:var(--bad);  border:1px solid var(--bad); }

/* ---------------- THEME: PHOSPHOR TERMINAL ---------------- */
body.t-term{
  --bg:#0A0F0A; --panel:transparent; --panel2:rgba(51,255,102,.05); --fg:#33FF66; --fg-dim:#1FA648;
  --line:#1E5A32; --accent:#33FF66; --good:#33FF66; --warn:#FFB000; --bad:#FF5555;
  --font-ui:'Courier New',monospace; --font-mono:'Courier New',monospace;
  background:var(--bg);
  font-family:var(--font-ui);
  color:var(--fg);
  text-shadow:0 0 6px rgba(51,255,102,.25);
}
body.t-term .frame{ border:1px solid var(--line); }
body.t-term .chrome{ border-bottom:1px solid var(--line); padding:8px 12px; font-size:13px; display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap; }
body.t-term .chrome .btns{ color:var(--fg-dim); }
body.t-term nav{ padding:6px 12px; border-bottom:1px solid var(--line); font-size:13px; }
body.t-term nav a, body.t-term nav button{ color:var(--fg); text-decoration:none; margin-right:6px; }
body.t-term nav a::before{ content:"["; color:var(--fg-dim); }
body.t-term nav a::after{ content:"]"; color:var(--fg-dim); }
body.t-term nav a.here{ background:var(--fg); color:var(--bg); text-shadow:none; }
body.t-term main{ padding:14px 12px; }
body.t-term input[type=text], body.t-term select{ background:transparent; border:1px solid var(--line); color:var(--fg); font-family:var(--font-mono); }
body.t-term select option{ background:#0A0F0A; }
body.t-term .btn{ background:transparent; color:var(--fg); border:1px solid var(--fg); }
body.t-term .btn:hover{ background:var(--fg); color:var(--bg); text-shadow:none; }
body.t-term .card{ border:1px solid var(--line); background:var(--panel2); }
body.t-term .statusline{ border-top:1px solid var(--line); padding:5px 12px; font-size:12px; color:var(--fg-dim); display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px; }
body.t-term .stamp{ background:transparent; }
body.t-term .stamp.pass{ color:var(--good); border:1px solid var(--good); }
body.t-term .stamp.warn{ color:var(--warn); border:1px solid var(--warn); }
body.t-term .stamp.fail{ color:var(--bad);  border:1px solid var(--bad); }

/* ---------------- shared components ---------------- */
.brand{ font-size:15px; letter-spacing:.14em; }
.brand b{ font-weight:bold; }
nav{ display:flex; flex-wrap:wrap; align-items:center; }
nav .navbtn{ background:none; border:0; font:inherit; cursor:pointer; padding:0; }
body.t-bp nav .navbtn{ padding:6px 10px; border-right:1px solid var(--line); }
nav .spacer{ flex:1; }

h1{ font-size:22px; margin:0 0 4px; letter-spacing:.06em; }
.lead{ color:var(--fg-dim); margin:0 0 14px; font-size:14px; }

.formline{ display:flex; gap:8px; flex-wrap:wrap; }
input[type=text], select{ flex:1; min-width:200px; font-size:15px; padding:8px 10px; color:var(--fg); }
select{ flex:0 1 auto; }
.btn{ font-size:14px; padding:8px 18px; cursor:pointer; }
.btn:disabled{ opacity:.55; cursor:not-allowed; }
.hint{ margin-top:8px; font-size:13px; color:var(--fg-dim); }

.cards{ display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:10px; margin-top:14px; }
.card{ padding:10px 12px; position:relative; }
.card .c-title{ font-size:13px; letter-spacing:.12em; margin-bottom:4px; }
.card .c-why{ font-size:14px; }
.card .c-sub{ margin-top:6px; font-family:var(--font-mono); font-size:11px; color:var(--fg-dim); word-break:break-word; }
.stamp{ position:absolute; top:8px; right:8px; font-size:11px; letter-spacing:.08em; padding:1px 8px; }
.stamp.inline{ position:static; margin-left:8px; }

.kv{ margin-top:14px; }
.kv .sec{ font-size:13px; letter-spacing:.14em; padding:10px 0 4px; border-bottom:1px solid var(--fg); display:flex; justify-content:space-between; align-items:baseline; }
.kv .row{ display:grid; grid-template-columns:200px 1fr; gap:4px 14px; padding:5px 0; border-bottom:1px dotted var(--line); font-size:13px; }
.kv .k{ color:var(--fg-dim); }
.kv .v{ font-family:var(--font-mono); word-break:break-word; }
@media (max-width:560px){ .kv .row{ grid-template-columns:1fr; } }

/* compact grid (browser page) */
.densegrid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:4px 20px; margin-top:10px; }
.densegrid .drow{ display:flex; justify-content:space-between; gap:10px; font-size:13px; padding:3px 0; border-bottom:1px dotted var(--line); }
.densegrid .dk{ color:var(--fg-dim); white-space:nowrap; }
.densegrid .dv{ font-family:var(--font-mono); text-align:right; word-break:break-word; }
.densegrid .dsec{ grid-column:1 / -1; font-size:13px; letter-spacing:.14em; border-bottom:1px solid var(--fg); padding:10px 0 3px; }

/* tool directory on home */
.dir{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:10px; margin-top:12px; }
.dir a{ text-decoration:none; }
.dir .card{ height:100%; }
.dir .c-why{ color:var(--fg-dim); }

/* explain footer */
.explain{ margin-top:26px; padding-top:10px; border-top:1px solid var(--line); font-size:13px; color:var(--fg-dim); max-width:70ch; }
.explain b{ color:var(--fg); }

/* game canvas */
.gamebox{ text-align:center; }
canvas.game{ max-width:100%; height:auto; border:1px solid var(--line); background:#000; image-rendering:pixelated; }

@media print{
  body{ background:#FFF !important; color:#000 !important; text-shadow:none !important; }
  .chrome, nav, .statusline, .explain{ display:none !important; }
  .frame{ border:0 !important; box-shadow:none !important; }
}
@media (prefers-reduced-motion: reduce){ *{ animation:none !important; transition:none !important; } }