/* apps-3: web stuff, desktop extras, accessories, polls, helper. Uses theme variables only. */
.w3-pad { padding: 10px; }
.w3-h { margin: 6px 0; font-family: var(--font); }
.small { font-size: 11px; opacity: .85; }
.cnt-alt { font-size: 11px; border: 1px dotted var(--dk); padding: 2px 4px; display: inline-block; }

/* ---- hit counter window ---- */
.w3-counter { text-align: center; font-family: "Comic Neue", "Comic Sans MS", cursive; }
.cnt-head { padding: 6px; }
.cnt-odo { margin: 8px 0; }
.cnt-vis, .cnt-load, .cnt-note { margin: 6px 0; }
.cnt-gifs { display: flex; gap: 10px; justify-content: center; align-items: center; flex-wrap: wrap; margin: 8px 0; }
.cnt-gifs img { max-width: 100%; height: auto; }
.cnt-btns { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; margin: 8px 0; }

/* ---- desktop footer strip ---- */
.web-footer {
  position: absolute; right: 8px; bottom: 6px; z-index: 0;
  display: flex; align-items: center; gap: 6px; padding: 3px 6px;
  background: rgba(0, 0, 0, .65); color: #ff0; border: 1px solid #888; font: 11px/1 var(--mono, monospace);
  cursor: default;
}
.web-footer:hover { background: rgba(0, 0, 80, .8); }
.web-footer .odometer { transform: scale(.85); transform-origin: right center; margin: -2px 0; }
@media (max-width: 640px) { .web-footer { display: none; } }

