/* HuxOS games: "Is that Hux?", the Firefly Jar, Firefly Sweeper, HuxPaint. */
.game-app { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 6px; padding: 6px; background: var(--face); overflow: auto; }
.hud { margin: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.hud div { padding: 3px 8px; border: 1px solid; border-color: #aca899 #fff #fff #aca899; background: #fff; text-align: center; }
.hud dt { color: #555; font-size: 10px; text-transform: uppercase; letter-spacing: .1em; }
.hud dd { margin: 0; font: bold 20px/1.1 var(--ui-title); color: #0a246a; font-variant-numeric: tabular-nums; }
.board-wrap { position: relative; flex: 1; min-height: 300px; border: 2px solid; border-color: #808080 #fff #fff #808080; box-shadow: inset 1px 1px #404040; overflow: hidden; isolation: isolate; touch-action: manipulation; user-select: none; -webkit-user-select: none; background: #06110b; }
.board-scene { position: absolute; inset: 0; z-index: -1; }
.board { position: absolute; inset: 0; align-content: end; display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px 10px; padding: 8% 6% 3%; }
.hole { position: relative; aspect-ratio: 1 / .7; display: grid; align-items: end; justify-items: center; overflow: hidden; max-height: 100%; }
.bush { position: relative; z-index: 2; width: 100%; height: auto; margin-bottom: -2px; filter: drop-shadow(0 -4px 10px rgba(0, 0, 0, .4)); }
.bush-num { position: absolute; z-index: 3; left: 50%; bottom: 8%; transform: translateX(-50%); min-width: 22px; padding: 1px 5px; border: 1px solid; border-color: #fff #808080 #808080 #fff; border-radius: 3px; background: var(--face); color: #0a246a; font: bold 13px/18px var(--ui-title); text-align: center; pointer-events: none; }
@media (pointer: coarse) { .bush-num { display: none; } }
.peek { position: absolute; z-index: 1; left: 50%; bottom: 8%; width: 62%; aspect-ratio: 1; border-radius: 50%; border: 0; padding: 0; background: none; transform: translate(-50%, 105%); transition: transform .16s ease-out; display: grid; place-items: center; -webkit-tap-highlight-color: transparent; }
.hole.up .peek { transform: translate(-50%, 6%); }
.peek-face { width: 100%; height: 100%; border-radius: 50%; display: grid; place-items: center; font-size: clamp(1.6rem, 5vw, 3.2rem); line-height: 1; }
.peek.is-hux .peek-face, .peek.is-gold .peek-face, .peek.is-shadow .peek-face { background: url(/avatar-512.png) center 22% / 165% no-repeat; border: 3px solid rgba(255, 211, 110, .85); box-shadow: 0 0 22px rgba(255, 211, 110, .5); }
.peek.is-gold .peek-face { border-color: #ffe9a8; box-shadow: 0 0 0 4px rgba(255, 211, 110, .5), 0 0 40px 10px rgba(255, 211, 110, .8); filter: sepia(.6) saturate(2.2) brightness(1.15); }
.peek.is-shadow .peek-face { filter: grayscale(1) brightness(.55) contrast(1.3); border-color: rgba(120, 120, 120, .6); box-shadow: none; transform: scaleX(-1); }
.peek.is-critter .peek-face { background: radial-gradient(circle, rgba(255, 255, 255, .12), rgba(0, 0, 0, .25)); border: 3px solid rgba(255, 255, 255, .2); }
.hole.nope { animation: shake .4s; }
.float-txt { position: absolute; z-index: 5; left: 50%; top: 18%; transform: translateX(-50%); white-space: nowrap; font: bold clamp(.9rem, 2.4vw, 1.2rem)/1 var(--ui-title); pointer-events: none; animation: float-up .9s ease-out forwards; text-shadow: 0 2px 6px rgba(0, 0, 0, .9); }
.float-txt.good { color: #ffd36e; }
.float-txt.gold { color: #fff1b8; }
.float-txt.bad { color: #ff9aa5; }
@keyframes float-up { to { transform: translate(-50%, -40px); opacity: 0; } }
.board-overlay { position: absolute; inset: 0; z-index: 10; display: grid; place-items: center; padding: 12px; background: rgba(4, 9, 7, .45); transition: opacity .25s; overflow: auto; }
.board-overlay.hidden { opacity: 0; pointer-events: none; }
.ov-card { max-width: 400px; display: grid; gap: 8px; justify-items: center; text-align: center; padding: 14px 18px 16px; background: var(--face); border: 3px solid var(--frame); border-radius: 8px; box-shadow: 3px 4px 12px rgba(0, 0, 0, .5); }
.ov-kicker { color: #c46a00; font-weight: bold; text-transform: uppercase; letter-spacing: .12em; font-size: 11px; }
.ov-title { font: bold 22px var(--ui-title); color: #0a246a; }
.ov-lead { color: #333; line-height: 1.45; }
.legend { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; text-align: left; color: #333; }
.legend li { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 8px; }
.lg { width: 22px; height: 22px; border-radius: 50%; background: url(/avatar-512.png) center 22% / 165% no-repeat; border: 2px solid #e8a213; }
.lg.gold { filter: sepia(.6) saturate(2.2) brightness(1.15); box-shadow: 0 0 10px #ffd36e; }
.lg.fake { filter: grayscale(1) brightness(.55); border-color: #777; }
.ov-result { color: #333; line-height: 1.5; }
.ov-btns { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.game-hint { flex: none; text-align: center; }
kbd { padding: 0 4px; border: 1px solid #999; border-bottom-width: 2px; border-radius: 3px; background: #fff; font: 11px var(--ui); }

/* Firefly Jar */
.jarapp { flex: 1; min-height: 0; overflow: auto; display: grid; grid-template-columns: auto 1fr; gap: 18px; align-items: center; padding: 16px 18px; background: radial-gradient(circle at 20% 40%, #13281c, #06110b 70%); color: #eef3ea; }
.big-jar { position: relative; width: 150px; height: 200px; }
.bj-lid { position: absolute; top: 0; left: 28px; right: 28px; height: 20px; border-radius: 8px 8px 2px 2px; background: linear-gradient(180deg, #a8b6c8, #59677c); }
.bj-glass { position: absolute; top: 16px; left: 8px; right: 8px; bottom: 0; border-radius: 28px 28px 40px 40px; border: 3px solid rgba(216, 236, 255, .4); background: linear-gradient(110deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, .02) 40%, rgba(255, 255, 255, .08)); overflow: hidden; }
.bj-glass i { position: absolute; width: 9px; height: 9px; border-radius: 50%; background: #fff5c8; box-shadow: 0 0 12px 4px rgba(255, 211, 110, .85); animation: jarfly 3s ease-in-out infinite; }
.lyfe-on .bj-glass i { background: #f1e6ff; box-shadow: 0 0 12px 4px rgba(201, 160, 255, .85); }
@keyframes jarfly { 50% { transform: translate(6px, -10px); opacity: .45; } }
.jar-copy { display: grid; gap: 10px; justify-items: start; }
.jar-copy h2 { font: bold 24px var(--ui-title); color: #ffd36e; }
.jar-copy p { line-height: 1.5; color: #d6e2d3; }
.jar-copy .yi { color: #e2cfff; }
.jar-copy .progress { width: 100%; max-width: 360px; }
.jar-rewards { display: grid; gap: 8px; justify-items: start; padding: 10px 12px; border: 1px solid rgba(255, 211, 110, .35); border-radius: 6px; background: rgba(255, 211, 110, .06); }
.seg { display: inline-flex; flex-wrap: wrap; gap: 0; }
.seg button { padding: 4px 10px; border: 1px solid #003c74; background: linear-gradient(180deg, #fff, #ecebe6 86%, #d6d0c5); color: #000; }
.seg button:first-child { border-radius: 3px 0 0 3px; }
.seg button:last-child { border-radius: 0 3px 3px 0; border-left: 0; }
.seg button[aria-pressed="true"] { background: #316ac5; color: #fff; }
html.pocket .jarapp { grid-template-columns: 1fr; justify-items: center; text-align: center; }
html.pocket .jar-copy { justify-items: center; }

/* Firefly Sweeper */
.sweep { --sw-cell: 24px; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 0 0 8px; background: var(--face); }
.sweep .menubar { align-self: stretch; }
.sw-top { align-self: stretch; margin: 0 8px; display: flex; align-items: center; justify-content: space-between; padding: 4px 6px; border: 2px solid; border-color: #808080 #fff #fff #808080; background: linear-gradient(180deg, #e9f3df, #cfe3bd); }
.sw-panel { min-width: 64px; padding: 1px 6px; background: #1d3a1c; color: #ffd36e; border: 1px solid #0d1f0c; border-radius: 3px; font: bold 14px var(--ui-title); text-align: center; font-variant-numeric: tabular-nums; }
.sw-new { width: 32px; height: 32px; padding: 0; border: 1px solid #2d6e1e; border-radius: 50%; background: radial-gradient(circle at 40% 30%, #fff, #c5ecaa 60%, #8fd06a); font-size: 17px; }
.sw-new:active { filter: brightness(.9); }
.sw-board { display: grid; gap: 0; padding: 3px; border: 3px solid; border-color: #808080 #fff #fff #808080; background: #3a2a16; touch-action: manipulation; }
.sw-c { width: var(--sw-cell); height: var(--sw-cell); padding: 0; border: 1px solid #12301a; border-radius: 6px 1px 6px 1px; font: bold 13px var(--ui-title); line-height: 1;
  background: radial-gradient(circle at 30% 25%, #7fd35e, #3a8f2a 60%, #24621a); box-shadow: inset 1px 1px rgba(255, 255, 255, .35); color: #fff; }
.sw-c:hover:not(.open) { filter: brightness(1.12); }
.sw-c.open { border-radius: 0; border: 1px solid #b58e5c; background: #e8d3a8; box-shadow: none; color: #3b2a14; }
.sw-c[data-n="1"] { color: #2f6b1f; }
.sw-c[data-n="2"] { color: #8a5a00; }
.sw-c[data-n="3"] { color: #a0331a; }
.sw-c[data-n="4"] { color: #5a2d82; }
.sw-c.lamp { font-size: 13px; }
.sw-c.fly { background: radial-gradient(circle, #fff6c8, #ffd36e 45%, #3a2a16 75%); }
.sw-c.boom { background: radial-gradient(circle, #fff, #ffb547 40%, #a0331a); }
.sw-msg { min-height: 16px; padding: 0 10px; text-align: center; color: #333; max-width: 420px; }
html.pocket .sweep { --sw-cell: 32px; }

/* HuxPaint */
.paint { flex: 1; min-height: 0; display: flex; flex-direction: column; background: var(--face); }
.pt-main { flex: 1; min-height: 0; display: flex; }
.pt-tools { flex: none; width: 58px; padding: 4px; display: grid; grid-template-columns: 1fr 1fr; gap: 2px; align-content: start; border-right: 1px solid #aca899; }
.pt-tool { height: 24px; padding: 0; border: 1px solid transparent; background: none; font-size: 13px; line-height: 1; border-radius: 2px; }
.pt-tool:hover { border-color: #cecece; background: #fff; }
.pt-tool.on { border-color: #808080 #fff #fff #808080; background: #fff; box-shadow: inset 1px 1px #404040; }
.pt-tool[data-tool="stamp-hux"] { font: bold 9px var(--ui-title); }
.pt-tool[data-tool="stamp-lyfe"] { font-family: var(--font-yi); }
.pt-sizes { grid-column: 1 / -1; margin-top: 6px; padding: 3px; border: 1px solid; border-color: #808080 #fff #fff #808080; display: grid; gap: 2px; }
.pt-size { height: 20px; display: grid; place-items: center; border: 0; background: none; }
.pt-size i { display: block; background: #000; border-radius: 50%; }
.pt-size.on { background: var(--sel); }
.pt-size.on i { background: #fff; }
.pt-canvas-wrap { flex: 1; min-width: 0; background: #808080; padding: 6px; }
.pt-canvas { display: block; background: #fff; box-shadow: 1px 1px 2px rgba(0, 0, 0, .5); cursor: crosshair; touch-action: none; max-width: none; }
.pt-palette { flex: none; display: flex; gap: 6px; align-items: center; padding: 4px 6px; border-top: 1px solid #aca899; }
.pt-cur { position: relative; width: 32px; height: 32px; border: 1px solid; border-color: #808080 #fff #fff #808080; background: #fff; flex: none; }
.pt-cur span { position: absolute; width: 14px; height: 14px; border: 1px solid #000; }
.pt-fg { left: 4px; top: 4px; z-index: 1; }
.pt-bg { right: 4px; bottom: 4px; }
.pt-colors { display: grid; grid-template-columns: repeat(14, 16px); grid-template-rows: 16px 16px; gap: 1px; }
.pt-colors button { width: 16px; height: 16px; padding: 0; border: 1px solid; border-color: #808080 #fff #fff #808080; }
html.pocket .pt-colors { grid-template-columns: repeat(14, 20px); grid-template-rows: 20px 20px; }
html.pocket .pt-colors button { width: 20px; height: 20px; }
html.pocket .pt-tools { width: 64px; }
html.pocket .pt-tool { height: 32px; }