/* =========================================================
   RETRO PERSONAL PAGE — Geocities × MySpace × Windows XP
   Edit textual content in /config/content.json
   ========================================================= */

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  font-family: Tahoma, "Trebuchet MS", Verdana, sans-serif;
  font-size: 12px;
  color: #000;
  overflow: hidden;
  user-select: none;
  cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16'><path d='M0 0 L0 12 L4 9 L6 14 L8 13 L6 9 L11 9 Z' fill='white' stroke='black' stroke-width='1'/></svg>") 0 0, auto;
}

a { color: #0000ee; }
a:visited { color: #551a8b; }

/* ===================== DESKTOP ===================== */
#desktop {
  position: fixed; inset: 0 0 30px 0;
  background: url("../img/bliss-bg.jpg") center/cover no-repeat #3a6ea5;
  overflow: hidden;
}

.shake { animation: shake 0.5s; }
@keyframes shake {
  0%,100% { transform: translate(0,0); }
  10% { transform: translate(-8px,4px); } 20% { transform: translate(8px,-6px); }
  30% { transform: translate(-10px,-4px); } 40% { transform: translate(10px,6px); }
  50% { transform: translate(-6px,8px); } 60% { transform: translate(6px,-8px); }
  70% { transform: translate(-4px,4px); } 80% { transform: translate(4px,-4px); }
  90% { transform: translate(-2px,2px); }
}

/* ===================== DESKTOP ICONS ===================== */
#icons {
  position: absolute; top: 12px; left: 12px;
  display: grid; grid-auto-rows: 88px;
  grid-template-columns: repeat(auto-fill, 84px); gap: 4px;
}
.icon {
  width: 80px; padding: 6px 2px; text-align: center;
  color: #fff; cursor: pointer; border-radius: 3px;
  text-shadow: 1px 1px 2px #000, 0 0 4px #000;
}
.icon:hover { background: rgba(49,106,197,0.35); outline: 1px dotted #fff; }
.icon.active { background: rgba(49,106,197,0.65); outline: 1px dotted #fff; }
.icon .ico {
  width: 48px; height: 48px; margin: 0 auto 4px;
  display: flex; align-items: center; justify-content: center;
  font-size: 36px; line-height: 1;
  filter: drop-shadow(1px 1px 0 rgba(0,0,0,0.4));
}
.icon .lbl { font-size: 11px; line-height: 1.2; word-wrap: break-word; }

/* ===================== WINDOWS ===================== */
.win {
  position: absolute;
  min-width: 260px; min-height: 140px;
  background: #ece9d8;
  border: 1px solid #0831d9;
  border-radius: 8px 8px 0 0;
  box-shadow: 2px 2px 0 #000, 0 8px 24px rgba(0,0,0,0.4);
  display: flex; flex-direction: column;
  resize: both; overflow: hidden;
}
.win.maximized { top:0!important; left:0!important; width:100%!important; height:calc(100% - 30px)!important; border-radius:0; resize: none; }
.win-title {
  height: 28px; padding: 0 4px 0 6px;
  background: linear-gradient(to bottom,
    #0058e9 0%, #3389ec 8%, #2275df 40%, #1c64cd 88%, #2865d2 100%);
  color: #fff; font-weight: bold; font-size: 12px;
  display: flex; align-items: center; gap: 4px;
  cursor: grab; user-select: none;
  text-shadow: 1px 1px 0 rgba(0,0,0,0.35);
}
.win-title:active { cursor: grabbing; }
.win-title .t-ico { font-size: 14px; }
.win-title .t-lbl { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.win-title button {
  width: 22px; height: 21px; border: 1px solid #003;
  font-family: Tahoma; font-weight: bold; font-size: 11px;
  color: #fff; cursor: pointer;
  background: linear-gradient(to bottom, #6ea9ee, #2566cd);
  box-shadow: inset 1px 1px 0 rgba(255,255,255,0.4);
  border-radius: 3px;
}
.win-title button.close { background: linear-gradient(to bottom,#ec8174,#b8331a); }
.win-title button:hover { filter: brightness(1.15); }

.win-body {
  flex: 1; overflow: auto;
  background: #fff;
  border: 2px inset #ece9d8;
  margin: 2px;
  padding: 10px;
  font-size: 12px;
  cursor: auto;
  user-select: text;
}
.win-body h2 { font-size: 14px; margin-bottom: 8px; color: #0831d9; }
.win-body p { margin: 6px 0; line-height: 1.45; }

/* Notepad-like */
.notepad-body { background: #fff; font-family: "Lucida Console","Courier New",monospace; font-size: 12px; white-space: pre-wrap; }

/* Word-like */
.word-body .exp { padding: 8px; border-bottom: 1px dashed #999; }
.word-body .exp:last-child { border: 0; }
.word-body .exp .y { font-family: "Times New Roman", serif; color: #b8331a; font-weight: bold; }
.word-body .exp .t { font-size: 14px; font-weight: bold; }

/* Photo viewer */
.photo-body { background: #2b2b2b; display:flex; align-items:center; justify-content:center; padding: 6px; }
.photo-body img { max-width: 100%; max-height: 100%; image-rendering: pixelated; border: 2px solid #fff; }

/* Recycle bin */
.bin-body { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; padding:18px; text-align:center; }
.bin-body .big { font-size: 56px; }

/* ===================== MSN WINDOW ===================== */
.msn-title { background: linear-gradient(to bottom,#6cb0f7,#1a6fd1); }
.msn-body { padding: 0; display: flex; flex-direction: column; }
.msn-head {
  display: flex; gap: 8px; padding: 6px 8px;
  background: linear-gradient(to bottom,#eaf3ff,#cfe1f7);
  border-bottom: 1px solid #7aa8d8;
}
.msn-head .avatar { width: 40px; height: 40px; border: 2px solid #fff; box-shadow: 0 0 0 1px #4682c8; overflow:hidden; }
.msn-head .avatar img { width:100%; height:100%; object-fit:cover; image-rendering: pixelated; }
.msn-head .meta { font-size: 11px; }
.msn-head .meta b { font-size: 13px; color: #003; }
.msn-conv { flex: 1; padding: 8px; overflow-y: auto; background: #fff; font-size: 12px; }
.msn-msg { margin: 4px 0; }
.msn-msg b.visitor { color: #c0392b; }
.msn-msg b.me { color: #2c5fad; }
.msn-msg .typing::after {
  content: "▌"; animation: blink 0.8s steps(1) infinite;
}
@keyframes blink { 50% { opacity: 0; } }
.msn-input {
  border-top: 1px solid #7aa8d8; padding: 6px; display:flex; gap: 6px;
  background: linear-gradient(to bottom,#eaf3ff,#cfe1f7);
}
.msn-input input {
  flex:1; border: 1px solid #7aa8d8; padding: 4px; font: 12px Tahoma;
}
.msn-input button {
  padding: 2px 10px; font: 11px Tahoma; cursor:pointer;
  background: linear-gradient(to bottom,#fff,#cfe1f7);
  border: 1px solid #7aa8d8; border-radius: 3px;
}
.msn-input button.nudge { background: linear-gradient(to bottom,#ffe98a,#f5a623); font-weight: bold; }

/* ===================== MYSPACE WINDOW ===================== */
.ie-chrome { display:flex; flex-direction:column; height:100%; }
.ie-toolbar {
  display:flex; gap:4px; padding: 4px 6px;
  background: linear-gradient(to bottom,#f5f4ea,#dcd9c0);
  border-bottom: 1px solid #8a8676;
  font-size: 11px; align-items:center;
}
.ie-toolbar .url {
  flex:1; background:#fff; border: 1px inset #ccc; padding: 2px 4px;
  font: 11px "Lucida Console", monospace; color: #003;
}
.ie-toolbar .go {
  padding: 1px 8px; border:1px outset #d4d0c8; background:#ece9d8; font: 11px Tahoma; cursor:pointer;
}
.myspace {
  flex:1; overflow:auto;
  background:
    repeating-linear-gradient(45deg, #ffe4f1 0 6px, #ffd0e5 6px 12px);
  font-family: Verdana, sans-serif; color:#222;
  padding: 10px;
}
.ms-header {
  background: linear-gradient(90deg,#ff66c4,#7a5cff,#33b5ff);
  color:#fff; padding: 12px; border: 3px ridge #fff; text-align:center;
  text-shadow: 2px 2px 0 #000, 0 0 6px #ff00ff;
  font-family: "Comic Sans MS","Comic Neue",cursive;
  position: relative;
}
.ms-header h1 { font-size: 28px; letter-spacing: 2px; }
.ms-header .mood { font-size: 13px; margin-top: 4px; }
.ms-header .stars { font-size: 18px; letter-spacing: 6px; animation: rainbow 3s linear infinite; }
@keyframes rainbow {
  0%{filter:hue-rotate(0deg);} 100%{filter:hue-rotate(360deg);}
}

.ms-grid {
  display:grid; grid-template-columns: 200px 1fr; gap: 10px; margin-top: 10px;
}
.ms-card {
  background: #fff; border: 3px ridge #ff66c4; padding: 8px;
}
.ms-card h3 {
  background: linear-gradient(to right,#ff66c4,#7a5cff);
  color:#fff; padding: 3px 6px; margin: -8px -8px 6px;
  font: bold 12px Verdana; text-shadow: 1px 1px 0 #000;
}
.ms-pic { text-align:center; }
.ms-pic img { width: 140px; height: 140px; border: 4px double #7a5cff; image-rendering: pixelated; }
.ms-pic .nick { font: bold 14px "Comic Sans MS", cursive; color:#7a5cff; margin-top:6px; }
.ms-pic .online::before { content:"●"; color: #2ecc40; margin-right: 4px; }
.ms-counter { font: bold 14px "Courier New"; color:#000; background:#000; color:#0f0; padding: 3px 6px; display:inline-block; letter-spacing: 2px; }

.ms-about { font-family: "Comic Sans MS","Comic Neue",cursive; line-height: 1.5; }
.ms-marquee {
  background:#000; color:#0f0; padding: 4px; font: 12px "Courier New";
  border: 2px inset #555; margin: 8px 0;
}

.ms-top8 { display:grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.ms-friend { text-align:center; padding: 6px; background: #fff8fc; border: 1px solid #ff66c4; }
.ms-friend .av { font-size: 28px; }
.ms-friend .nm { font: bold 11px Tahoma; color:#7a5cff; }
.ms-friend .sb { font-size: 10px; color:#888; }

.winamp {
  background: linear-gradient(to bottom,#3a3a3a,#1a1a1a);
  color:#0f0; padding: 6px 8px; font: bold 11px "Courier New";
  display:flex; align-items:center; gap:8px; border: 2px outset #555;
  margin-top: 8px;
}
.winamp .eq { display:flex; gap:2px; align-items:flex-end; height: 18px; }
.winamp .eq span {
  width:3px; background:#0f0; animation: eq 0.9s ease-in-out infinite;
}
.winamp .eq span:nth-child(1){animation-delay:0s;}
.winamp .eq span:nth-child(2){animation-delay:.1s;}
.winamp .eq span:nth-child(3){animation-delay:.2s;}
.winamp .eq span:nth-child(4){animation-delay:.3s;}
.winamp .eq span:nth-child(5){animation-delay:.4s;}
.winamp .eq span:nth-child(6){animation-delay:.5s;}
.winamp .eq span:nth-child(7){animation-delay:.6s;}
@keyframes eq { 0%,100%{height:4px;} 50%{height:18px;} }

.uc { display:inline-block; margin: 4px; padding: 3px 8px; background: #ffd000; color:#000;
  font:bold 11px Verdana; border: 2px solid #000; transform: rotate(-3deg);
  animation: blink2 1s steps(2) infinite;
}
@keyframes blink2 { 50%{background:#000; color:#ffd000;} }

.guestbook .gb-entry { border-bottom: 1px dotted #ff66c4; padding: 4px 0; font-size: 11px; }
.guestbook .gb-entry b { color:#7a5cff; }
.guestbook .gb-entry .d { color:#888; font-size: 10px; }

.ms-links a {
  display:inline-block; margin: 2px; padding: 2px 6px;
  background:#fff; border: 2px outset #7a5cff; color:#7a5cff; text-decoration:none;
  font: bold 11px Tahoma;
}
.ms-links a:hover { background:#7a5cff; color:#fff; }

/* ===================== GAME ===================== */
.game-body { background: #008080; padding: 0; position: relative; overflow:hidden; }
.game-hud {
  position:absolute; top:0; left:0; right:0;
  background: linear-gradient(to bottom,#3389ec,#1c64cd);
  color:#fff; padding: 4px 8px; font: bold 12px Tahoma;
  display:flex; gap: 12px; align-items:center; z-index: 9999;
  text-shadow: 1px 1px 0 #000;
}
.game-hud .spacer { flex:1; }
.game-hud button {
  padding: 2px 10px; font: bold 11px Tahoma; cursor:pointer;
  background: linear-gradient(to bottom,#fff,#cfe1f7);
  border: 1px solid #003; border-radius: 3px; color:#000;
  text-shadow: none;
}
.game-area { position:absolute; inset:28px 0 0 0; overflow:hidden; }

.popup {
  position:absolute; min-width:160px; max-width: 240px;
  background:#ece9d8; border:1px solid #0831d9; border-radius: 6px 6px 0 0;
  box-shadow: 2px 2px 0 #000;
  font: 11px Tahoma;
}
.popup .pt {
  background: linear-gradient(to bottom,#0058e9,#1c64cd);
  color:#fff; padding: 2px 4px; font-weight:bold; display:flex; align-items:center;
  text-shadow: 1px 1px 0 rgba(0,0,0,0.4);
}
.popup .pt span { flex:1; font-size: 11px; }
.popup .pt button {
  width: 18px; height: 16px; border: 1px solid #003; font: bold 10px Tahoma;
  color:#fff; cursor:pointer;
  background: linear-gradient(to bottom,#ec8174,#b8331a); border-radius: 2px;
}
.popup .pb { padding: 8px; background: #fff; border: 1px inset #ccc; margin: 2px;
  display:flex; gap: 6px; align-items:center;
}
.popup .pb .emoji { font-size: 28px; }
.popup .pb .txt { font-size: 11px; line-height: 1.35; }
.popup .pb .txt b { color: #c0392b; }

.bsod {
  position:absolute; inset:28px 0 0 0; background:#0000aa; color:#fff;
  font: 13px "Lucida Console","Courier New",monospace;
  padding: 30px; z-index: 9998; display:none; white-space: pre-wrap;
}
.bsod.show { display:block; }
.bsod .head { background:#fff; color:#0000aa; padding: 2px 8px; display:inline-block; }

/* ===================== TASKBAR ===================== */
#taskbar {
  position: fixed; left:0; right:0; bottom:0; height:30px;
  background: linear-gradient(to bottom,
    #245edb 0%, #3f8cf4 9%, #245edb 18%, #245edb 92%, #1941a5 100%);
  display:flex; align-items:center; gap: 4px; padding: 0 4px;
  border-top: 1px solid #082c70;
  z-index: 99999;
  color: #fff; font: bold 12px Tahoma;
  text-shadow: 1px 1px 0 rgba(0,0,0,0.4);
}
#start {
  height: 24px; padding: 0 14px 0 8px;
  background: linear-gradient(to bottom,#3ec137 0%,#2a8a1f 100%);
  border: 1px solid #0a5a0a; border-radius: 4px 12px 12px 4px;
  color:#fff; font: italic bold 13px Tahoma; cursor:pointer;
  display:flex; align-items:center; gap:6px;
}
#start::before { content:"⊞"; font-size: 16px; }
#start:hover { filter: brightness(1.1); }

#tb-windows { flex:1; display:flex; gap:4px; overflow:hidden; }
.tb-item {
  height: 22px; max-width: 180px; padding: 0 8px;
  background: linear-gradient(to bottom,#3f8cf4,#1a47b0);
  border: 1px solid #082c70; border-radius: 3px;
  display:flex; align-items:center; gap:4px; cursor:pointer;
  color:#fff; font-size: 11px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.tb-item.active { background: linear-gradient(to bottom,#1a47b0,#3f8cf4); box-shadow: inset 1px 1px 2px #000; }
.tb-item:hover { filter: brightness(1.1); }

#tray {
  display:flex; align-items:center; gap: 8px;
  background: linear-gradient(to bottom,#149ce8,#0a6cb8);
  height: 24px; padding: 0 8px; border-left: 1px solid #1941a5; border-radius: 3px;
  font-size: 11px;
}
#sound-toggle { cursor:pointer; font-size: 14px; }
#clock { font-variant-numeric: tabular-nums; }

/* ===================== START MENU ===================== */
#start-menu {
  position:fixed; left: 0; bottom: 30px; width: 280px;
  background: linear-gradient(to bottom,#fff,#dfe9f9);
  border: 2px solid #0831d9; border-bottom: none; border-radius: 8px 8px 0 0;
  display:none; z-index: 100000; padding-bottom: 6px;
  box-shadow: 0 -4px 12px rgba(0,0,0,0.4);
}
#start-menu.open { display:block; }
#start-menu .head {
  background: linear-gradient(to bottom,#0058e9,#1c64cd);
  color:#fff; padding: 8px; font: bold 14px Tahoma; display:flex; gap:8px; align-items:center;
  border-radius: 6px 6px 0 0;
}
#start-menu .head img { width: 32px; height: 32px; border: 2px solid #fff; image-rendering: pixelated;}
#start-menu ul { list-style:none; padding: 4px; }
#start-menu li {
  padding: 6px 10px; cursor:pointer; display:flex; gap:8px; align-items:center;
  font: 12px Tahoma; color:#000;
}
#start-menu li:hover { background:#316ac5; color:#fff; }

/* ===================== BOOT SPLASH ===================== */
#boot {
  position:fixed; inset:0; background:#000; color:#fff;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  z-index:100001; font-family: Tahoma;
}
#boot .logo { font: italic bold 42px Tahoma; color:#fff; margin-bottom:18px; }
#boot .logo span { color:#ff8000; }
#boot .bar { width: 220px; height: 16px; background: #000; border: 1px solid #444; padding: 2px; }
#boot .bar i { display:block; height: 100%; width:0; background: linear-gradient(to right,#0058e9,#3389ec); animation: fill 2.4s linear forwards; }
@keyframes fill { to { width: 100%; } }
#boot.gone { display:none; }

/* ===================== FIX: game body fills window ===================== */
.win-body.game-body {
  padding: 0;
  margin: 2px;
  position: relative;
  background: #008080;
  overflow: hidden;
  border: 2px inset #ece9d8;
}

/* ===================== WINAMP PLAYER (clickable) ===================== */
.winamp { cursor: pointer; user-select: none; }
.winamp:hover { filter: brightness(1.15); }
.winamp .play-btn {
  display:inline-block; width:18px; text-align:center;
  background:#0f0; color:#000; font-weight:bold;
  border:1px outset #0f0; padding:0 2px;
}
.winamp .eq.paused span { animation-play-state: paused; height: 4px; }

.ms-action {
  display:block; width:100%; padding:8px;
  background: linear-gradient(to bottom,#fff,#cfe1f7);
  border: 2px outset #7a5cff; color:#7a5cff;
  font: bold 13px Tahoma; cursor:pointer;
}
.ms-action:hover { background:#7a5cff; color:#fff; }

/* ===================== MOBILE ===================== */
body.is-mobile #icons,
body.is-mobile #taskbar,
body.is-mobile #start-menu {
  display: none !important;
}
body.is-mobile #desktop {
  inset: 0 !important;
  background: #000;
}
body.is-mobile .win.mobile-fs,
body.is-mobile .win.maximized {
  top: 0 !important; left: 0 !important;
  width: 100vw !important; height: 100vh !important;
  border-radius: 0; border: none;
  box-shadow: none; resize: none;
}
body.is-mobile #tray { display:flex; position:fixed; top:6px; right:6px; z-index: 200000;
  background: rgba(0,0,0,0.6); border-radius: 6px; padding: 4px 8px; color:#fff;
  border:none;
}
body.is-mobile #clock { display:none; }
body.is-mobile #sound-toggle { font-size: 20px; }

@media (max-width: 820px) {
  html, body { overflow: hidden; }
  .ms-grid { grid-template-columns: 1fr !important; }
  .ms-pic img { width: 120px; height: 120px; }
  .ms-top8 { grid-template-columns: repeat(2, 1fr) !important; }
  .ms-header h1 { font-size: 22px; }
  .win-body { padding: 6px; }
  .msn-body-wrap, .game-body { font-size: 13px; }
  .msn-input input { font-size: 16px; } /* evita zoom iOS */
  /* boot splash su mobile */
  #boot .logo { font-size: 28px; text-align: center; line-height: 1.2; padding: 0 12px; }
  #boot .logo sup { font-size: 11px !important; }
  /* game HUD compatto */
  .game-hud { flex-wrap: wrap; gap: 6px; font-size: 11px; padding: 4px; }
  .game-hud .spacer { display:none; }
  .game-hud button { padding: 2px 6px; font-size: 10px; }
  .game-area { inset: 44px 0 0 0; }
  .bsod { inset: 44px 0 0 0; padding: 16px; font-size: 12px; }
  .popup { min-width: 130px; max-width: 200px; }
  .popup .pb .emoji { font-size: 22px; }
  .popup .pb .txt { font-size: 10px; }
}

/* MSN body wrap fix */
.win-body.msn-body-wrap { padding: 0; display:flex; flex-direction:column; }
.win-body.msn-body-wrap > .msn-body { flex:1; display:flex; flex-direction:column; min-height: 0; }

/* Mobile fullscreen window: forza dimensioni a tutto schermo (anche con resize disattivato) */
body.is-mobile .win.mobile-fs {
  top: 0 !important; left: 0 !important;
  width: 100vw !important; height: 100vh !important;
  max-width: 100vw; max-height: 100vh;
  border-radius: 0; border: none; box-shadow: none; resize: none;
  min-width: 0; min-height: 0;
}
body.is-mobile .win.mobile-fs .win-title { border-radius: 0; }

/* ===================== GUESTBOOK FORM ===================== */
.gb-form {
  position: relative;
  margin-top: 8px; padding-top: 6px;
  border-top: 1px dashed #ff66c4;
  display: grid; gap: 4px;
}
.gb-form input[type="text"], .gb-form textarea {
  width: 100%; padding: 4px;
  border: 1px inset #ff66c4; background: #fff;
  font: 11px Tahoma; resize: vertical;
}
.gb-form button {
  justify-self: start; padding: 3px 12px;
  background: linear-gradient(to bottom,#ff66c4,#7a5cff);
  color: #fff; border: 2px outset #7a5cff; cursor: pointer;
  font: bold 11px Tahoma;
}
.gb-form .gb-msg { font-size: 10px; color: #7a5cff; margin-left: 6px; }

/* ===================== SNAKE ===================== */
.snake-body { background: #c0c0c0; padding: 0; }
.snake-wrap {
  display: flex; flex-direction: column; height: 100%;
  background: #c0c0c0;
}
.snake-hud {
  background: linear-gradient(to bottom,#3389ec,#1c64cd);
  color:#fff; padding: 4px 8px; font: bold 12px Tahoma;
  display:flex; gap: 12px; align-items:center;
  text-shadow: 1px 1px 0 #000;
}
.snake-hud .spacer { flex:1; }
.snake-hud button {
  padding: 2px 10px; font: bold 11px Tahoma; cursor:pointer;
  background: linear-gradient(to bottom,#fff,#cfe1f7);
  border: 1px solid #003; border-radius: 3px; color:#000; text-shadow:none;
}
.snake-stage {
  position: relative; flex: 1;
  display: flex; align-items: center; justify-content: center;
  background: #6b7d2a; padding: 6px; min-height: 180px;
}
.snake-stage canvas {
  background: #9bbc0f;
  border: 4px solid #1a1a1a;
  box-shadow: inset 0 0 0 2px #6b7d2a;
  image-rendering: pixelated;
  max-width: 100%; max-height: 100%;
}
.snake-overlay {
  position: absolute; inset: 6px;
  background: rgba(15,56,15,0.92); color: #9bbc0f;
  font: 13px "Lucida Console", monospace;
  display: none; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 20px;
}
.snake-overlay.show { display: flex; }
.snake-overlay .head {
  background: #9bbc0f; color: #0f380f; padding: 2px 12px;
  font-weight: bold; margin-bottom: 10px;
}
.snake-pad {
  display: none;
  background: #1a1a1a; padding: 8px;
  text-align: center;
}
.snake-pad button {
  width: 50px; height: 44px; margin: 2px;
  background: linear-gradient(to bottom,#444,#222);
  border: 2px outset #666; color: #9bbc0f;
  font-size: 20px; cursor: pointer; border-radius: 6px;
}
.snake-pad button:active { border-style: inset; }
.snake-pad > div { display: flex; justify-content: center; gap: 4px; }

.snake-board, .game-board {
  background: #fff; border-top: 2px ridge #7a5cff;
  padding: 6px 10px; max-height: 130px; overflow: auto;
  font: 11px Tahoma;
}
.snake-board .hd, .game-board .hd {
  font-weight: bold; color: #7a5cff; margin-bottom: 4px;
  border-bottom: 1px dotted #ccc;
}
.snake-board ol, .game-board ol {
  list-style: decimal inside; padding: 0; margin: 0;
}
.snake-board li, .game-board li {
  display: flex; justify-content: space-between;
  padding: 1px 0; border-bottom: 1px dotted #eee;
}
.snake-board li .nm, .game-board li .nm { color: #333; }
.snake-board li .sc, .game-board li .sc { font-weight: bold; color: #b8331a; }

/* game popup con classifica in fondo: lasciamo spazio sotto */
.win-body.game-body { position: relative; }
.win-body.game-body .game-area { inset: 28px 0 130px 0; }
.win-body.game-body .bsod { inset: 28px 0 130px 0; }
.win-body.game-body .game-board {
  position: absolute; left: 0; right: 0; bottom: 0;
  border-top: 2px ridge #1c64cd; background: #ece9d8;
}

@media (max-width: 820px) {
  .snake-pad { display: block; }
  .snake-board, .game-board { max-height: 100px; }
  .win-body.game-body .game-area { inset: 44px 0 100px 0; }
  .win-body.game-body .bsod { inset: 44px 0 100px 0; }
}



/* =========================================================
   MYSPACE — palette chiara, basica, con Comic Sans
   e accenti blu elettrico (#0033ff / #1e90ff). Stile
   "personal page 2003" pulito ma nostalgico.
   ========================================================= */

.myspace {
  background: #ffffff;
  color: #222;
  font-family: "Comic Sans MS", "Comic Sans", "Chalkboard SE", cursive;
  font-size: 13px;
  line-height: 1.5;
}
.myspace::before { content: none; }

/* Header chiaro con titolo blu elettrico */
.ms-header {
  background: linear-gradient(180deg, #eaf2ff 0%, #ffffff 100%);
  color: #0033ff;
  border: 1px solid #c7d4ea;
  box-shadow: inset 0 1px 0 #fff;
  padding: 12px 14px;
  text-align: left;
  text-shadow: none;
  outline: none;
}
.ms-header::before, .ms-header::after { content: none; }
.ms-header .stars { display: none; }
.ms-header h1 {
  font: bold 24px/1.1 "Comic Sans MS", cursive;
  letter-spacing: 0.3px;
  color: #0033ff;
  background: none; -webkit-background-clip: initial; background-clip: initial;
  -webkit-text-fill-color: currentColor;
  text-shadow: 1px 1px 0 #c7d4ea;
  margin: 0 0 4px 0;
  display: block;
  border-bottom: 1px dashed #1e90ff;
  padding-bottom: 6px;
}
.ms-header .mood {
  font-family: "Comic Sans MS", cursive;
  font-size: 12px;
  background: transparent; color: #444;
  border: none; padding: 4px 0 0 0;
  display: block;
}
.ms-header .mood::before { content: "» "; color: #1e90ff; font-weight: bold; }

/* Card: pannello bianco, header blu */
.ms-card {
  background: #ffffff;
  color: #222;
  border: 1px solid #c7d4ea;
  box-shadow: 1px 1px 0 #e6ecf7;
  padding: 8px 10px;
}
.ms-card h3 {
  background: #eaf2ff;
  color: #0033ff;
  padding: 3px 8px; margin: -8px -10px 8px;
  font: bold 12px "Comic Sans MS", cursive;
  letter-spacing: 0.5px;
  text-transform: none;
  border-bottom: 1px solid #c7d4ea;
  text-shadow: none;
}

/* Link Contact: blu elettrico classico */
.ms-links a {
  display:block; margin: 0; padding: 3px 0;
  background: none;
  color: #0033ff !important;
  border: none;
  font: 12px "Comic Sans MS", cursive;
  text-decoration: underline;
  text-shadow: none;
  border-bottom: 1px dotted #d0d8e8;
}
.ms-links a:last-child { border-bottom: none; }
.ms-links a:hover { color: #1e90ff !important; background: #f4f8ff; }
.myspace a, .myspace a:visited { color: #0033ff; }
.myspace a:hover { color: #1e90ff; }

/* Foto profilo */
.ms-pic img {
  width: 140px; height: 140px;
  border: 2px solid #0033ff;
  outline: 1px solid #c7d4ea; outline-offset: 2px;
  image-rendering: auto;
  box-shadow: 2px 2px 0 #e6ecf7;
}
.ms-pic .nick {
  font: bold 14px "Comic Sans MS", cursive;
  letter-spacing: 0.3px;
  color: #0033ff;
  text-shadow: none;
  margin-top: 8px;
}
.ms-pic .online { color: #2c9c2c; font-size: 12px; }
.ms-pic .online::before { content: "● "; }

/* Counter LED */
.ms-counter {
  background: #000; color: #1e90ff;
  font: bold 14px "Courier New", monospace;
  padding: 3px 8px; border: 1px solid #0033ff;
  letter-spacing: 4px; display:inline-block;
  text-shadow: 0 0 4px #1e90ff;
}

/* About me — Comic Sans ben in vista */
.ms-about {
  background: #f8fbff;
  color: #222;
  font-family: "Comic Sans MS", cursive;
  font-size: 13px;
  line-height: 1.6;
  padding: 8px 10px;
  border: 1px dashed #1e90ff;
}

/* Marquee */
.ms-marquee {
  background: #0033ff; color: #fff;
  padding: 4px 8px;
  font: bold 12px "Comic Sans MS", cursive;
  border: 1px solid #001a99;
  margin: 8px 0;
  text-shadow: none;
  letter-spacing: 0.3px;
}

/* Top 8 */
.ms-top8 { gap: 6px; }
.ms-friend {
  background: #f8fbff;
  border: 1px solid #c7d4ea;
  color: #222;
  box-shadow: 1px 1px 0 #e6ecf7;
  padding: 6px;
}
.ms-friend .av { font-size: 26px; filter: none; }
.ms-friend .nm { color: #0033ff; font: bold 12px "Comic Sans MS", cursive; text-shadow: none; }
.ms-friend .sb { color: #666; font-size: 11px; }

/* Winamp player */
.winamp {
  background: linear-gradient(to bottom,#eaf2ff,#fff);
  color: #0033ff; border: 1px solid #c7d4ea;
  text-shadow: none;
  font-family: "Comic Sans MS", cursive;
}

/* Guestbook */
.guestbook .gb-entry {
  border-bottom: 1px dotted #c7d4ea;
  color: #222; padding: 6px 0; font-size: 12px;
}
.guestbook .gb-entry b { color: #0033ff; text-shadow: none; }
.guestbook .gb-entry .d { color: #888; font-size: 10px; }
.gb-form { border-top: 1px dashed #1e90ff; padding-top: 8px; }
.gb-form input[type="text"], .gb-form textarea {
  background: #fff; color: #222; border: 1px solid #c7d4ea;
  font-family: "Comic Sans MS", cursive; font-size: 12px;
  padding: 4px 6px;
}
.gb-form input[type="text"]:focus, .gb-form textarea:focus {
  outline: 2px solid #1e90ff;
}
.gb-form button {
  background: linear-gradient(to bottom,#eaf2ff,#c7d4ea);
  color: #0033ff; border: 1px solid #0033ff;
  text-shadow: none;
  padding: 4px 12px;
  font: bold 12px "Comic Sans MS", cursive;
  cursor: pointer;
}
.gb-form button:hover { background: linear-gradient(to bottom,#1e90ff,#0033ff); color:#fff; }

/* Under construction */
.uc {
  background: repeating-linear-gradient(45deg, #ffd84d 0 8px, #000 8px 16px);
  color: #fff; border: 1px solid #000;
  text-shadow: 1px 1px 0 #000;
  font: bold 10px "Comic Sans MS", cursive;
}

/* Badge 88×31 */
.ms-badges {
  display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px;
  justify-content: flex-start;
}
.ms-badge {
  width: 88px; height: 31px;
  display: flex; align-items: center; justify-content: center;
  font: bold 9px Verdana, sans-serif; text-align: center; line-height: 1.1;
  border: 1px solid #000;
  text-shadow: none; color: #fff;
  padding: 0 4px;
  image-rendering: pixelated;
  letter-spacing: 0.4px;
  user-select: none;
}
.ms-badge.b1 { background: linear-gradient(90deg,#0033ff 50%, #fff 50%); color:#fff; }
.ms-badge.b2 { background: linear-gradient(90deg,#fff 50%, #0033ff 50%); color:#0033ff; }
.ms-badge.b3 { background: #1e90ff; color:#fff; }

/* Divider */
.ms-sep {
  height: 1px; margin: 10px 0;
  background: linear-gradient(90deg, transparent, #1e90ff 20%, #1e90ff 80%, transparent);
  border: none;
}

/* Hover */
.ms-card:hover { box-shadow: 1px 1px 0 #e6ecf7, 0 0 0 1px #1e90ff66; }

/* IE toolbar */
.ie-toolbar { background: linear-gradient(to bottom,#eaf2ff,#c7d4ea); color:#0033ff; border-bottom:1px solid #c7d4ea;}
.ie-toolbar .url { background:#fff; color:#222; border:1px solid #c7d4ea; font-family: Verdana, Tahoma; font-size:11px; }
.ie-toolbar .go { background:#0033ff; color:#fff; border:1px solid #001a99; }

/* Mobile */
@media (max-width: 820px) {
  .ms-header h1 { font-size: 20px; }
  .ms-badges .ms-badge { transform: scale(0.92); }
  .ms-counter { font-size: 12px; letter-spacing: 2px; }
}

/* ===================== INVADERS ===================== */
.invaders-body { background: #000; padding: 0; }
.inv-wrap { display:flex; flex-direction:column; height:100%; background:#000; }
.inv-hud {
  background: linear-gradient(to bottom,#111,#000);
  color:#fff; padding: 4px 8px;
  font: bold 12px "Press Start 2P", "Courier New", monospace;
  display:flex; gap: 12px; align-items:center;
  border-bottom: 1px solid #1e90ff;
}
.inv-hud b { color:#1e90ff; }
.inv-hud .spacer { flex:1; }
.inv-hud button {
  padding: 2px 10px; font: bold 11px "Courier New", monospace; cursor:pointer;
  background: #1e90ff; color: #000;
  border: 1px solid #fff; border-radius: 0;
}
.inv-stage {
  position: relative; flex: 1;
  display: flex; align-items: center; justify-content: center;
  background: #000; padding: 4px; min-height: 220px;
}
.inv-stage canvas {
  background: #000;
  border: 2px solid #1e90ff;
  image-rendering: pixelated;
  max-width: 100%; max-height: 100%;
}
.inv-overlay {
  position: absolute; inset: 4px;
  background: rgba(0,0,0,0.9); color: #1e90ff;
  font: 12px "Courier New", monospace;
  display: none; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 16px;
}
.inv-overlay.show { display: flex; }
.inv-overlay .head {
  color: #fff; background:#1e90ff; padding: 3px 12px;
  font-weight: bold; margin-bottom: 10px; letter-spacing: 2px;
}
.inv-pad {
  display: none;
  background: #111; padding: 8px;
  text-align: center;
}
.inv-pad button {
  width: 56px; height: 48px; margin: 2px;
  background: #222; border: 2px outset #555; color:#1e90ff;
  font-size: 22px; cursor: pointer; border-radius: 4px;
}
.inv-pad button:active { border-style: inset; }
.inv-pad .row { display:flex; justify-content:center; gap:6px; }
.inv-pad .fire { background:#1e90ff; color:#000; width: 80px; }

@media (max-width: 820px) {
  .inv-pad { display: block; }
}

/* ===================== GTA / CITY CHAOS ===================== */
.gta-body { background: #000; padding: 0; }
.gta-wrap { display:flex; flex-direction:column; height:100%; background:#111; }
.gta-hud {
  background: linear-gradient(to bottom,#222,#000);
  color:#fff; padding: 4px 8px;
  font: bold 11px "Courier New", monospace;
  display:flex; gap: 10px; align-items:center; flex-wrap:wrap;
  border-bottom: 1px solid #ffd700;
}
.gta-hud b { color:#ffd700; margin-left:2px; }
.gta-hud .spacer { flex:1; }
.gta-hud select, .gta-hud button {
  padding: 2px 8px; font: bold 11px "Courier New", monospace; cursor:pointer;
  background: #ffd700; color:#000; border:1px solid #fff; border-radius:0;
}
.gta-stage {
  position: relative; flex: 1;
  display: flex; align-items: center; justify-content: center;
  background: #000; padding: 4px; min-height: 240px;
}
.gta-stage canvas {
  background:#1a1a1a; border:2px solid #ffd700;
  image-rendering: pixelated; max-width:100%; max-height:100%;
}
.gta-overlay {
  position:absolute; inset:4px;
  background: rgba(0,0,0,0.92); color:#ffd700;
  font: 12px "Courier New", monospace;
  display:none; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:16px;
}
.gta-overlay.show { display:flex; }
.gta-overlay .head {
  color:#000; background:#ffd700; padding:3px 12px;
  font-weight:bold; margin-bottom:10px; letter-spacing:2px;
}
.gta-pad { display:none; background:#111; padding:8px;
  flex-direction:row; justify-content:space-between; align-items:flex-end; gap:6px; }
.gta-pad .dpad button {
  width:46px; height:42px; margin:2px;
  background:#222; border:2px outset #555; color:#ffd700;
  font-size:20px; cursor:pointer; border-radius:4px;
}
.gta-pad .dpad button:active { border-style: inset; }
.gta-pad .dpad > div { display:flex; gap:4px; }
.gta-pad .actions { display:flex; flex-direction:column; gap:6px; }
.gta-pad .actions button {
  padding:8px 12px; font: bold 12px "Courier New", monospace;
  background:#222; color:#ffd700; border:2px outset #555; cursor:pointer;
}
.gta-pad .actions .fire { background:#ffd700; color:#000; }
@media (max-width: 820px) {
  .gta-pad { display:flex; }
  .gta-hud { font-size:10px; gap:6px; }
}