/* ---- ticker ---- */
.ticker {
  position: absolute; left: 0; right: 0; top: 0; height: 20px; overflow: hidden; white-space: nowrap;
  background: #000040; color: #ff0; border-bottom: 2px solid #f0f; font: 700 13px/20px var(--mono, monospace);
  cursor: pointer; --tick-secs: 45s;
}
.ticker[hidden] { display: none; }
.ticker > span { display: inline-block; padding-left: 100%; animation: tickmove var(--tick-secs) linear infinite; text-shadow: 0 0 4px #f80; }
.ticker:hover > span { animation-play-state: paused; }
@keyframes tickmove { to { transform: translateX(-100%); } }
html[data-motion="off"] .ticker > span { animation: none; padding-left: 6px; }
@media (prefers-reduced-motion: reduce) { html:not([data-motion="on"]) .ticker > span { animation: none; padding-left: 6px; } }
.desktop.has-ticker .icons { top: 26px; }
.desktop.has-ticker .windows { top: 0; }

/* ---- 88x31 wall ---- */
.w3-links, .w3-awards, .w3-ring, .w3-contact, .w3-y2k, .w3-polls, .w3-helper { font-family: "Comic Neue", "Comic Sans MS", cursive; }
.wall { display: grid; grid-template-columns: repeat(auto-fill, 92px); gap: 6px; justify-content: center; }
.b88-btn { padding: 0; border: 0; background: none; cursor: pointer; line-height: 0; display: inline-block; }
.b88-btn:hover svg, .b88-btn:focus svg { outline: 2px solid #f0f; }
.b88 { display: block; image-rendering: pixelated; }
.ours { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin: 6px 0; }
textarea.code { width: 100%; font: 11px/1.3 var(--mono, monospace); box-sizing: border-box; }
.w3-linklist { padding-left: 20px; }
.w3-linklist li { margin: 4px 0; }

/* ---- webring ---- */
.ringbox { text-align: center; border: 3px ridge #c60; padding: 10px; margin: 6px; background: #fff8dc; color: #000; }
.ring-btns { display: flex; gap: 4px; justify-content: center; flex-wrap: wrap; margin: 6px 0; }

/* ---- awards ---- */
.award-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
.award { background: #fffbe6; color: #000; border: 2px ridge #c90; padding: 6px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 2px; cursor: pointer; font-family: inherit; }
.award:hover { background: #fff2a8; }
.award small { font-size: 11px; font-style: italic; }

/* ---- contact ---- */
.fly { display: flex; align-items: center; gap: 10px; overflow: hidden; height: 64px; }
.fly .env { animation: flyenv 4s ease-in-out infinite alternate; font-size: 40px; }
@keyframes flyenv { 0% { transform: translate(0, 6px) rotate(-6deg); } 100% { transform: translate(120px, -6px) rotate(6deg); } }
html[data-motion="off"] .fly .env { animation: none; }
.fm label { display: block; margin: 6px 0; }
.fm input[type=text], .fm input[type=email], .fm select, .fm textarea { width: 100%; box-sizing: border-box; }
.fm-out { margin-top: 8px; padding: 6px; background: #ffc; border: 1px solid #aa0; color: #000; }
.fm-out:empty { display: none; }

/* ---- browser ---- */
.nb-body { display: flex; flex-direction: column; padding: 0; min-height: 0; }
.nb-tools { display: flex; align-items: stretch; gap: 2px; padding: 3px; flex-wrap: wrap; }
.nb-btn { display: flex; flex-direction: column; align-items: center; min-width: 46px; padding: 2px 4px; background: var(--face); border: 0; box-shadow: none; font-size: 11px; line-height: 1.1; }
.nb-btn:hover:not(:disabled) { box-shadow: var(--bevel-btn); }
.nb-btn:active:not(:disabled) { box-shadow: var(--bevel-btn-down); }
.nb-btn:disabled { opacity: .45; }
.nb-btn .g { font-size: 16px; line-height: 18px; }
.nb-throb { margin-left: auto; width: 40px; height: 40px; box-shadow: var(--bevel-field); flex: none; }
.nb-throb .dove { transform-origin: 20px 24px; animation: throb 2.4s ease-in-out infinite; }
.nb-throb.busy .dove { animation-duration: .5s; }
@keyframes throb { 50% { transform: scale(1.18) rotate(-4deg); } }
html[data-motion="off"] .nb-throb .dove { animation: none; }
.nb-locbar { display: flex; align-items: center; gap: 4px; padding: 2px 4px; }
.nb-loc { flex: 1; min-width: 0; }
.nb-bm { display: flex; gap: 4px; align-items: center; flex-wrap: wrap; padding: 2px 4px; font-size: 11px; border-top: 1px solid var(--lo); border-bottom: 1px solid var(--hi); }
.nb-link { background: none; border: 0; color: var(--link); text-decoration: underline; cursor: pointer; padding: 0 3px; font-size: 11px; }
.nb-view { flex: 1; min-height: 120px; overflow: auto; background: #fff; color: #000; box-shadow: var(--bevel-field); margin: 2px; padding: 8px; font-family: "Times New Roman", Times, serif; }
.nb-view.splash { background-color: #000040; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='60' height='60'><rect width='60' height='60' fill='%2300004a'/><path d='M10 8l1.5 3.5 3.5.5-2.6 2.4.7 3.6L10 16l-3.1 2 .7-3.6L5 11.8l3.5-.5z' fill='%23ffe84a'/><circle cx='42' cy='20' r='1.2' fill='%23fff'/><circle cx='28' cy='46' r='1' fill='%23fff'/></svg>"); color: #ff0; text-align: center; }
.nb-view.home { background-color: #00004a; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='60' height='60'><rect width='60' height='60' fill='%2300004a'/><path d='M10 8l1.5 3.5 3.5.5-2.6 2.4.7 3.6L10 16l-3.1 2 .7-3.6L5 11.8l3.5-.5z' fill='%23ffe84a'/><circle cx='42' cy='20' r='1.2' fill='%23fff'/><circle cx='28' cy='46' r='1' fill='%23fff'/><path d='M50 44l1 2.4 2.4.3-1.8 1.6.5 2.4-2.1-1.3-2.1 1.3.5-2.4-1.8-1.6 2.4-.3z' fill='%23ffe84a'/></svg>"); color: #fff; font-family: "Comic Neue", "Comic Sans MS", cursive; }
.nb-view.home a, .nb-view.splash a { color: #0ff; }
.nb-view .big { font-size: 22px; color: #f0f; }
.nb-view .enter { font-size: 20px; font-weight: 700; color: #f00 !important; background: #ff0; padding: 2px 8px; }
.nb-view .splash-in { padding: 10px 0; }
.nb-view .pg-big { font-size: 20px; font-weight: 700; }
.nb-view .pg-list { text-align: left; display: inline-block; }
.nb-view.home .pg { text-align: center; }
.nb-view.err h1 { font-size: 26px; margin: 4px 0; }
.nb-view .small { font-size: 11px; }
.nb-status { display: flex; justify-content: space-between; gap: 8px; padding: 2px 6px; font-size: 11px; box-shadow: var(--bevel-in, inset 1px 1px var(--lo)); }

/* ---- favorites tree ---- */
.tree, .tree ul { list-style: none; margin: 0; padding-left: 16px; }
.tree { padding-left: 2px; }
.tree .tn { display: flex; gap: 4px; align-items: center; background: none; border: 0; padding: 2px 4px; width: 100%; text-align: left; cursor: pointer; color: var(--text); }
.tree .tn:hover, .tree .tn:focus { background: var(--sel); color: var(--seltext); outline: none; }
.tree .folder:not(.open) > ul { display: none; }

/* ---- Y2K ---- */
.w3-y2k { text-align: center; }
.y2k-days { margin: 8px 0; font-size: 18px; }
.y2k-hms { font: 700 28px/1.2 var(--mono, monospace); color: #c00; margin: 4px 0; }

/* ---- Paint ---- */
.w3-paint { display: flex; flex-direction: column; gap: 4px; padding: 4px; min-height: 0; }
.pt-tools { display: flex; gap: 3px; flex-wrap: wrap; align-items: center; }
.pt-tools [aria-pressed="true"] { box-shadow: var(--bevel-btn-down); }
.pt-tools input[type=range] { width: 70px; }
.pt-wrap { flex: 1; min-height: 0; overflow: auto; box-shadow: var(--bevel-field); background: #888; }
.pt-wrap canvas { display: block; width: 100%; max-width: 480px; height: auto; background: #fff; touch-action: none; cursor: crosshair; image-rendering: pixelated; }
.pt-pal { display: flex; gap: 1px; align-items: center; flex-wrap: wrap; }
.pt-sw { width: 20px; height: 20px; border: 1px solid var(--dk); padding: 0; cursor: pointer; }
.pt-cur { width: 26px; height: 26px; border: 2px inset var(--lo); margin-right: 4px; display: inline-block; }

/* ---- Notepad ---- */
.w3-notepad { padding: 0; display: flex; }
.w3-notepad textarea { flex: 1; width: 100%; resize: none; border: 0; box-shadow: var(--bevel-field); font: 14px/1.3 var(--mono, "Courier New", monospace); background: #fff; color: #000; box-sizing: border-box; }

/* ---- Banner printer ---- */
.w3-print { padding: 6px; display: flex; flex-direction: column; gap: 6px; min-height: 0; }
.pr-row { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.pr-row input { width: 12em; font: 16px var(--mono, monospace); text-transform: uppercase; }
.pr-paper { flex: 1; min-height: 120px; overflow: auto; background: #666; padding: 8px; box-shadow: var(--bevel-field); }
.pr-paper canvas { display: block; max-width: none; height: auto; box-shadow: 0 2px 6px #000; }
.pr-empty { color: #ddd; font-family: "VT323", monospace; font-size: 18px; margin: 0; }

/* ---- Polls ---- */
.poll-opt { display: block; margin: 6px 0; }
.poll-row { margin: 8px 0; }
.poll-row .progress { margin-top: 2px; }

/* ---- Helper ---- */
.hp-row { display: flex; gap: 10px; align-items: flex-start; }
.hp-char svg { display: block; }
.hp-char.hop { animation: hop .5s ease-out; }
@keyframes hop { 30% { transform: translateY(-12px) rotate(-4deg); } 60% { transform: translateY(0) rotate(3deg); } }
html[data-motion="off"] .hp-char.hop { animation: none; }
.hp-bubble { flex: 1; background: #ffffe1; color: #000; border: 2px solid #000; border-radius: 10px; padding: 8px; min-height: 60px; position: relative; font-size: 14px; }
.hp-bubble::before { content: ""; position: absolute; left: -12px; top: 22px; border: 6px solid transparent; border-right: 8px solid #000; }
.hp-btns { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }

@media (max-width: 640px) {
  .nb-btn { min-width: 40px; }
  .nb-btn .l { display: none; }
  .wall { grid-template-columns: repeat(auto-fill, 92px); }
  .fly .env { animation-name: flyenv-s; }
  @keyframes flyenv-s { 0% { transform: translate(0, 6px); } 100% { transform: translate(60px, -6px); } }
}