/* Page reset */
  * { box-sizing: border-box; margin: 0; padding: 0; cursor: none; }
  html,body { height: 100%; font-family: "Trebuchet MS", Verdana, sans-serif; background: #0b1220; color: #fff; cursor: none; }

  /* Background pattern + colorful gradient bars (mid-2000s vibes) */
  body {
    background:
      linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px) 0 0 / 8px 8px,
      radial-gradient(circle at 10% 10%, rgba(255,200,50,0.06), transparent 10%),
      linear-gradient(120deg,#1b2a4a 0%, #091126 40%, #031022 100%);
    padding: 36px;
  }

  .container {
    max-width: 980px;
    margin: 0 auto;
    border: 6px double #ffd36b;
    background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.12));
    padding: 22px;
    position: relative;
    box-shadow: 0 8px 30px rgba(1,1,1,0.6), inset 0 2px 0 rgba(255,255,255,0.02);
    border-radius: 8px;
  }

  /* Header with pixel-ish logo area */
  .header {
    display:flex;
    align-items:center;
    gap:16px;
    margin-bottom:16px;
  }
  .logo {
    width:86px; height:86px;
    background: repeating-linear-gradient(45deg, #ff7a7a 0 4px, #ffd36b 4px 8px);
    border: 4px solid #fff7d6;
    box-shadow: 0 4px 0 rgba(0,0,0,0.6), 0 0 18px rgba(255,120,110,0.06);
    display:flex; align-items:center; justify-content:center;
    font-weight:700; color:#2b2020; font-size:18px;
  }
  .title {
    font-size:28px; line-height:1;
    text-shadow: 2px 2px 0 rgba(0,0,0,0.6);
  }
  .subtitle { font-size:13px; color:#ffd36b; margin-top:4px; }

  /* Main content block */
  .main {
    display:flex; gap:18px;
  }
  .left {
    flex: 1 1 60%;
    padding: 12px;
    background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
    border: 2px dashed rgba(255,211,107,0.25);
    border-radius:6px;
    min-height: 260px;
    position: relative;
  }
  /* the text block where you can put content */
  .text-block {
    padding: 14px;
    background: rgba(0,0,0,0.22);
    border-radius: 6px;
    color:#f7f3ea;
    line-height:1.45;
    font-size:15px;
    overflow:auto;
    max-height: 460px;
  }

  /* Right column with retro widgets / placeholder areas */
  .right {
    width: 260px;
    display:flex;
    flex-direction:column;
    gap:12px;
  }
  .widget {
    padding:10px;
    background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.15));
    border: 1px solid rgba(255,255,255,0.04);
    border-radius:6px;
    font-size:13px;
    color:#eee;
    min-height:72px;
  }
  .badge {
    display:inline-block;
    padding:6px 10px;
    background: linear-gradient(180deg,#ff9b9b,#ffca7a);
    color:#2b2020; font-weight:700;
    border-radius:999px;
    box-shadow: 0 3px 0 rgba(0,0,0,0.25);
    margin-bottom:8px;
  }

  /* Retro button row */
  .row-buttons { display:flex; gap:8px; margin-top:8px; }
  .btn {
    background: linear-gradient(180deg,#00c6ff,#0066cc);
    color:white; padding:8px 10px; border-radius:6px; font-weight:700;
    text-decoration:none; display:inline-block; box-shadow: 0 3px 0 rgba(0,0,0,0.35);
    transform: translateY(0); transition: transform .08s ease;
  }
  .btn:active { transform: translateY(3px); box-shadow:none; }

  /* Decorative ribbons and tape */
  .tape {
    position:absolute; right:-28px; top:-18px;
    transform: rotate(12deg);
    background: linear-gradient(90deg,#ffdf8c,#ffb07a);
    padding:8px 18px; color:#2b2020; font-weight:800;
    border-radius:4px; box-shadow:0 6px 18px rgba(0,0,0,0.45);
  }

  /* Animated marquee-ish pixel sparkles */
  .sparkles {
    position:absolute; left:12px; bottom:-18px; color:#ffd36b;
    font-weight:800; font-size:12px; opacity:0.9;
    animation: floaty 3.6s linear infinite;
  }
  @keyframes floaty {
    0% { transform: translateY(0) rotate(0deg); opacity:0.9; }
    50% { transform: translateY(-8px) rotate(12deg); opacity:0.6; }
    100% { transform: translateY(0) rotate(0deg); opacity:0.9; }
  }

  /* Footer */
  .footer {
    margin-top:14px;
    font-size:12px;
    color:#d6d6d6;
    display:flex; justify-content:space-between; align-items:center;
  }

  /* Custom cursor fallback — decorative animated "GIF cursor" simulated with CSS */
  :root {
    --cursor-size: 48px;
  }
  .cursor-fallback {
    position: fixed;
    pointer-events: none;
    width: var(--cursor-size);
    height: var(--cursor-size);
    transform: translate(-50%,-50%);
    /* Рыбка-курсор — inline SVG */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cellipse cx='22' cy='24' rx='18' ry='12' fill='%23ff9b4f'/%3E%3Cellipse cx='22' cy='24' rx='15' ry='10' fill='%23ffbc6b'/%3E%3Cpolygon points='40,24 48,16 48,32' fill='%23ff9b4f'/%3E%3Ccircle cx='12' cy='21' r='3' fill='%23fff'/%3E%3Ccircle cx='12' cy='21' r='1.5' fill='%23222'/%3E%3Cpath d='M6 26 Q10 30 16 27' fill='none' stroke='%23d9753a' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    filter: drop-shadow(0 4px 8px rgba(0,0,0,0.5));
    transition: transform .08s linear, opacity .12s;
    opacity: 0.98;
    z-index: 9999;
  }

  /* Покачивание при быстром движении */
  .cursor-fallback.fast {
    transform: translate(-50%,-50%) scale(1.2) rotate(-12deg);
    transition: transform .06s ease-out;
  }

  /* --- Частицы при клике --- */
  .click-particle {
    position: fixed;
    pointer-events: none;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    z-index: 9998;
    animation: particle-burst 0.6s ease-out forwards;
  }
  @keyframes particle-burst {
    0% {
      opacity: 1;
      transform: translate(0, 0) scale(1);
    }
    100% {
      opacity: 0;
      transform: translate(var(--px), var(--py)) scale(0.2);
    }
  }

  /* --- Шлейф искр за курсором --- */
  .cursor-trail {
    position: fixed;
    pointer-events: none;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    z-index: 9996;
    animation: trail-fade 0.55s ease-out forwards;
    mix-blend-mode: screen;
  }
  @keyframes trail-fade {
    0% {
      opacity: 0.9;
      transform: scale(1);
    }
    100% {
      opacity: 0;
      transform: scale(0.1);
    }
  }

  /* --- Котик внизу экрана --- */
  .kitty-chaser {
    position: fixed;
    bottom: 0;
    left: 50%;
    z-index: 9997;
    font-size: 42px;
    line-height: 1;
    pointer-events: none;
    transition: transform 0s;
    will-change: left, transform;
  }
  .kitty-chaser.running {
    animation: kitty-bob 0.25s ease-in-out infinite alternate;
  }
  @keyframes kitty-bob {
    0%   { transform: translateY(0); }
    100% { transform: translateY(-6px); }
  }

  /* --- Крестики-нолики --- */
  .ttt-widget {
    text-align: center;
  }
  .ttt-title {
    font-weight: 700;
    color: #ffd36b;
    font-size: 14px;
    margin-bottom: 6px;
  }
  .ttt-score {
    display: flex;
    justify-content: center;
    gap: 14px;
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 6px;
  }
  .ttt-score-x { color: #00c6ff; }
  .ttt-score-draw { color: #aaa; }
  .ttt-score-o { color: #ff6b6b; }
  .ttt-status {
    font-size: 12px;
    color: #ffd36b;
    margin-bottom: 8px;
    min-height: 16px;
  }
  .ttt-board {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4px;
    width: 156px;
    margin: 0 auto 8px;
  }
  .ttt-cell {
    width: 48px;
    height: 48px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.12s, transform 0.1s;
    user-select: none;
  }
  .ttt-cell:hover {
    background: rgba(255,255,255,0.08);
  }
  .ttt-cell:active {
    transform: scale(0.92);
  }
  .ttt-cell.x {
    color: #00c6ff;
    text-shadow: 0 0 8px rgba(0,198,255,0.4);
  }
  .ttt-cell.o {
    color: #ff6b6b;
    text-shadow: 0 0 8px rgba(255,107,107,0.4);
  }
  .ttt-cell.win {
    background: rgba(255,211,107,0.15);
    border-color: #ffd36b;
  }
  .ttt-cell.disabled {
    pointer-events: none;
    cursor: default;
  }
  .ttt-reset-btn {
    font-size: 11px;
    padding: 5px 14px;
    margin-top: 2px;
  }

  /* --- Memory Match --- */
  .mm-widget { text-align: center; }
  .mm-title {
    font-weight: 700;
    color: #ffd36b;
    font-size: 14px;
    margin-bottom: 4px;
  }
  .mm-score {
    font-size: 12px;
    color: #ccc;
    margin-bottom: 8px;
  }
  .mm-board {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 4px;
    width: 180px;
    margin: 0 auto 8px;
  }
  .mm-card {
    width: 40px;
    height: 40px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    cursor: pointer;
    transition: background 0.15s, transform 0.15s;
    user-select: none;
  }
  .mm-card:hover { background: rgba(255,255,255,0.1); }
  .mm-card:active { transform: scale(0.9); }
  .mm-card.flipped {
    background: rgba(255,211,107,0.12);
    border-color: #ffd36b;
  }
  .mm-card.matched {
    background: rgba(0,198,255,0.1);
    border-color: #00c6ff;
    pointer-events: none;
    opacity: 0.7;
  }
  .mm-card.disabled { pointer-events: none; }

  /* --- Rock Paper Scissors --- */
  .rps-widget { text-align: center; }
  .rps-title {
    font-weight: 700;
    color: #ffd36b;
    font-size: 14px;
    margin-bottom: 4px;
  }
  .rps-score {
    display: flex;
    justify-content: center;
    gap: 14px;
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 4px;
  }
  .rps-you { color: #00c6ff; }
  .rps-draws { color: #aaa; }
  .rps-cpu { color: #ff6b6b; }
  .rps-result {
    font-size: 12px;
    color: #ffd36b;
    margin-bottom: 8px;
    min-height: 16px;
  }
  .rps-arena {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: 10px;
  }
  .rps-pick {
    width: 52px;
    height: 52px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    transition: border-color 0.2s;
  }
  .rps-pick.win { border-color: #66ffcc; }
  .rps-pick.lose { border-color: #ff6b6b; }
  .rps-vs {
    font-size: 12px;
    font-weight: 700;
    color: #666;
  }
  .rps-buttons {
    display: flex;
    justify-content: center;
    gap: 6px;
  }
  .rps-btn {
    width: 48px;
    height: 40px;
    font-size: 20px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* Small responsive tweak */
  @media (max-width:720px) {
    .main { flex-direction:column; }
    .right { width:100%; }
    .container { padding:14px; }
    .logo { width:64px;height:64px;font-size:14px; }
  }