/* Daniel's computer: Windows XP (Hebrew, right to left) drawn in CSS, no Microsoft images */
.pc { position: fixed; inset: 0; z-index: 20; font: 12px Tahoma, 'Segoe UI', Arial, sans-serif; color: #000; user-select: none; touch-action: manipulation; }
.pc[hidden] { display: none; }
.pc-desk { position: absolute; inset: 0 0 34px 0; overflow: hidden;
  background: radial-gradient(120% 70% at 30% 105%, #5fa83a 0 38%, transparent 38.5%), radial-gradient(140% 60% at 80% 115%, #4c9a2c 0 40%, transparent 40.5%),
    linear-gradient(#2a6fd6, #6aa8ef 45%, #b9dcf9 70%, #d8ecfb); }
.pc-icons { position: absolute; top: 10px; right: 8px; bottom: 10px; display: flex; flex-direction: column; flex-wrap: wrap-reverse; align-content: flex-start; gap: 6px; }
.pc-icon { width: 84px; border: 0; background: none; color: #fff; text-shadow: 1px 1px 2px #000; display: flex; flex-direction: column; align-items: center; gap: 2px; cursor: pointer; padding: 4px 2px; font: inherit; }
.pc-icon span { font-size: 30px; filter: drop-shadow(1px 2px 1px rgba(0,0,0,.4)); }
.pc-icon em { font-style: normal; line-height: 1.2; }
.pc-icon.sel em { background: #316ac5; }
.pc-bar { position: absolute; inset: auto 0 0 0; height: 34px; display: flex; align-items: center; gap: 6px; background: linear-gradient(#3168d5, #245edb 10%, #1941a5 90%, #1a3e95); padding-inline-end: 0; }
.pc-start { height: 34px; padding: 0 16px 0 22px; border: 0; border-radius: 0 0 0 0; border-start-end-radius: 14px; border-end-end-radius: 14px; color: #fff; font: italic bold 17px Tahoma, Arial, sans-serif; text-shadow: 1px 1px 2px #000;
  background: linear-gradient(#45b33e, #3c9e35 50%, #2f8a2a); display: flex; align-items: center; gap: 6px; cursor: pointer; }
.pc-start i { width: 18px; height: 18px; background: conic-gradient(#f35325 0 25%, #81bc06 0 50%, #ffba08 0 75%, #05a6f0 0); border-radius: 3px 6px 3px 6px; transform: skewY(-6deg); }
.pc-tasks { flex: 1; display: flex; gap: 4px; overflow: hidden; }
.pc-task { max-width: 150px; height: 26px; border: 1px solid #1c3e94; border-radius: 3px; color: #fff; background: linear-gradient(#3c81f3, #2b6de0); font: inherit; padding: 0 8px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; cursor: pointer; }
.pc-tray { height: 34px; display: flex; align-items: center; padding: 0 14px; color: #fff; background: linear-gradient(#0f96ec, #0c7ad5); border-inline-start: 1px solid #0a4fa8; font-size: 13px; direction: ltr; }
.pc-menu { position: absolute; bottom: 34px; right: 0; width: min(300px, 92vw); border-radius: 8px 8px 0 0; overflow: hidden; box-shadow: 0 4px 16px rgba(0,0,0,.5); background: #fff; z-index: 999; }
.pc-menu[hidden] { display: none; }
.pc-menu-top { padding: 10px 12px; color: #fff; font-size: 15px; background: linear-gradient(#1b64d8, #3d8af0); }
.pc-menu-body { display: flex; flex-direction: column; padding: 6px; }
.pc-mi { display: flex; align-items: center; gap: 8px; border: 0; background: none; text-align: start; font: inherit; padding: 6px; cursor: pointer; border-radius: 3px; }
.pc-mi:hover { background: #316ac5; color: #fff; }
.pc-mi span { font-size: 22px; }
.pc-menu-foot { display: flex; justify-content: flex-end; padding: 6px 10px; background: linear-gradient(#3b7be6, #2560d8); }
.pc-off { border: 0; background: #d8441c; color: #fff; border-radius: 3px; padding: 5px 10px; font: inherit; cursor: pointer; }
.pc-win { position: absolute; background: #ece9d8; border: 3px solid #0831d9; border-top: 0; border-radius: 8px 8px 0 0; box-shadow: 2px 4px 14px rgba(0,0,0,.45); max-width: calc(100vw - 16px); }
.pc-title { display: flex; align-items: center; justify-content: space-between; height: 28px; padding: 0 8px; margin: 0 -3px; color: #fff; font-weight: bold; font-size: 13px; text-shadow: 1px 1px 1px #0a246a;
  background: linear-gradient(#0997ff, #0053ee 8%, #0050ee 40%, #06f 88%, #0053ee); border-radius: 8px 8px 0 0; cursor: move; touch-action: none; }
.pc-title i { font-style: normal; }
.pc-x { display: inline-grid; place-items: center; width: 21px; height: 21px; border: 1px solid #fff; border-radius: 3px; background: linear-gradient(135deg, #e7826a, #d8441c 60%, #c13314); cursor: pointer; font-size: 15px; }
.pc-msg { padding: 14px; line-height: 1.5; }
.pc-msg p { margin: 0 0 6px; }
.pc-dim { color: #555; }
.pc-ok { margin-top: 6px; min-width: 70px; padding: 4px 10px; border: 1px solid #003c74; border-radius: 3px; background: linear-gradient(#fff, #ece9d8); font: inherit; cursor: pointer; }
/* minesweeper */
.ms { padding: 8px; display: flex; flex-direction: column; gap: 6px; align-items: center; }
.ms-top { display: flex; justify-content: space-between; align-items: center; width: 100%; padding: 4px; border: 2px inset #fff; direction: ltr; }
.ms-top span { background: #000; color: #f00; font: bold 20px monospace; padding: 0 4px; }
.ms-face { font-size: 20px; width: 34px; height: 34px; border: 2px outset #fff; background: #c0c0c0; cursor: pointer; }
.ms-grid { display: grid; grid-template-columns: repeat(9, 24px); border: 3px inset #fff; direction: ltr; }
.ms-c { width: 24px; height: 24px; padding: 0; border: 2px outset #fff; background: #c0c0c0; font: bold 14px Tahoma, monospace; cursor: pointer; }
.ms-c.o { border: 1px solid #888; background: #bdbdbd; }
.ms-c.boom { background: #f33; }
.ms-c[data-n="1"] { color: #00f; } .ms-c[data-n="2"] { color: #080; } .ms-c[data-n="3"] { color: #f00; } .ms-c[data-n="4"] { color: #008; }
.ms-c[data-n="5"] { color: #800; } .ms-c[data-n="6"] { color: #088; }
.ms-flag { border: 2px outset #fff; background: #c0c0c0; font: inherit; padding: 3px 10px; cursor: pointer; }
.ms-flag.on { border-style: inset; background: #ffd; }
/* paint */
.pt { display: flex; flex-direction: column; gap: 6px; padding: 6px; }
.pt-tools { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.pt-col { width: 22px; height: 22px; border: 2px inset #fff; padding: 0; cursor: pointer; }
.pt-col.on { outline: 2px solid #000; }
.pt-tools input { width: 90px; }
.pt-clear { border: 1px solid #003c74; border-radius: 3px; background: linear-gradient(#fff, #ece9d8); font: inherit; padding: 2px 8px; cursor: pointer; }
.pt-cv { width: 100%; height: auto; background: #fff; border: 2px inset #fff; touch-action: none; cursor: crosshair; }
/* turning on and off */
.pc.boot .pc-desk, .pc.boot .pc-bar { animation: pcOn 1.6s ease-out; }
@keyframes pcOn { 0% { filter: brightness(0); } 45% { filter: brightness(0); } 100% { filter: none; } }
.pc.bye { animation: pcOff .9s ease-in forwards; }
@keyframes pcOff { to { filter: brightness(0); } }