:root {
    color-scheme: light;
    font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Noto Sans JP", sans-serif;
    color: #2a2328;
    background: #fdf6f8;
    -webkit-text-size-adjust: 100%;
}
* { box-sizing: border-box; }
body { margin: 0; letter-spacing: 0; }
a { color: inherit; -webkit-tap-highlight-color: transparent; }
.game-list-main { width: 100%; max-width: 450px; min-height: calc(100svh - 80px); margin: 0 auto; padding: 18px 12px max(32px, env(safe-area-inset-bottom)); background: #fff; }
.game-list-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.game-list-heading h1 { margin: 0; font-size: 20px; font-weight: 750; line-height: 1.4; letter-spacing: -.03em; }
.game-list-count { color: #706872; font-size: 11px; line-height: 1.4; padding: 4px 8px; border-radius: 6px; background: #f4f3f5; white-space: nowrap; }
.game-list-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 12px; margin: 0; padding: 0; list-style: none; }
.game-list-grid > li { min-width: 0; }
.game-card { display: block; height: 100%; text-decoration: none; border-radius: 10px; }
.game-card-art { position: relative; display: block; aspect-ratio: 1; overflow: hidden; border-radius: 12px; isolation: isolate; background: #edd9e6; box-shadow: inset 0 0 0 1px #2a23280a; }
.thumb-scene { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.thumb-scene img { display: block; object-fit: contain; }
.game-card-title { display: block; margin: 9px 1px 0; font-size: 15px; font-weight: 700; line-height: 1.3; overflow-wrap: anywhere; }
.game-card-description { display: block; margin: 0 1px; color: #69616b; font-size: clamp(10px, 3.2vw, 12px); line-height: 1.4; overflow-wrap: anywhere; }
a:focus-visible { outline: 2px solid #d8648e; outline-offset: 3px; }
@media (hover: hover) { .game-card:hover .game-card-title { color: #d8648e; } .game-card:hover .game-card-art { filter: brightness(1.04); } }
@media (max-width: 450px) { :root { background: #fff; } }
.game-card-play-count { position: absolute; z-index: 3; top: 8px; right: 8px; display: inline-flex; align-items: center; gap: 3px; padding: 3px 7px; border-radius: 15px; background: rgba(255, 255, 255, 0.2); color: #fff; font-family: 'Noto Sans JP', sans-serif; font-size: 0.72em; font-weight: 400; line-height: 1.2; text-align: center; text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); white-space: nowrap; }
.game-card-play-icon { font-size: 1.1em; line-height: 1; }
.game-card-play-count strong { font-weight: 700; }
/* Small cover compositions use the same character, background and item assets as the games. */
.thumb-hud { position: absolute; z-index: 2; left: 7%; right: 7%; top: 5%; display: flex; align-items: center; justify-content: space-between; color: #fff; font-size: 10px; font-weight: 800; text-shadow: 0 1px 3px #6e3c6580; }
.thumb-hud b { font-size: 15px; }
.thumb-lenopuni { background: radial-gradient(ellipse at 50% 15%, #ffebf7, #f2c0da 55%, #d994bf); }
.thumb-puni-pile { position: absolute; inset: 0; }
.thumb-puni-pile img { position: absolute; width: 47%; height: 47%; left: var(--x); top: var(--y); transform: rotate(var(--r)); filter: drop-shadow(0 3px 2px #743c6e35); }
.thumb-puni-pile img:nth-child(n + 4) { width: 43%; height: 43%; }
.thumb-connect { position: absolute; left: 20%; top: 31%; width: 62%; height: 53%; border-radius: 50%; border: 4px solid #fff2acb3; transform: rotate(-25deg); box-shadow: 0 0 12px #fff7d9; }
.thumb-lenoflap { background: linear-gradient(#75c6ed, #c0e8f3 78%, #c2d889 78%); }
.thumb-cloud { position: absolute; width: 38%; height: 13%; background: #ffffffc9; border-radius: 50%; }
.cloud-one { top: 17%; left: -9%; }.cloud-two { top: 40%; left: 43%; width: 26%; height: 10%; }
.thumb-gate { position: absolute; right: 10%; width: 17%; background: linear-gradient(90deg, #87c794, #b1e1a2 35%, #6fb88d); border: 2px solid #5f9f76; border-radius: 3px; }
.gate-top { top: -3%; height: 30%; }.gate-bottom { bottom: -3%; height: 33%; }
.thumb-star { position: absolute; left: 69%; top: 42%; color: #ffed81; font-size: 26px; text-shadow: 0 2px #c8a753; }
.thumb-flyer { position: absolute; top: 20%; left: -1%; width: 74%; height: 74%; transform: rotate(-12deg); filter: drop-shadow(0 4px 2px #6d95b544); }
.thumb-hills { position: absolute; left: -10%; right: 30%; bottom: -20%; height: 35%; background: #95bf77; border-radius: 50%; }
.thumb-lenofight { background: radial-gradient(ellipse at 80% 40%, #ffe7a2, transparent 50%), linear-gradient(155deg, #e0b5aa, #a99cba 68%, #687b9b 68%); }
.thumb-fighter { position: absolute; left: -6%; bottom: -16%; width: 112%; height: 112%; object-position: center bottom; filter: drop-shadow(5px 3px 0 #ffffff80); }
.thumb-health { position: absolute; z-index: 2; top: 7%; width: 37%; height: 5%; border: 2px solid #fffa; background: #a7d99c; transform: skew(-12deg); }.health-one { left: 7%; }.health-two { right: 7%; background: #f3b2ba; }
.thumb-impact { position: absolute; top: 13%; right: -4%; width: 61%; height: 66%; background: #fff7bc; clip-path: polygon(50% 0,61% 29%,90% 8%,77% 41%,100% 56%,71% 64%,86% 97%,55% 77%,34% 100%,33% 72%,0 75%,23% 52%,7% 23%,39% 32%); }
.thumb-versus { position: absolute; z-index: 2; bottom: 8%; right: 8%; color: #fff5ce; font-size: 35px; font-weight: 900; font-style: italic; text-shadow: 2px 3px #8a5470; }
.thumb-lenoreflect { background: #18243d url('/games/lenoreflect/assets/stage-night-rooftop-v1.webp') center / cover; }
.thumb-burst-character { position: absolute; left: 14%; bottom: 16%; width: 54%; height: 54%; filter: drop-shadow(0 0 6px #a7d3ff); }
.thumb-slash { position: absolute; width: 100%; height: 63%; top: 9%; left: 18%; border: 7px solid transparent; border-bottom-color: #affffa; border-radius: 50%; transform: rotate(-45deg); filter: drop-shadow(0 0 4px #7dfcff); }
.thumb-bullet { position: absolute; left: var(--x); top: var(--y); width: 6%; aspect-ratio: 1; border-radius: 50%; background: #ff99c7; box-shadow: 0 0 7px #ff67b3; }
.thumb-lenodungeon { background: #333c48; }
.thumb-dungeon-floor { position: absolute; inset: 9% -15% -15%; transform: rotate(-12deg); background: repeating-linear-gradient(0deg, transparent 0 23px, #2a303c 24px 27px), repeating-linear-gradient(90deg, #596273 0 24px, #303948 25px 28px); border: 9px solid #1d2835; }
.thumb-chest { position: absolute; right: 10%; top: 19%; width: 36%; height: 28%; background: linear-gradient(#efc871 0 34%, #80582e 35% 45%, #d69b4a 46%); border: 4px solid #5b3c2b; border-radius: 9px 9px 3px 3px; box-shadow: 0 0 24px #ffeab15c; }.thumb-chest i { position: absolute; width: 14%; height: 40%; background: #fff1b6; top: 25%; left: 43%; }
.thumb-dungeon-character { position: absolute; width: 54%; height: 70%; left: 7%; bottom: 2%; image-rendering: pixelated; filter: drop-shadow(3px 4px #1d233b); }
.thumb-treasure { position: absolute; color: #fff3ac; right: 14%; top: 0; font-size: 30px; }
.thumb-crane { background: linear-gradient(145deg, #e5b5d5, #a9a6dd); }
.thumb-crane-frame { position: absolute; inset: 7% 10% 17%; border: 6px solid #fbe5f3; border-radius: 8px 8px 0 0; background: linear-gradient(120deg, #ffffff65, #ffffff15); box-shadow: 0 0 0 3px #ba87af; }
.thumb-claw { position: absolute; top: 0; left: 55%; width: 3%; height: 26%; background: #747392; }.thumb-claw i { position: absolute; bottom: -60%; left: -300%; width: 700%; height: 70%; border: 4px solid #747392; border-bottom-color: transparent; border-radius: 45%; }
.thumb-plush { position: absolute; inset: 25% 0 -2%; }.thumb-plush img { position: absolute; width: 53%; height: 66%; bottom: 0; left: -8%; transform: rotate(-15deg); }.thumb-plush img:nth-child(2) { left: 28%; bottom: 7%; transform: rotate(6deg); }.thumb-plush img:nth-child(3) { left: 56%; bottom: -2%; transform: rotate(18deg); }
.thumb-crane-bottom { position: absolute; left: 9%; right: 9%; bottom: 7%; height: 15%; background: #fce5f1; border-radius: 0 0 8px 8px; border-bottom: 4px solid #ba87af; }.thumb-crane-bottom i { position: absolute; width: 25%; height: 45%; left: 8%; top: 25%; border-radius: 3px; background: #a080a4; }.thumb-crane-bottom b { position: absolute; width: 11%; aspect-ratio: 1; border-radius: 50%; right: 13%; top: 16%; background: #f0aecc; border: 2px solid #c182af; }
.thumb-lenomatch { background: linear-gradient(145deg, #e7cef1, #9e8ac2); }.thumb-match-grid { position: absolute; display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; inset: 22% 8% 3%; transform: rotate(-7deg); }.thumb-match-grid > span { background: #ffffff60; border-radius: 6px; min-height: 0; }.thumb-match-grid img { width: 100%; height: 100%; }.thumb-match-grid > span:nth-child(3n + 2) { box-shadow: 0 0 8px 2px #ffe69c; background: #ffecc175; }
.thumb-lenoteto, .thumb-lenoblock { background: linear-gradient(145deg, #dfe6df, #96b3bd); }.thumb-lenoteto { background: linear-gradient(145deg, #a3b6d5, #677595); }
.thumb-block-grid { position: absolute; display: grid; grid-template-columns: repeat(4, 1fr); gap: 3px; top: 4%; left: 7%; width: 63%; height: 92%; padding: 5%; background: #2e3c5a44; border-radius: 6px; transform: rotate(-8deg); }.thumb-block-grid i { background: var(--block); border-radius: 3px; box-shadow: inset 2px 2px #ffffff50, inset -2px -2px #00000016; }.thumb-block-grid .is-empty { background: #ffffff12; box-shadow: none; }.thumb-block-character { position: absolute; right: -2%; bottom: -1%; width: 62%; height: 62%; filter: drop-shadow(-3px -2px 0 #fff8); }
.thumb-lenofishing { background: linear-gradient(#c6e8f1 0 29%, #82bfce 30% 33%, #5c9eb6 34%, #376989); }.thumb-water { position: absolute; inset: 30% -10% auto; height: 10%; border-top: 4px solid #f9ffe3b3; border-radius: 50%; }.thumb-fish { position: absolute; width: 98%; height: 77%; left: 0; top: 25%; filter: drop-shadow(0 4px 3px #294c6c55); }.thumb-fishing-line { position: absolute; top: -8%; right: 28%; height: 55%; width: 10%; border-right: 2px solid #fff9; border-bottom: 3px solid #fff9; border-radius: 0 0 12px; transform: rotate(8deg); }.thumb-bubble { position: absolute; border: 2px solid #ffffff70; border-radius: 50%; width: 8%; aspect-ratio: 1; }.bubble-one { left: 16%; top: 47%; }.bubble-two { left: 28%; top: 35%; width: 5%; }
.thumb-lenoslot { background: radial-gradient(ellipse at 50% 35%, #996689, #463453); }.thumb-slot-sign { position: absolute; top: 12%; width: 100%; color: #ffe2a3; text-align: center; font-size: 22px; font-weight: 900; letter-spacing: .04em; text-shadow: 0 2px #a8674c, 0 0 8px #ffe8ab70; }.thumb-reels { position: absolute; display: flex; gap: 3%; top: 34%; left: 5%; right: 5%; height: 43%; padding: 4%; background: #efcd8d; border-radius: 9px; box-shadow: 0 0 0 4px #f8e4bb3b; }.thumb-reels > span { width: 33%; background: linear-gradient(#e5d6de, #fff 45%, #e5d6de); border-radius: 5px; overflow: hidden; }.thumb-reels img { width: 140%; max-width: none; height: 100%; margin-left: -20%; }.thumb-slot-lights { position: absolute; width: 100%; bottom: 7%; text-align: center; color: #ffe2a3; font-size: 9px; }
.thumb-lenocafe { background: linear-gradient(135deg, #e9d4b7, #c5a588); }.thumb-cafe-character { position: absolute; top: -3%; right: -4%; height: 65%; width: 65%; }.thumb-cafe-grid { position: absolute; display: grid; grid-template-columns: repeat(3, 1fr); left: 3%; bottom: -3%; width: 80%; height: 74%; padding: 3%; gap: 2px; transform: rotate(-10deg); background: #fffaeeaa; border: 3px solid #fffaee; border-radius: 8px; }.thumb-cafe-grid svg { width: 100%; height: 100%; background: #ffffff50; border-radius: 3px; }
.thumb-lenosort { background: linear-gradient(145deg, #eee1df, #b9adb9); }.thumb-bottles { position: absolute; display: flex; align-items: flex-end; gap: 7%; left: 7%; right: 7%; top: 19%; height: 61%; transform: rotate(-8deg); }.thumb-bottle { display: flex; flex-direction: column; justify-content: flex-end; width: 21%; height: 100%; padding: 3px; border: 2px solid #fff; border-top-width: 4px; background: #ffffff35; border-radius: 0 0 10px 10px; box-shadow: 2px 3px 4px #675a6f26; overflow: hidden; }.thumb-bottle i { display: block; height: 23%; background: var(--water); box-shadow: inset 3px 0 #ffffff30; flex-shrink: 0; }.thumb-sort-character { position: absolute; width: 49%; height: 49%; right: -1%; bottom: -1%; transform: rotate(-5deg); }

.thumb-lenofarm { background: #b8c88a url('/games/lenofarm/assets/scenery.svg?v=2') center 25% / 100% auto no-repeat; }
.thumb-farm-beds { position: absolute; display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; left: 8%; right: 8%; bottom: 10%; height: 47%; }
.thumb-farm-beds i { position: relative; border-radius: 9px; background: #a78559; box-shadow: 0 3px #826640; }
.thumb-farm-beds svg { position: absolute; width: 110%; height: 140%; left: -5%; bottom: 0; }
.thumb-farm-companion { position: absolute; width: 40%; height: 40%; right: 7%; top: 11%; }

@media (prefers-reduced-motion: no-preference) {
    .game-card-art { transition: filter .16s ease; }
}
/* Air hockey cover: the same neon rink, gold puck and pink / cyan mallets as the game. */
.thumb-lenohockey { background: linear-gradient(140deg, #1c2941, #080e1c); }
.hockey-cover-rink { position: absolute; inset: -8% 19% -8% 4%; border: 7px solid #b5945d; border-radius: 22px; background: repeating-linear-gradient(0deg, transparent 0 17px, #8cb3d014 18px 19px), #101f33; transform: rotate(-15deg); box-shadow: 0 5px 0 #29364e; }
.hockey-cover-rink::before { content: ''; position: absolute; top: 50%; width: 100%; border-top: 2px solid #6c95b775; }
.hockey-cover-rink::after { content: ''; position: absolute; top: 35%; left: 20%; width: 60%; aspect-ratio: 1; border: 2px solid #6c95b775; border-radius: 50%; }
.hockey-cover-rink i, .hockey-cover-rink b { position: absolute; z-index: 1; left: 30%; top: 14%; width: 34%; aspect-ratio: 1; border: 5px solid #ff87c9; border-radius: 50%; background: #612c57; box-shadow: 0 4px 0 #fb58a83d, inset 0 0 0 4px #ffffff50; }
.hockey-cover-rink b { left: 20%; top: 67%; background: #20576d; border-color: #60e8ff; box-shadow: 0 4px 0 #28d3f13d, inset 0 0 0 4px #ffffff50; }
.hockey-cover-rink em { position: absolute; z-index: 2; width: 17%; aspect-ratio: 1; border-radius: 50%; background: #f1d592; left: 56%; top: 47%; border: 3px solid #fff1c3; }
.thumb-lenohockey img { position: absolute; width: 60%; height: 60%; right: -11%; top: 5%; transform: rotate(10deg); filter: drop-shadow(0 3px 1px #7e646630); }

/* Animal guessing: the same character portraits as the conversation game. */
.thumb-animal-guess{background:#e9eee5;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px}.thumb-animal-symbols{font-size:25px;color:#875343;display:flex;align-items:center;gap:15px}.thumb-animal-symbols b{font-size:46px;font-weight:500}.thumb-animal-faces{display:flex;gap:12px}.thumb-animal-faces img{width:64px;height:64px;object-fit:cover;object-position:top;border-radius:50%;border:3px solid #fffefb}