/* Desktop */
#desktop { position: absolute; left: 0; top: 0; right: 0; bottom: 28px; background: var(--desk); overflow: hidden; }
#game.local #desktop { background: #3a3450; }
#icons { position: absolute; inset: 0; }
#windows { position: absolute; left: 0; top: 0; right: 0; bottom: 28px; pointer-events: none; }
#windows > * { pointer-events: auto; }

.icon {
  position: absolute; width: 80px; display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 2px 0; cursor: default; touch-action: none;
}
.icon img { width: 32px; height: 32px; image-rendering: pixelated; pointer-events: none; }
.icon .label {
  max-width: 78px; padding: 0 2px; color: #fff; text-align: center; line-height: 1.25;
  word-break: break-all; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.icon.selected img { filter: brightness(0.55) sepia(1) hue-rotate(190deg) saturate(4); }
.icon.selected .label { background: var(--title1); outline: 1px dotted #ff0; }
.icon.folder.drop-hover img { filter: brightness(1.25) drop-shadow(0 0 2px #fff); }
.icon.folder.drop-hover .label { background: var(--title1); }
.icon.fixed .label { font-style: italic; }
.icon.folder { width: 96px; margin-left: -10px; }
.icon.folder .label { max-width: 94px; word-break: keep-all; overflow-wrap: anywhere; }
.icon.dragging-src { opacity: 0.35; }
.icon.spawn { animation: spawn 0.5s ease-out; }
@keyframes spawn { from { transform: scale(0.2); opacity: 0; } to { transform: none; opacity: 1; } }
.icon .badge { position: absolute; top: -4px; right: 4px; background: #ff0; color: #000; font: bold 9px monospace; padding: 0 2px; pointer-events: none; }

.ghost { position: absolute; z-index: 7000; pointer-events: none; opacity: 0.75; }

/* in-window icon lists (folder windows) */
.folder-view { flex: 1; background: #fff; overflow: auto; position: relative; }
.folder-view .grid { display: flex; flex-wrap: wrap; align-content: flex-start; gap: 4px; padding: 6px; min-height: 100%; }
.folder-view .icon { position: relative; }
.folder-view .icon .label { color: #000; }
.folder-view .icon.selected .label { color: #fff; }
.folder-view.drop-hover { background: #e8f0ff; }
.folder-view .empty { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--shadow); pointer-events: none; }

/* tooltip */
#tooltip {
  position: absolute; z-index: 8000; background: #ffffe1; border: 1px solid #000; padding: 3px 6px; pointer-events: none;
  white-space: pre; line-height: 1.4; box-shadow: 2px 2px 0 rgba(0,0,0,0.25);
}

/* notepad / viewers */
.notepad-menu { display: flex; gap: 12px; padding: 1px 6px 3px; flex: none; }
.notepad-menu u { text-decoration: underline; }
.notepad { flex: 1; overflow: auto; background: #fff; white-space: pre-wrap; word-break: break-word;
  font-family: "Courier New", "Leelawadee UI", Tahoma, monospace; font-size: 13px; line-height: 1.35; padding: 4px 6px;
  user-select: text; -webkit-user-select: text; }
#game.lang-th .notepad { font-family: Sarabun, Tahoma, "Leelawadee UI", sans-serif; font-size: 16px; line-height: 1.6; }
#game.lang-th .handbook { font-size: 15px; line-height: 1.6; font-family: Sarabun, Tahoma, sans-serif; }
#game.lang-th .title-form, #game.lang-th .summary, #game.lang-th .menu-item, #game.lang-th .media .subs, #game.lang-th .imgview .cap { font-family: Sarabun, Tahoma, sans-serif; font-size: 14px; }
#game.lang-th .report, #game.lang-th .dialog-body { font-family: Sarabun, Tahoma, sans-serif; font-size: 15px; line-height: 1.55; }


.imgview .ghostpop { position: absolute; left: 71.5%; top: 30.5%; width: 180px; height: 135px; background: center / cover no-repeat; mix-blend-mode: screen; pointer-events: none; }



.imgview.empty-bytes img { filter: contrast(1.1); }
.media { flex: 1; display: flex; flex-direction: column; gap: 6px; padding: 6px; }
.media .screen { height: 110px; background: #000; position: relative; overflow: hidden; display: flex; align-items: flex-end; justify-content: center; gap: 2px; padding: 10px; }
.media .screen .bar { width: 6px; background: #3fdc5a; height: 4px; transition: height 0.12s; }
.media .subs { min-height: 40px; padding: 6px; text-align: center; font-style: italic; }
.media .controls { display: flex; gap: 6px; align-items: center; }
.media .progress { flex: 1; height: 10px; }
.media .progress > div { height: 100%; width: 0; background: var(--title1); }

.dialog-body { flex: 1; display: flex; gap: 14px; padding: 14px 12px 8px; align-items: flex-start; white-space: pre-wrap; line-height: 1.45; }
.dialog-body .dicon { width: 32px; height: 32px; flex: none; image-rendering: pixelated; }
.dialog-body .dicon.err { border-radius: 50%; background: #c00; color: #fff; font: bold 22px/32px Arial; text-align: center; }
.dialog-body .dicon.q { border-radius: 50%; background: #fff; color: #000080; font: bold 22px/32px "Times New Roman"; text-align: center; box-shadow: inset 0 0 0 1px #000; }
.dialog-buttons { display: flex; justify-content: center; gap: 8px; padding: 6px 0 4px; flex: none; }

/* handbook */
.handbook { flex: 1; overflow: auto; background: #fffef2; padding: 10px 12px; line-height: 1.45; }
.handbook h4 { margin: 4px 0 6px; font-size: 1.05em; color: #000080; }
.handbook ol { margin: 0 0 10px; padding-left: 20px; }
.handbook li { margin: 3px 0; }
.handbook .tag { display: inline-block; min-width: 92px; font-weight: bold; }
.handbook .sign { display: flex; gap: 8px; margin: 4px 0; }
.handbook .sign b { flex: none; width: 18px; height: 18px; background: #000080; color: #fff; text-align: center; line-height: 18px; }
.handbook .sign.locked { color: #999; }
.handbook .sign.locked b { background: #aaa; }
.handbook .note { margin-top: 10px; padding: 6px 8px; background: #ffe9a8; border-left: 3px solid #c90; }
.handbook .off { color: #999; }

/* report */
.report { flex: 1; overflow: auto; background: #fff; padding: 10px 12px; line-height: 1.5; }
.report h4 { margin: 0 0 6px; }
.report .score { font-size: 1.15em; font-weight: bold; margin-bottom: 8px; }
.report .row { display: flex; gap: 6px; font-family: "Courier New", Tahoma, monospace; font-size: 12px; }
#game.lang-th .report .row { font-family: Tahoma, "Leelawadee UI", monospace; }
.report .row.bad { color: #a00; }
.report .row.unknown { color: #6a00a0; font-weight: bold; }
.report .integrity { display: flex; align-items: center; gap: 8px; margin: 10px 0; }
.report .cells { display: flex; gap: 2px; padding: 2px; }
.report .cells span { width: 22px; height: 12px; background: #2a2; }
.report .cells span.lost { background: #400; }
.report .cells span.new { background: #c00; animation: blink 0.4s steps(1) 6; }
.report .mail { margin-top: 10px; border: 1px solid #808080; }
.report .mail .mh { background: #e8e8e8; padding: 3px 6px; font-weight: bold; display: flex; gap: 6px; align-items: center; }
.report .mail .mb { padding: 8px; white-space: pre-wrap; }

/* full-screen overlays: title, intro, summary */
#overlay { position: absolute; inset: 0; z-index: 9000; }
.ov-black { position: absolute; inset: 0; background: #000; color: #c0c0c0; font-family: "Courier New", monospace; font-size: 16px; padding: 60px 70px; line-height: 1.7; }
#game.lang-th .ov-black { font-family: "Courier New", Tahoma, "Leelawadee UI", monospace; }
.ov-black .ok { color: #3fdc5a; }
.ov-black .bad { color: #ff4b4b; }
.ov-black .click { margin-top: 30px; color: #fff; animation: blink 1s steps(1) infinite; cursor: pointer; }
.cursor::after { content: "_"; animation: blink 0.8s steps(1) infinite; }

.ov-title { position: absolute; inset: 0; background: var(--desk); display: flex; align-items: center; justify-content: center; }
.ov-title .window { position: relative; width: 470px; }
.title-logo { text-align: center; padding: 18px 10px 6px; background: #000; color: #3fdc5a; }
.title-logo h1 { margin: 0; font: bold 54px/1 "Courier New", monospace; letter-spacing: 4px; text-shadow: 3px 3px 0 #0a5a1a; }
.title-logo p { margin: 8px 0 4px; color: #c0c0c0; }
.title-form { padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; }
.title-form .row { display: flex; gap: 8px; align-items: center; }
.title-form .langs .btn { min-width: 90px; }
.title-form .langs .btn.on { font-weight: bold; box-shadow: inset -1px -1px var(--light), inset 1px 1px var(--dark), inset -2px -2px var(--mid), inset 2px 2px var(--shadow); }
.title-form .main-btns { display: flex; flex-direction: column; gap: 6px; }
.title-form .main-btns .btn { height: 30px; font-weight: bold; }
.title-form label { display: flex; gap: 6px; align-items: flex-start; line-height: 1.35; }
.title-form .meta { display: flex; justify-content: space-between; color: #444; font-size: 11px; }
.title-tip { color: #333; }

.ov-summary { position: absolute; inset: 0; background: rgba(0,0,0,0.88); display: flex; align-items: center; justify-content: center; }
.ov-summary .window { position: relative; width: 460px; }
.summary { padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.summary .ending-name { font: bold 22px "Courier New", Tahoma, monospace; text-align: center; }
.summary .blurb { text-align: center; color: #333; }
.summary .slots { display: flex; gap: 6px; justify-content: center; }
.summary .slots span { padding: 4px 8px; min-width: 120px; text-align: center; }
.summary .slots span.got { font-weight: bold; }
.summary .stars { display: flex; gap: 4px; justify-content: center; font-size: 24px; color: #999; cursor: pointer; }
.summary .stars span.on { color: #e8b830; }
.summary textarea { width: 100%; height: 54px; resize: none; font: inherit; border: 0; }
.summary .btns { display: flex; justify-content: center; gap: 8px; }

/* debug */
#debugPanel { position: absolute; right: 4px; top: 4px; z-index: 9500; width: 300px; max-height: 300px; overflow: hidden;
  background: rgba(0,0,0,0.75); color: #9f9; font: 10px/1.3 monospace; padding: 4px; pointer-events: none; white-space: pre; }

/* Quick View: compact preview of the selected file — draggable, can't be closed or collapsed */
#quickview { position: absolute; left: 610px; top: 524px; width: 300px; height: 208px; z-index: 50; }
#quickview .titlebar { cursor: move; }
#quickview .qv-body { flex: 1; display: flex; flex-direction: column; background: #fff; padding: 5px 7px; gap: 3px; overflow: hidden; }
#quickview .qv-head { display: flex; gap: 6px; align-items: center; font-weight: bold; min-width: 0; }
#quickview .qv-head img { width: 16px; height: 16px; image-rendering: pixelated; flex: none; }
#quickview .qv-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#quickview .qv-meta { color: #555; font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#quickview .qv-content { flex: 1; min-height: 0; overflow: hidden; margin-top: 2px; white-space: pre-wrap; word-break: break-word;
  font-family: "Courier New", Tahoma, monospace; font-size: 11px; line-height: 1.3; color: #222; position: relative; }
#game.lang-th #quickview .qv-content { font-family: Sarabun, Tahoma, sans-serif; font-size: 13px; line-height: 1.4; }
#quickview .qv-content::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 22px; background: linear-gradient(transparent, #fff); }
#quickview .qv-content.pic::after, #quickview .qv-content.note::after { display: none; }
#quickview .qv-content.pic { display: flex; justify-content: center; align-items: center; background: #eee; }
#quickview .qv-content.pic img { height: 100%; max-height: 132px; aspect-ratio: 4 / 3; object-fit: cover; box-shadow: 0 0 0 1px #000; }
#quickview .qv-content.note { color: #888; font-style: italic; font-family: inherit; display: flex; align-items: center; justify-content: center; text-align: center; }

/* jump scare (bad ending) */
.jumpscare { position: absolute; inset: 0; z-index: 9700; background: #000 center 40% / cover no-repeat; }

/* image viewer: 4:3 frame that fills the window, zoom + pan */
.imgview { flex: 1; min-height: 0; display: flex; flex-direction: column; background: #808080; padding: 6px; gap: 6px; }
.imgview .stage { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; }
.imgview .frame { position: relative; overflow: hidden; line-height: 0; box-shadow: 0 0 0 1px #000; width: 400px; height: 300px; cursor: zoom-in; background: #000; }
.imgview .frame.zoomed { cursor: grab; }
.imgview .frame.panning { cursor: grabbing; }
.imgview .frame img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; image-rendering: pixelated; }
.imgview.photo .frame img { image-rendering: auto; }
.imgview .imgbar { display: flex; align-items: center; gap: 3px; flex: none; }
.imgview .imgbar .btn { min-width: 26px; padding: 1px 6px; height: 22px; }
.imgview .imgbar .pct { min-width: 46px; text-align: center; color: #fff; font-family: "Courier New", monospace; }
.imgview .cap { flex: 1; min-width: 0; color: #fff; background: rgba(0,0,0,0.35); padding: 2px 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }