/* ===== OldSchool Club — เดสก์ท็อปยุค 98 บนฉากพระอาทิตย์ตกแบบ synthwave (ออกแบบใหม่ ไม่อิงระบบปฏิบัติการใด) ===== */
:root {
  --face: #c9c6d6; --face-hi: #f4f2fb; --face-lo: #7d7894; --face-dk: #23203a;
  --ink: #17142b; --muted: #5d5878;
  --title1: #2b1d6e; --title2: #b43a8c; --title3: #ff9a5a;
  --pink: #ff5aa0; --cyan: #36d1dc; --gold: #ffd34d;
  --font: "Mitr", "Noto Sans Thai", system-ui, sans-serif;
  --pixel: "VT323", ui-monospace, Consolas, monospace;
  color-scheme: light;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { font-family: var(--font); font-size: 15px; color: var(--ink); background: #120c2a; overflow: hidden; -webkit-tap-highlight-color: transparent; }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }
a { color: #3a2bd1; }
.small { font-size: 13px; } .tiny { font-size: 11.5px; } .muted { color: var(--muted); }

/* CRT scanlines + vignette ทับทั้งจอ */
.crt { position: fixed; inset: 0; z-index: 1000; pointer-events: none;
  background: repeating-linear-gradient(rgba(0,0,0,.07) 0 1px, transparent 1px 3px), radial-gradient(ellipse at center, transparent 60%, rgba(0,0,0,.35) 100%); }

/* ---------------------------------------------------------------- boot / shutdown */
#boot { position: fixed; inset: 0; z-index: 900; background: #050505; color: #c8c8c8; padding: 28px 24px; transition: opacity .3s; cursor: pointer; }
#boot.off { opacity: 0; }
#boot pre { margin: 0; font: 22px/1.25 var(--pixel); white-space: pre-wrap; color: #d6d6d6; text-shadow: 0 0 6px rgba(200,255,200,.25); }
.boot-skip { position: absolute; right: 20px; bottom: 16px; font: 18px var(--pixel); color: #777; animation: blink 1s steps(2) infinite; margin: 0; }
@keyframes blink { 50% { opacity: 0; } }
#shutdown { position: fixed; inset: 0; z-index: 900; background: #000; color: #ffb35c; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; font: 30px var(--pixel); text-align: center; }
#shutdown p { margin: 0; } #shutdown .small { font-size: 20px; color: #aaa; }

/* ---------------------------------------------------------------- desktop */
#desktop { position: fixed; inset: 0; overflow: hidden; }
.sky { position: absolute; inset: 0 0 40px; background: linear-gradient(#170f3a 0%, #3b1a63 35%, #a3307c 62%, #ff8a55 74%, #2a0f45 74.2%, #12082a 100%); overflow: hidden; }
.sun { position: absolute; left: 50%; top: 40%; width: min(46vmin, 420px); aspect-ratio: 1; transform: translateX(-50%); border-radius: 50%;
  background: linear-gradient(#ffe36b 10%, #ff9a5a 55%, #ff4fa0 95%);
  -webkit-mask: linear-gradient(#000 52%, transparent 52% 56%, #000 56% 64%, transparent 64% 69%, #000 69% 76%, transparent 76% 82%, #000 82% 88%, transparent 88% 94%, #000 94%);
  mask: linear-gradient(#000 52%, transparent 52% 56%, #000 56% 64%, transparent 64% 69%, #000 69% 76%, transparent 76% 82%, #000 82% 88%, transparent 88% 94%, #000 94%);
  filter: drop-shadow(0 0 40px rgba(255,120,120,.55)); }
.grid { position: absolute; left: -50%; right: -50%; bottom: 0; height: 26%; transform-origin: top; transform: perspective(260px) rotateX(62deg);
  background: linear-gradient(transparent 0 94%, rgba(255,90,200,.75) 94%) 0 0/100% 34px, linear-gradient(90deg, transparent 0 96%, rgba(54,209,220,.7) 96%) 0 0/48px 100%;
  animation: grid 3.5s linear infinite; }
@keyframes grid { to { background-position: 0 34px, 0 0; } }

/* วอลเปเปอร์อื่น ๆ (สุ่มใน js/wallpapers.js) — synthwave ใช้ .sky เดิม */
.wp-art { position: absolute; inset: 0 0 40px; overflow: hidden; display: none; }
.wp-art svg { display: block; width: 100%; height: 100%; }
#desktop:not([data-wp="synthwave"]) .sky { display: none; }
#desktop:not([data-wp="synthwave"]) .wp-art { display: block; }
#desktop[data-wp="teal"] .wp-art { background: #008080; }
#desktop[data-wp="teal"] .wp-art::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,.18)); }

/* ไอคอนบนเดสก์ท็อป */
.icons { position: absolute; left: 10px; top: 10px; bottom: 50px; display: grid; grid-auto-flow: column; grid-template-rows: repeat(auto-fill, 92px); gap: 4px 6px; align-content: start; z-index: 2; }
.dicon { width: 92px; border: 1px dashed transparent; background: none; padding: 4px 2px; display: flex; flex-direction: column; align-items: center; gap: 3px; color: #fff; position: relative; border-radius: 2px; }
.di-img { width: 46px; height: 46px; display: block; filter: drop-shadow(1px 2px 0 rgba(0,0,0,.45)); }
.di-img svg, .cart-ic svg, .tb-ic svg, .task-ic svg, .sm-ic svg, .mini-ic svg, .start-ic svg { width: 100%; height: 100%; display: block; }
.di-t { font-size: 12.5px; line-height: 1.2; text-align: center; text-shadow: 1px 1px 0 #000, 0 0 4px #000; padding: 0 3px; }
.di-year { position: absolute; top: 0; right: 10px; font: 15px/1 var(--pixel); background: var(--gold); color: #3b2200; padding: 1px 3px; border: 1px solid #3b2200; transform: rotate(8deg); }
.dicon:focus { outline: none; border-color: rgba(255,255,255,.7); }
.dicon:focus .di-t { background: #2b1d6e; }
.dicon:focus .di-img { filter: drop-shadow(1px 2px 0 rgba(0,0,0,.45)) sepia(.6) hue-rotate(200deg) saturate(2); }

/* ---------------------------------------------------------------- windows (ขอบนูน 3 มิติแบบยุค 90) */
.bevel, .win, .btn, .taskbar, .startmenu, .task, .start, .tray, input {
  --b-hi: var(--face-hi); --b-lo: var(--face-lo); }
.win { position: absolute; z-index: 10; width: min(760px, calc(100vw - 140px)); max-height: calc(100% - 64px); display: flex; flex-direction: column;
  background: var(--face); padding: 3px; border: 1px solid; border-color: var(--face-hi) var(--face-dk) var(--face-dk) var(--face-hi);
  box-shadow: inset 1px 1px 0 #fff, inset -1px -1px 0 var(--face-lo), 6px 8px 0 rgba(10,4,30,.35); }
.win.min { display: none; }
#w-readme { width: min(520px, calc(100vw - 140px)); }
#w-account { width: min(460px, calc(100vw - 140px)); }
#w-trash { width: min(420px, calc(100vw - 140px)); }
.tb { display: flex; align-items: center; gap: 6px; height: 28px; padding: 0 3px 0 5px; color: #fff; cursor: default; user-select: none; touch-action: none;
  background: linear-gradient(90deg, #6d6a84, #a9a6bb); }
.win.active .tb { background: linear-gradient(90deg, var(--title1), var(--title2) 65%, var(--title3)); }
.tb-ic { width: 18px; height: 18px; flex: none; }
.tb-t { flex: 1; font-weight: 600; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 1px 1px 0 rgba(0,0,0,.35); }
.tb-b { width: 22px; height: 20px; padding: 0; font: 700 14px/1 var(--font); color: var(--ink); background: var(--face); border: 1px solid; border-color: var(--face-hi) var(--face-dk) var(--face-dk) var(--face-hi); box-shadow: inset -1px -1px 0 var(--face-lo); }
.tb-b:active { border-color: var(--face-dk) var(--face-hi) var(--face-hi) var(--face-dk); box-shadow: inset 1px 1px 0 var(--face-lo); }
.wb { overflow: auto; padding: 16px 18px 14px; background: var(--face); }

/* welcome */
.hero { display: flex; align-items: center; gap: 16px; margin-bottom: 14px; }
.hero-logo { width: 72px; height: 72px; flex: none; border: 2px solid var(--face-dk); background: linear-gradient(135deg, #2b1d6e, #b43a8c 60%, #ff9a5a); box-shadow: 4px 4px 0 var(--face-dk); position: relative; image-rendering: pixelated; }
.hero-logo::before { content: "OS"; position: absolute; inset: 0; display: grid; place-items: center; font: 46px/1 var(--pixel); color: #fff; text-shadow: 3px 3px 0 #2b1d6e; }
.hero-logo::after { content: ""; position: absolute; right: 6px; bottom: 6px; width: 10px; height: 10px; background: var(--gold); box-shadow: -14px 0 0 var(--cyan), -28px 0 0 var(--pink); }
.brand { margin: 0; font: 54px/0.9 var(--pixel); letter-spacing: .02em; color: #2b1d6e; text-shadow: 3px 3px 0 #ff9ccf; }
.brand span { color: #b43a8c; text-shadow: 3px 3px 0 #ffd9a8; }
.tag { margin: 6px 0 0; color: #3e3858; font-size: 14px; }
.login-box { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; margin: 4px 0 16px; background: #fffbe9;
  border: 1px solid; border-color: var(--face-dk) var(--face-hi) var(--face-hi) var(--face-dk); box-shadow: inset 1px 1px 0 var(--face-lo); flex-wrap: wrap; }
.login-box p { margin: 2px 0 0; }
.login-box.in { background: #ecfff3; }
.me { display: flex; align-items: center; gap: 10px; }
.me-av { width: 42px; height: 42px; border: 2px solid var(--face-dk); background: #7c5cff center/cover; color: #fff; display: grid; place-items: center; font-weight: 600; font-size: 20px; }
.sec { font: 30px/1 var(--pixel); color: #2b1d6e; margin: 0 0 10px; letter-spacing: .02em; }
.carts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.cart { display: flex; flex-direction: column; gap: 8px; padding: 12px; background: #fff; border: 2px solid var(--face-dk); box-shadow: 5px 5px 0 var(--accent); position: relative; transition: transform .12s, box-shadow .12s; }
.cart:hover { transform: translate(-2px, -2px); box-shadow: 7px 7px 0 var(--accent); }
.cart-top { display: flex; gap: 10px; align-items: center; }
.cart-ic { width: 52px; height: 52px; flex: none; }
.cart-h h3 { margin: 0; font-size: 19px; line-height: 1.15; }
.year { font: 22px/1 var(--pixel); color: #fff; background: var(--accent); padding: 0 5px; }
.era { display: block; font-size: 12px; color: var(--muted); }
.cart-d { margin: 0; font-size: 13.5px; line-height: 1.5; color: #39344f; flex: 1; }
.chips { display: flex; flex-wrap: wrap; gap: 4px; }
.chip { font-size: 11.5px; padding: 1px 7px; border: 1px solid #b9b5c9; background: #f3f1fa; color: #4a4560; }
.chip.ok { background: #e6ffef; border-color: #4fbf78; color: #11683a; }
.chip.warn { background: #fff4e0; border-color: #e1a24a; color: #8a5300; }
.chip.on { background: #e9fbff; border-color: #36b3c6; color: #0b6474; }
.foot { margin: 14px 0 0; }

/* buttons */
.btn { min-height: 34px; padding: 4px 14px; background: var(--face); border: 1px solid; border-color: var(--face-hi) var(--face-dk) var(--face-dk) var(--face-hi);
  box-shadow: inset -1px -1px 0 var(--face-lo), inset 1px 1px 0 #fff; font-weight: 500; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.btn:active { border-color: var(--face-dk) var(--face-hi) var(--face-hi) var(--face-dk); box-shadow: inset 1px 1px 0 var(--face-lo); transform: translate(1px, 1px); }
.btn:focus-visible { outline: 1px dotted #000; outline-offset: -5px; }
.btn:disabled { color: #8b879c; text-shadow: 1px 1px 0 #fff; cursor: default; }
.btn.play { background: linear-gradient(var(--face-hi), var(--face)); font-weight: 600; }
.btn.play:hover { background: var(--accent); color: #fff; }
.btn.google { background: #fff; min-height: 40px; }
.btn.danger { color: #a3121b; }
.g-ic { width: 18px; height: 18px; flex: none; background: conic-gradient(from -45deg, #ea4335 0 25%, #fbbc05 0 50%, #34a853 0 75%, #4285f4 0); border-radius: 50%;
  -webkit-mask: radial-gradient(circle, transparent 4px, #000 4.5px); mask: radial-gradient(circle, transparent 4px, #000 4.5px); }
input { width: 100%; padding: 6px 8px; background: #fff; border: 1px solid; border-color: var(--face-dk) var(--face-hi) var(--face-hi) var(--face-dk); box-shadow: inset 1px 1px 0 var(--face-lo); margin: 6px 0; }

/* notepad / account / trash */
.wb.note { background: #fff; padding: 10px 12px; }
.wb.note pre { margin: 0; font: 18px/1.3 var(--pixel); white-space: pre-wrap; color: #111; }
.kv { display: flex; justify-content: space-between; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--face-lo); }
.apps-t { width: 100%; border-collapse: collapse; margin: 10px 0; background: #fff; font-size: 13.5px; }
.apps-t th, .apps-t td { text-align: left; padding: 6px 8px; border: 1px solid #b9b5c9; }
.apps-t th { background: #e7e4f2; }
.mini-ic { width: 18px; height: 18px; display: inline-block; vertical-align: -4px; margin-right: 6px; }
.acts { display: flex; justify-content: flex-end; gap: 8px; margin: 8px 0; }
.danger-zone { margin-top: 12px; border: 1px solid #c4404b; padding: 8px 12px 12px; }
.danger-zone legend { color: #a3121b; font-weight: 600; padding: 0 4px; }
.danger-zone p { margin: 4px 0; }
.files { list-style: none; margin: 0 0 10px; padding: 6px; background: #fff; border: 1px solid; border-color: var(--face-dk) var(--face-hi) var(--face-hi) var(--face-dk); font-size: 13.5px; }
.files li { padding: 4px 4px; }
.files li:hover { background: #2b1d6e; color: #fff; }

/* ---------------------------------------------------------------- taskbar + start */
.taskbar { position: absolute; left: 0; right: 0; bottom: 0; height: 40px; z-index: 500; display: flex; align-items: center; gap: 6px; padding: 3px 4px calc(3px + env(safe-area-inset-bottom));
  background: var(--face); border-top: 1px solid var(--face-hi); box-shadow: inset 0 1px 0 #fff, 0 -1px 0 var(--face-lo); box-sizing: content-box; }
.start { height: 32px; display: flex; align-items: center; gap: 6px; padding: 0 10px; font-weight: 600; background: var(--face); border: 1px solid; border-color: var(--face-hi) var(--face-dk) var(--face-dk) var(--face-hi); box-shadow: inset -1px -1px 0 var(--face-lo), inset 1px 1px 0 #fff; }
.start.on { border-color: var(--face-dk) var(--face-hi) var(--face-hi) var(--face-dk); box-shadow: inset 1px 1px 0 var(--face-lo); }
.start-ic { width: 18px; height: 18px; }
.tasks { flex: 1; min-width: 0; display: flex; gap: 4px; overflow: hidden; }
.task { height: 32px; max-width: 190px; flex: 1 1 0; min-width: 40px; display: flex; align-items: center; gap: 6px; padding: 0 8px; background: var(--face); border: 1px solid; border-color: var(--face-hi) var(--face-dk) var(--face-dk) var(--face-hi); box-shadow: inset -1px -1px 0 var(--face-lo); font-size: 13px; }
.task.on { background: repeating-conic-gradient(#e2e0ec 0 25%, var(--face) 0 50%) 0 0/4px 4px; border-color: var(--face-dk) var(--face-hi) var(--face-hi) var(--face-dk); font-weight: 600; }
.task-ic { width: 16px; height: 16px; flex: none; }
.task-t { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tray { height: 32px; display: flex; align-items: center; gap: 8px; padding: 0 8px; border: 1px solid; border-color: var(--face-lo) var(--face-hi) var(--face-hi) var(--face-lo); font-size: 13px; }
.tray-b { border: 0; background: none; padding: 0; font-size: 15px; }
.tray-user { display: flex; align-items: center; gap: 5px; max-width: 140px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tray-user .dot { width: 8px; height: 8px; border-radius: 50%; background: #2fbf55; box-shadow: 0 0 4px #2fbf55; flex: none; }
.tray-user .dot.off { background: #9a96aa; box-shadow: none; }
.clock { font: 20px/1 var(--pixel); }
.startmenu { position: absolute; left: 4px; bottom: 46px; z-index: 600; display: flex; min-width: 270px; background: var(--face); border: 1px solid; border-color: var(--face-hi) var(--face-dk) var(--face-dk) var(--face-hi); box-shadow: inset -1px -1px 0 var(--face-lo), inset 1px 1px 0 #fff, 4px 4px 0 rgba(0,0,0,.3); padding: 3px; }
.sm-side { width: 30px; background: linear-gradient(0deg, var(--title1), var(--title2) 60%, var(--title3)); color: #fff; writing-mode: vertical-rl; transform: rotate(180deg); font: 24px/30px var(--pixel); padding: 8px 0; letter-spacing: .05em; }
.sm-side b { color: var(--gold); font-weight: 400; margin-top: 4px; }
.sm-items { flex: 1; display: flex; flex-direction: column; padding: 2px; }
.sm-i { display: flex; align-items: center; gap: 10px; text-align: left; border: 0; background: none; padding: 6px 10px; font-size: 14px; }
.sm-i:hover, .sm-i:focus { background: #2b1d6e; color: #fff; outline: none; }
.sm-ic { width: 26px; height: 26px; flex: none; }
.sm-sep { height: 0; border-top: 1px solid var(--face-lo); border-bottom: 1px solid #fff; margin: 3px 2px; }

.toast { position: fixed; left: 50%; bottom: 60px; transform: translateX(-50%); z-index: 950; max-width: calc(100vw - 32px); padding: 8px 14px; background: #fffbe0; color: #2a2400; border: 1px solid #000; box-shadow: 3px 3px 0 rgba(0,0,0,.4); font-size: 14px; }

/* ---------------------------------------------------------------- จอเล็ก / มือถือ: เลื่อนเป็นหน้าเดียว */
@media (max-width: 760px) {
  body { overflow: auto; }
  #desktop { position: relative; inset: auto; min-height: 100dvh; padding: 12px 10px 64px; }
  .sky, .wp-art { position: fixed; inset: 0; }
  .icons { position: relative; inset: auto; display: grid; grid-auto-flow: row; grid-template-columns: repeat(4, 1fr); grid-template-rows: none; gap: 6px 2px; margin-bottom: 12px; }
  .dicon { width: auto; }
  .di-year { right: 4px; }
  .win, #w-readme, #w-account, #w-trash { position: relative; left: auto !important; top: auto !important; width: 100%; max-height: none; margin-bottom: 14px; }
  .tb { touch-action: auto; }
  .carts { grid-template-columns: 1fr; }
  .brand { font-size: 44px; }
  .hero-logo { width: 58px; height: 58px; } .hero-logo::before { font-size: 36px; }
  .taskbar { position: fixed; }
  .startmenu { position: fixed; }
  .task-t { display: none; } .task { flex: 0 0 40px; justify-content: center; }
  .tray-user { max-width: 90px; }
}
@media (min-width: 761px) and (max-width: 1000px) { .carts { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .grid { animation: none; } .cart, .cart:hover { transition: none; transform: none; } }