/*! Copyright 2026 orosz-szotar.hu. All rights reserved. See /games/NOTICE.txt. */
@charset "UTF-8"; .games-page { --card-paper:rgba(255,255,251,.68); } .games-page .glass { animation:none; } .games-shell { max-width:1264px; padding-bottom:28px; } .games-masthead { height:84px; width:100%; justify-content:space-between; } .back-link { display:inline-flex; align-items:center; gap:10px; min-height:44px; text-decoration:none; font-weight:600; font-size:13px; } .back-link > .back-arrow-icon { flex:none; width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; } .games-intro { text-align:center; padding:18px 0 27px; } .games-intro > .ad-area { margin-bottom:24px; } .eyebrow { font-size:10px; font-weight:700; letter-spacing:.15em; line-height:1.6; } .games-intro h1 { font-family:Caveat,var(--serif); font-size:clamp(55px,6.5vw,78px); line-height:1.1; font-weight:600; margin:0 0 13px; letter-spacing:-.025em; } .intro-copy { color:#4c6057; margin:0 auto; max-width:490px; font-size:15px; line-height:1.65; text-wrap:balance; }  :is( .games-masthead > .back-link, .games-intro > h1, .games-intro > .intro-copy, .games-intro .ad-label, .games-tabs a > [data-g-i18n], #game-menu > .section-heading > h2, #game-menu > .section-heading > span, #vocabulary-library > .section-heading > h2, #vocabulary-library > .library-note, #vocabulary-library > .loader-status:not(.error-message), .loader-result-heading > p, .vocabulary-page-summary, .loader-result-heading > label > span, .back-to-top > a, .games-privacy > a, .games-privacy > button ) { color:#203b35; text-shadow:1px 0 #fffdf3,-1px 0 #fffdf3,0 1px #fffdf3,0 -1px #fffdf3, 1px 1px #fffdf3,-1px -1px #fffdf3,1px -1px #fffdf3,-1px 1px #fffdf3, 0 1px 4px rgba(255,253,243,.95); } .games-intro > h1 { text-shadow:2px 0 #fffdf3,-2px 0 #fffdf3,0 2px #fffdf3,0 -2px #fffdf3,2px 2px #fffdf3,-2px -2px #fffdf3,2px -2px #fffdf3,-2px 2px #fffdf3,0 1px 6px #fffdf3; } .games-tabs { display:flex; gap:26px; border-bottom:1px solid rgba(35,60,57,.2); margin:0 0 22px; } .games-tabs a { display:flex; align-items:center; justify-content:center; gap:9px; padding:15px 3px; text-decoration:none; font-weight:600; font-size:14px; position:relative; color:#586b60; } .games-tabs a[aria-current="page"] { color:var(--green-dark); } .games-tabs a[aria-current="page"]::after { content:""; position:absolute; height:3px; border-radius:4px 4px 0 0; background:var(--green); bottom:-1px; left:0; right:0; } .games-tabs svg { width:18px; height:18px; color:#203b35; filter:drop-shadow(1px 0 0 #fffdf3) drop-shadow(-1px 0 0 #fffdf3) drop-shadow(0 1px 0 #fffdf3) drop-shadow(0 -1px 0 #fffdf3); } .tab-count { font-size:10px; padding:2px 6px; border-radius:5px; background:rgba(255,253,243,.8); color:#203b35; } .active-content { position:relative; display:flex; align-items:stretch; gap:0; padding:0; border-radius:18px; overflow:hidden; } .active-content.has-active-vocabulary { cursor:pointer; } .active-content-main { position:relative; display:flex; align-items:center; gap:18px; padding:22px 25px; flex:1; min-width:0; } .active-content-info { display:flex; align-items:center; gap:18px; flex:1; min-width:0; } .active-content-info .active-description { flex:0 1 auto; } #active-games,#active-vocabulary { flex:none; } .active-description { flex:1; min-width:0; text-align:left; } .active-description .eyebrow { display:block; text-align:left; margin:0 0 10px; font-size:9px; color:#637267; } .active-description h2 { font-family:var(--serif); font-size:20px; font-weight:500; margin:0 0 5px; } .active-description p:last-child { margin:0; font-size:12px; line-height:1.6; color:#5e7066; } .content-actions { display:flex; gap:7px; flex-wrap:wrap; } .g-button { display:inline-flex; align-items:center; justify-content:center; gap:7px; min-height:43px; padding:10px 14px; border:1px solid rgba(54,94,80,.2); border-radius:9px; background:rgba(255,255,251,.36); text-decoration:none; font-size:12px; font-weight:600; line-height:1.4; } .g-button.primary { background:var(--green); color:#fffef5; border-color:var(--green); box-shadow:0 3px 7px rgba(35,60,57,.09); } .g-button svg { width:17px; height:17px; } .g-button:hover { background:rgba(255,255,251,.75); } .g-button.primary:hover { background:var(--green-dark); } .section-heading { display:flex; justify-content:space-between; align-items:baseline; gap:12px; margin:30px 0 17px; } .section-heading h2 { font-family:var(--serif); font-size:23px; letter-spacing:-.02em; font-weight:500; margin:0; } .section-heading > span { font-size:11px; color:#50655b; } .game-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:15px; } .game-card { --game-color:#416f5a; --game-wash:#dde9d7; --game-light:#f1f4e6; display:flex; flex-direction:column; position:relative; min-width:0; padding:17px 20px 13px; border-radius:17px; text-decoration:none; overflow:hidden; background:var(--card-paper); transition:transform .2s,box-shadow .2s,background .2s; } .game-card:hover { transform:translateY(-4px); box-shadow:0 12px 30px rgba(35,60,57,.1); background:rgba(255,255,251,.87); } .game-card:active { transform:translateY(-1px); } .card-top { display:flex; justify-content:space-between; gap:8px; align-items:center; } .game-kind { font-size:9px; color:var(--game-color); border:1px solid color-mix(in srgb,var(--game-color) 18%,transparent); padding:3px 7px; border-radius:20px; white-space:nowrap; background:color-mix(in srgb,var(--game-wash) 45%,transparent); } .game-illustration { height:99px; display:flex; align-items:center; justify-content:center; margin:6px 0 3px; } .game-illustration > svg { width:156px; height:103px; overflow:visible; color:var(--game-color); stroke-width:1.5; } .game-illustration .paper { fill:var(--game-light); } .game-illustration .wash { fill:var(--game-wash); stroke:none; } .game-illustration .ink { fill:var(--game-color); stroke:none; } .game-illustration text { fill:var(--game-color); stroke:none; font-family:Georgia,serif; text-anchor:middle; } .game-card h3 { font-family:var(--serif); font-size:21px; line-height:1.25; font-weight:500; margin:5px 0 7px; letter-spacing:-.02em; } .game-card p { font-size:12px; line-height:1.65; color:#56695f; margin:0 0 14px; flex:1; } .card-footer { display:flex; justify-content:space-between; align-items:center; border-top:1px solid rgba(54,94,80,.1); padding-top:10px; font-size:11px; font-weight:600; color:var(--game-color); } .card-arrow { font-size:19px; font-weight:400; line-height:1; } .game-flashcards { --game-color:#9c623e; --game-wash:#f0dfc8; --game-light:#fbf4e8; } .game-memory { --game-color:#566c95; --game-wash:#dce4ef; --game-light:#f1f3fb; } .game-hangman { --game-color:#89654b; --game-wash:#eadfce; --game-light:#faf6ed; } .game-word-scramble { --game-color:#8c665d; --game-wash:#efded4; --game-light:#fcf2ed; } .game-word-search { --game-color:#4b7c76; --game-wash:#d5e8e2; --game-light:#eff9f3; } .game-crossword { --game-color:#73704a; --game-wash:#e6e5cd; --game-light:#f8f7e9; } .game-word-detective { --game-color:#7e657f; --game-wash:#e7dce8; --game-light:#faf0f9; } .games-footer { display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); align-items:center; gap:16px; margin-top:35px; color:#4a5e53; } .games-privacy { display:flex; flex-wrap:wrap; gap:8px 14px; font-size:10px; text-underline-offset:3px; } .games-privacy button { font:inherit; padding:0; border:0; background:none; text-decoration:underline; text-underline-offset:3px; } .games-footer .scene-credit { margin:0; } .games-footer .scene-caption { background:rgba(255,255,251,.58); border-radius:30px; padding:7px 8px 7px 14px; backdrop-filter:blur(12px); } .page-status:empty { display:none; } .vocabulary-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; } .vocabulary-card { display:flex; flex-direction:column; gap:8px; padding:20px; border-radius:14px; text-decoration:none; min-width:0; overflow-wrap:anywhere; } .vocabulary-card h3 { font-family:var(--serif); font-size:21px; font-weight:500; margin:0; } .vocabulary-card p { font-size:12px; margin:0; color:#52665d; } .vocabulary-card .file-name { font-family:monospace; font-size:10px; color:#5c7065; } .vocabulary-card .download-link { display:flex; align-items:center; justify-content:space-between; margin-top:7px; font-size:12px; font-weight:600; color:var(--green); } .vocabulary-card:hover { background:rgba(255,255,251,.82); } .library-note { font-size:13px; line-height:1.7; color:#50655b; margin:0 0 21px; } .detail-panel { border-radius:20px; padding:40px; margin-top:24px; max-width:100%; } .detail-panel .game-illustration { justify-content:flex-start; margin:15px 0; } .detail-panel h2 { font-family:var(--serif); font-weight:500; font-size:34px; margin:10px 0 15px; } .detail-panel p { line-height:1.8; max-width:580px; color:#50655b; } .detail-panel .back-link { font-size:12px; } .coming-note { display:inline-flex; padding:6px 12px; font-size:11px; border-radius:20px; background:rgba(181,109,80,.1); border:1px solid rgba(181,109,80,.2); color:#805139; } .noscript-note { padding:20px; border-radius:12px; } @media(min-width:1440px) { .games-intro { padding-top:28px; padding-bottom:36px; } .game-illustration { height:108px; } } @media(max-width:1050px) { .active-content-main { flex-wrap:wrap; } .game-grid { gap:12px; } .game-card { padding:15px; } .game-card h3 { font-size:19px; } } @media(max-width:800px) { .game-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .game-card { padding:18px 22px 14px; } .vocabulary-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .game-card h3 { font-size:23px; } .game-card p { min-height:40px; } .games-intro { padding-top:9px; } } @media(max-width:500px) { .games-shell { padding-left:18px; padding-right:18px; } .games-masthead { height:69px; } .games-intro h1 { font-size:58px; margin-bottom:10px; } .intro-copy { font-size:13px; max-width:300px; } .games-tabs { margin-bottom:17px; } .active-content { border-radius:15px; } .active-content-main { padding:18px; gap:13px; } .active-description h2 { font-size:18px; } .active-description p:last-child { font-size:11px; } .active-description .eyebrow { font-size:8px; letter-spacing:.1em; } .content-actions { margin:3px 0 0; width:100%; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:5px; } .g-button { padding:10px 7px; gap:5px; font-size:11px; } .g-button svg { width:15px; height:15px; } .section-heading { flex-wrap:wrap; gap:6px; margin-top:26px; } .section-heading h2 { font-size:22px; } .section-heading > span { font-size:10px; } .game-grid { gap:11px; } .game-card { padding:13px 13px 11px; border-radius:14px; } .game-illustration { height:89px; } .game-illustration > svg { width:125px; height:90px; } .game-card h3 { font-size:20px; } .game-card p { font-size:11px; min-height:55px; line-height:1.65; margin-bottom:12px; } .game-kind { font-size:8px; padding:3px 5px; } .card-footer { font-size:10px; } .games-footer { gap:20px; margin-top:25px; } .games-footer .scene-caption { max-width:100%; } .vocabulary-grid { grid-template-columns:1fr; } .detail-panel { padding:25px; } .detail-panel h2 { font-size:29px; overflow-wrap:anywhere; } } @media(max-width:350px) { .games-shell { padding-left:12px; padding-right:12px; } .game-card { padding:12px 10px; } .game-card h3 { font-size:18px; } .game-kind { font-size:7px; } .g-button { font-size:10px; } } @media(prefers-reduced-motion:reduce) { .game-card { transition:none; } .game-card:hover { transform:none; } }  .clear-active { position:absolute; right:-4px; top:-4px; z-index:2; display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; padding:10px; border:0; border-radius:50%; background:transparent; color:var(--green); cursor:pointer; } .clear-active svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; } .clear-active:hover:not(:disabled) { background:#365e5014; } .clear-active:focus-visible { outline:3px solid #a87b5d; outline-offset:-3px; } .clear-active:disabled { opacity:.45; cursor:default; } .active-preview { display:inline-flex; align-items:center; gap:7px; min-height:36px; padding:7px 0; margin-top:2px; background:none; color:var(--green-dark); font-size:12px; font-weight:600; text-decoration:underline; text-underline-offset:4px; } .active-preview svg { flex:none; width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; } .active-preview:disabled { opacity:.5; } .active-description h2 { overflow-wrap:anywhere; } .loader-heading { align-items:center; } .loader-filters { border-radius:16px; padding:21px 23px; margin-bottom:20px; } .loader-filters input,.loader-filters select,.loader-result-heading select { font:inherit; color:var(--ink); background:rgba(255,255,251,.8); border:1px solid rgba(54,94,80,.25); border-radius:8px; min-height:44px; padding:9px 12px; max-width:100%; min-width:0; } .loader-filters input:focus-visible,.loader-filters select:focus-visible,.loader-result-heading select:focus-visible { outline:3px solid #ab755b; outline-offset:3px; } .filter-search-row { display:grid; grid-template-columns:auto minmax(100px,1fr) auto; align-items:center; gap:12px; } .filter-search-row label { font-size:12px; font-weight:600; } .loader-filters fieldset { border:0; padding:0; margin:18px 0 0; min-width:0; } .loader-filters legend { padding:0; margin-bottom:9px; font-size:12px; font-weight:600; } .filter-chips { display:flex; flex-wrap:wrap; gap:6px; } .filter-chip { min-width:44px; min-height:40px; font-size:12px; padding:8px 13px; background:rgba(255,255,251,.5); border:1px solid rgba(54,94,80,.2); border-radius:22px; } .filter-chip[aria-pressed="true"] { background:var(--green); border-color:var(--green); color:white; } .filter-chip:disabled { opacity:.5; } .loader-filters summary { cursor:pointer; font-size:12px; font-weight:600; padding:14px 0 8px; min-height:40px; } .loader-filters details { margin-top:7px; } .filter-fields { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:13px; margin-top:20px; } .filter-fields label { display:flex; flex-direction:column; gap:8px; font-size:12px; } .topic-choices { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:4px 15px; max-height:260px; overflow-y:auto; overscroll-behavior:contain; padding:5px 3px; } .topic-choices label { display:flex; align-items:center; gap:8px; padding:6px 0; min-height:40px; font-size:12px; overflow-wrap:anywhere; } .topic-choices input { flex:none; min-height:18px; width:18px; height:18px; margin:0; accent-color:var(--green); } .loader-status { font-size:13px; line-height:1.6; color:var(--green-dark); } .loader-status:empty { display:none; } .loader-status.error-message { padding:12px 15px; border:1px solid #b56d5066; border-radius:9px; background:#fff4e7df; color:#8a3f24; } .loader-result-heading { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px; margin:15px 0; font-size:12px; color:#4b6356; } .loader-result-heading p { margin:0; } .loader-result-heading select { font-size:12px; } .loader-card { position:relative; padding:0; border:2px solid transparent; } .loader-card.selected { border-color:var(--green); box-shadow:0 0 0 2px rgba(54,94,80,.1); } .vocabulary-pick { display:flex; flex-direction:column; align-items:flex-start; gap:10px; text-align:start; padding:19px 18px 9px; background:none; width:100%; height:100%; color:var(--ink); } .vocabulary-pick:disabled { opacity:.6; } .vocabulary-title { width:100%; padding-inline-end:42px; font-family:var(--serif); font-size:22px; font-weight:500; line-height:1.25; } .vocabulary-summary { font-size:12px; color:#52665d; line-height:1.7; } .vocabulary-badges { display:flex; flex-wrap:wrap; gap:6px; align-items:center; width:100%; justify-content:flex-start; } .level-badge,.rating-badge,.source-badge { display:inline-flex; font-size:10px; line-height:1.5; background:rgba(54,94,80,.08); color:var(--green-dark); padding:4px 7px; border-radius:5px; } .rating-badge { background:rgba(181,109,80,.08); color:#79543a; } .vocabulary-card-actions { display:flex; align-items:center; flex-wrap:wrap; gap:7px; padding:0 18px 17px; margin-top:auto; } .vocabulary-card-actions .g-button { padding:7px 11px; min-height:40px; } .remove-local { margin-inline-start:auto; min-width:44px; min-height:44px; } .remove-local svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; } .loader-selection { display:flex; position:sticky; bottom:12px; z-index:3; gap:20px; align-items:center; justify-content:space-between; background:rgba(255,255,246,.94); padding:18px 22px; margin-top:22px; border-radius:14px; box-shadow:0 4px 24px rgba(35,60,57,.15); } .loader-selection > div { display:flex; flex-direction:column; gap:6px; min-width:0; overflow-wrap:anywhere; } .loader-selection strong { font-size:13px; } .loader-selection span { font-size:11px; color:#52665d; } .loader-selection button { flex:none; } .g-button:disabled { opacity:.5; cursor:not-allowed; } .loader-empty { padding:30px; border-radius:14px; text-align:center; } .loader-empty h3 { font-family:var(--serif); font-size:24px; font-weight:500; } .loader-empty p { font-size:13px; line-height:1.7; } .vocabulary-preview { width:min(760px,calc(100% - 30px)); max-height:calc(100dvh - 40px); overflow-y:auto; border:1px solid rgba(54,94,80,.3); border-radius:18px; background:#faf9f0; color:var(--ink); padding:24px; box-shadow:0 20px 80px #172c3655; } .vocabulary-preview::backdrop { background:rgba(25,42,34,.4); backdrop-filter:blur(5px); } .preview-top { display:flex; align-items:center; justify-content:space-between; gap:14px; } .preview-top h2 { font-family:var(--serif); font-size:28px; font-weight:500; margin:0; overflow-wrap:anywhere; } #preview-meta { font-size:12px; color:#52665d; line-height:1.6; } .preview-table-wrap { overflow:auto; max-height:55dvh; margin-top:20px; } .vocabulary-preview table { border-collapse:collapse; width:100%; table-layout:fixed; font-size:14px; } .vocabulary-preview th { text-align:start; position:sticky; top:0; background:#eff1e7; z-index:1; } .vocabulary-preview th,.vocabulary-preview td { width:50%; padding:12px; border-bottom:1px solid var(--border); vertical-align:top; overflow-wrap:anywhere; } .vocabulary-preview strong { font-weight:500; } .word-description { display:block; font-size:12px; line-height:1.6; color:#52665d; margin-top:6px; } .preview-text-with-audio { display:flex; align-items:center; gap:6px; } .preview-text-with-audio > strong,.preview-text-with-audio > .word-description { flex:0 1 auto; min-width:0; } .preview-text-with-audio.description-row { margin-top:7px; } .description-row .word-description { margin-top:0; } .vocabulary-audio { flex:none; margin:0; min-width:36px; min-height:36px; } .preview-speech-status { font-size:12px; line-height:1.6; color:#8a3f24; } .preview-speech-status:empty { display:none; } .preview-bottom { display:flex; justify-content:flex-end; margin-top:20px; } @media(max-width:800px) { .topic-choices { grid-template-columns:repeat(2,minmax(0,1fr)); } .filter-fields { grid-template-columns:repeat(2,minmax(0,1fr)); } } @media(max-width:500px) { .loader-filters { padding:17px; } .filter-search-row { grid-template-columns:minmax(0,1fr) auto; gap:9px; } .filter-search-row label { grid-column:1/-1; } .filter-search-row .g-button { font-size:10px; } .filter-chip { min-height:44px; } .topic-choices { grid-template-columns:1fr; } .loader-result-heading { align-items:flex-start; flex-direction:column; } .loader-selection { padding:14px; gap:13px; flex-wrap:wrap; bottom:7px; } .loader-selection button { width:100%; } .vocabulary-preview { padding:18px; } .preview-top h2 { font-size:24px; } .vocabulary-preview th,.vocabulary-preview td { padding:10px 7px; } .preview-bottom button { width:100%; } .vocabulary-audio { min-width:44px; min-height:44px; } }  .study-game { padding:27px 30px 25px; margin-top:24px; border-radius:20px; } .study-heading { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:start; gap:15px; } .study-heading > .back-link { justify-self:end; align-self:start; max-width:180px; text-align:right; } .study-heading h2 { font-family:var(--serif); font-size:30px; font-weight:500; margin:0; } .study-help { margin:12px 0 18px; font-size:12px; color:#435d51; } .study-help summary { cursor:pointer; min-height:36px; padding:10px 0; } .study-help p { margin:6px 0 10px; max-width:760px; line-height:1.8; } .study-toolbar { display:flex; flex-wrap:wrap; gap:8px; } .study-progress-row { display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap; margin:23px 0 9px; font-size:12px; line-height:1.6; } .study-game progress { display:block; width:100%; height:8px; border:none; border-radius:8px; overflow:hidden; accent-color:var(--green); background:#365e501a; } .study-game progress::-webkit-progress-bar { background:#365e501a; border-radius:8px; } .study-game progress::-webkit-progress-value { background:var(--green); border-radius:8px; transition:width .2s; } .study-game progress::-moz-progress-bar { background:var(--green); border-radius:8px; } .study-deck { position:relative; width:min(530px,100%); margin:36px auto 18px; isolation:isolate; } .study-deck::before,.study-deck::after { content:""; position:absolute; inset:0; background:#eeeedf; border:1px solid #a9b5a6; border-radius:18px; z-index:-1; } .study-deck::before { transform:rotate(-3deg) translate(-4px,2px); } .study-deck::after { transform:rotate(2deg) translate(3px,4px); } .study-card { display:flex; width:100%; min-height:280px; flex-direction:column; align-items:center; justify-content:center; gap:25px; padding:26px 32px; border:1px solid #b4bcaa; border-radius:18px; background:linear-gradient(145deg,#fffdf4,#f2f2e3); color:#233c39; box-shadow:0 8px 22px #233c3920; touch-action:none; } .study-card[data-long="true"] { touch-action:pan-y; } .study-card-language { font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:#526b59; } .study-word { max-width:100%; max-height:35vh; overflow:auto; overscroll-behavior:contain; overflow-wrap:anywhere; font-family:var(--serif); font-size:clamp(26px,4.6vw,48px); line-height:1.35; } .study-game[data-appearance="forest"] .study-card { background:linear-gradient(145deg,#315b4d,#193d32); color:#fffdf0; border-color:#aac6ad; } .study-game[data-appearance="forest"] .study-card-language { color:#d8e7d2; } .study-word-audio { display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:9px; font-size:12px; color:#435d51; } .study-flip-guide { font:inherit; color:inherit; background:none; padding:8px 4px; min-height:44px; text-decoration:underline; text-underline-offset:3px; } .study-flip-guide:hover { color:var(--green-dark); } .study-audio { min-width:44px; min-height:44px; border:1px solid #365e5026; background:#fffdf470; color:var(--green-dark); } .study-description { display:flex; align-items:center; gap:14px; max-width:530px; padding:13px 17px; margin:8px auto 15px; border:1px solid var(--border); background:#fffff35e; border-radius:12px; } .study-description p { flex:1; min-width:0; margin:0; font-size:14px; line-height:1.8; overflow-wrap:anywhere; white-space:pre-wrap; } .study-description button { flex:none; } .study-decisions { display:grid; grid-template-columns:1fr 1fr; gap:12px; max-width:530px; margin:20px auto 0; } .study-decisions button { min-height:48px; font-size:14px; } .study-keep { background:#fff9edc7; border-color:#b56d5066; color:#7b4c35; } .study-status { min-height:20px; margin:18px 0 0; font-size:12px; line-height:1.7; text-align:center; } .study-prompt { padding:35px 15px; text-align:center; } .study-prompt h3,.study-complete h3 { font-family:var(--serif); font-size:28px; font-weight:500; margin:12px 0 16px; } .study-prompt p,.study-complete p { line-height:1.8; font-size:14px; } .study-prompt-actions { display:flex; justify-content:center; flex-wrap:wrap; gap:12px; margin-top:20px; } .study-complete { text-align:center; padding:30px 15px; } .study-celebration { color:var(--accent); font-size:54px; letter-spacing:.2em; animation:study-celebrate 1.2s ease-out; } .study-celebration span { color:var(--green); font-size:75px; } @keyframes study-celebrate { from { opacity:0; transform:scale(.6) translateY(18px); } to { opacity:1; transform:scale(1) translateY(0); } } @media(max-width:600px) { .study-game { padding:20px 17px; } .study-heading { gap:12px; } .study-heading > .back-link { max-width:100px; margin-right:-10px; font-size:12px; gap:6px; text-align:left; } .study-heading h2 { font-size:28px; } .study-toolbar .g-button { min-height:44px; flex:1 1 42%; } .study-card { min-height:250px; padding:25px 20px; } .study-decisions { gap:8px; } .study-decisions button { font-size:12px; padding:12px 8px; } } @media(prefers-reduced-motion:reduce) { .study-celebration { animation:none; } .study-game progress::-webkit-progress-value { transition:none; } }  .flash-game { margin-top:24px; padding:27px 30px; border-radius:20px; } .flash-toolbar { display:flex; align-items:flex-end; flex-wrap:wrap; gap:10px; } .flash-toolbar label { display:flex; flex-direction:column; gap:7px; font-size:12px; } .editor-fields select,.loader-filters select,.loader-result-heading select,.flash-toolbar select,.memory-toolbar select,.cross-hint-setting select { min-height:43px; max-width:100%; font:inherit; color:var(--ink); border:1px solid #365e5033; border-radius:8px; padding:9px 40px 9px 12px; appearance:none; -webkit-appearance:none; background-color:#fffdf4c9; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='m1 1 5 5 5-5' fill='none' stroke='%23365e50' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-size:12px 8px; background-position:right 14px center; } .flash-settings { display:flex; flex-wrap:wrap; gap:6px 20px; margin-top:15px; } .flash-settings label { display:flex; align-items:center; gap:8px; min-height:36px; font-size:12px; line-height:1.7; } .flash-settings input { accent-color:var(--green); width:18px; height:18px; flex:none; } .flash-game progress { display:block; width:100%; height:8px; border:0; border-radius:8px; overflow:hidden; accent-color:var(--green); background:#365e501a; } .flash-game progress::-webkit-progress-bar { background:#365e501a; } .flash-game progress::-webkit-progress-value { background:var(--green); } .flash-game progress::-moz-progress-bar { background:var(--green); } .flash-prompt { max-width:700px; margin:27px auto 20px; padding:25px; border:1px solid #a9b9a8; border-radius:16px; background:linear-gradient(145deg,#fffdf5,#f0f1e1); text-align:center; } .flash-prompt-word { display:flex; justify-content:center; align-items:center; gap:14px; margin:15px 0; } .flash-prompt-word strong { font-family:var(--serif); font-size:clamp(27px,4.4vw,44px); line-height:1.35; font-weight:500; min-width:0; overflow-wrap:anywhere; max-height:30vh; overflow:auto; } .flash-prompt-word button { flex:none; } .flash-prompt > p { font-size:12px; color:#496052; line-height:1.6; margin:10px 0 0; } .flash-choices { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; } .flash-choice { display:flex; flex-direction:column; gap:10px; justify-content:center; align-items:center; min-height:84px; padding:17px; border:1px solid #365e5038; border-radius:12px; background:#fffdf4de; color:var(--ink); font-size:18px; line-height:1.5; overflow-wrap:anywhere; } .flash-choice span { max-width:100%; } .flash-choice img { width:100%; height:120px; object-fit:contain; border-radius:6px; } .flash-choice:hover:not(:disabled) { background:#e7eedc; border-color:var(--green); } .flash-choice:disabled { cursor:default; } .flash-choice.correct { border:2px solid #447642; background:#e3f0d8; color:#234922; } .flash-choice.incorrect { border:2px solid #ab5c3c; background:#f8e7dc; color:#71351f; } .flash-hint-panel { display:grid; grid-template-columns:1fr 1fr; gap:12px; max-width:700px; margin:0 auto 20px; } .flash-hint-panel > div { padding:14px; border:1px solid var(--border); border-radius:12px; background:#fffdf49c; } .flash-hint-panel span { font-size:10px; letter-spacing:.08em; text-transform:uppercase; } .flash-hint-panel p { font-size:13px; line-height:1.7; white-space:pre-wrap; overflow-wrap:anywhere; } .flash-picture-note { font-size:11px; line-height:1.6; color:#4b6354; margin:0 0 15px; } .flash-answer-form { max-width:700px; margin:0 auto 15px; } .flash-answer-form label { display:block; font-size:12px; margin-bottom:8px; } .flash-answer-form > div { display:flex; gap:9px; } .flash-answer-form input { min-width:0; flex:1; min-height:48px; padding:12px 14px; font:inherit; font-size:18px; color:var(--ink); border:1px solid #607b663d; border-radius:9px; background:#fffdf4; } .flash-answer-form button { flex:none; } .flash-keyboard-tools { max-width:700px; margin:0 auto; text-align:start; } .flash-feedback { margin:20px 0; padding:14px 18px; border:1px solid #ab5c3c66; border-radius:10px; background:#fff2e7; color:#823c24; font-weight:600; font-size:14px; text-align:center; } .flash-feedback[data-correct="true"] { background:#edf5df; border-color:#44764266; color:#315a2e; } .flash-correction { max-width:700px; margin:20px auto 0; padding:21px; border:1px solid #b98b6b66; border-radius:14px; background:#fff9ed; } .flash-correction h3 { font-family:var(--serif); font-size:24px; font-weight:500; margin:0 0 17px; } .flash-correction p { font-size:14px; line-height:1.8; overflow-wrap:anywhere; } .flash-correction strong { font-weight:600; overflow-wrap:anywhere; } .flash-correct-answer { display:flex; align-items:center; flex-wrap:wrap; gap:9px; font-size:14px; } .flash-correct-answer > strong { font-family:var(--serif); font-size:23px; } .flash-correction > button { margin-top:15px; } .flash-keyboard { max-width:700px; margin:15px auto 0; padding:11px; background:#fffdf47d; border:1px solid var(--border); border-radius:12px; } .flash-keyboard-row { display:flex; justify-content:center; gap:4px; margin:4px 0; } .flash-keyboard button { min-width:0; flex:1; min-height:44px; padding:5px 2px; border:1px solid #365e502b; border-radius:6px; color:var(--ink); background:#fffdf4; font:inherit; } .flash-keyboard button:hover { background:#e6efdb; } .flash-keyboard-controls { display:flex; gap:5px; margin-top:8px; } .flash-keyboard-controls button:nth-child(3) { flex:3; } .flash-keyboard-controls button[aria-pressed="true"] { background:var(--green); color:white; } @media(max-width:700px) { .flash-choices { grid-template-columns:repeat(2,minmax(0,1fr)); } } @media(max-width:500px) { .flash-game { padding:20px 17px; } .flash-toolbar { align-items:stretch; } .flash-toolbar > label { width:100%; } .flash-toolbar > button { flex:1 1 40%; min-height:44px; } .flash-choice { font-size:16px; padding:12px; } .flash-choice img { height:100px; } .flash-prompt { padding:20px 15px; } .flash-hint-panel { grid-template-columns:1fr; } .flash-answer-form > div { flex-wrap:wrap; } .flash-answer-form input { flex-basis:100%; } .flash-answer-form button { width:100%; } .flash-keyboard { padding:6px; } .flash-keyboard-row { gap:2px; } .flash-keyboard button { font-size:12px; } }  .memory-game { margin-top:24px; padding:27px 30px; border-radius:20px; } .memory-toolbar { display:flex; align-items:flex-end; flex-wrap:wrap; gap:10px; } .memory-toolbar label { display:flex; flex-direction:column; gap:7px; font-size:12px; min-width:0; } .memory-game progress { display:block; width:100%; height:8px; border:0; border-radius:8px; overflow:hidden; accent-color:var(--green); background:#365e501a; } .memory-game progress::-webkit-progress-bar { background:#365e501a; } .memory-game progress::-webkit-progress-value { background:var(--green); } .memory-game progress::-moz-progress-bar { background:var(--green); } .memory-board { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; margin-top:25px; } .memory-tile { display:flex; position:relative; flex-direction:column; align-items:center; justify-content:center; gap:10px; min-width:0; min-height:0; width:100%; aspect-ratio:1; overflow:hidden; padding:17px 14px; border:1px solid #547a69; border-radius:13px; color:#fffdf1; background:repeating-linear-gradient(135deg,#ffffff08 0 2px,transparent 2px 13px),linear-gradient(135deg,#426f5f,#2e5547); box-shadow:0 3px 9px #233c3918; transition:background .18s,box-shadow .18s; } .memory-back { font-size:34px; color:#f3f4d9; opacity:.85; } .memory-tile.is-open { background:#fffdf3; color:#233c39; border-color:#a3b59b; } .memory-tile.is-matched { background:#e6f0d8; border:2px solid #527d49; } .memory-tile:disabled { cursor:default; } .memory-word { display:block; min-width:0; width:100%; overflow:hidden; white-space:nowrap; text-align:center; font-family:var(--serif); font-size:clamp(17px,2.1vw,26px); line-height:1.4; } .memory-tile img { display:block; max-width:100%; width:100%; height:115px; min-height:0; flex-shrink:1; object-fit:contain; border-radius:5px; } .memory-listen { position:absolute; right:7px; bottom:7px; display:flex; padding:0; border:0; background:none; line-height:1; color:#203b35; } .memory-listen svg { width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; filter:drop-shadow(1px 0 0 #fffdf3) drop-shadow(-1px 0 0 #fffdf3) drop-shadow(0 1px 0 #fffdf3) drop-shadow(0 -1px 0 #fffdf3); } .memory-tile.playing { box-shadow:0 0 0 3px #b56d5070; } .memory-tile.just-revealed { animation:memory-reveal .18s ease-out; } @keyframes memory-reveal { from { opacity:.55; transform:scale(.97); } to { opacity:1; transform:scale(1); } } @media(max-width:600px) { .memory-game { padding:20px 14px; } .memory-toolbar > label { flex:1 1 100%; } .memory-toolbar button { min-height:44px; flex:1; } .memory-board { gap:7px; } .memory-tile { padding:11px 5px; border-radius:9px; gap:7px; } .memory-word { font-size:14px; } .memory-tile img { height:70px; } .memory-back { font-size:27px; } } @media(prefers-reduced-motion:reduce) { .memory-tile { transition:none; } .memory-tile.just-revealed { animation:none; } } .active-description .active-filename { margin:4px 0; color:#5e7066; font-size:11px; line-height:1.5; overflow-wrap:anywhere; } .loader-filters .rating-field { margin:0; } .loader-filters .rating-field legend { margin-bottom:8px; font-size:12px; font-weight:400; } .rating-picker { display:flex; flex-wrap:wrap; align-items:center; gap:2px; min-height:44px; } .rating-picker button { display:grid; place-items:center; min-width:40px; min-height:44px; padding:4px; border:0; border-radius:6px; background:none; color:#79543a; font:inherit; font-size:24px; cursor:pointer; } .rating-picker button[aria-pressed="true"],.rating-picker button:hover { background:#365e501a; } .rating-picker button:focus-visible { outline:3px solid #ab755b; outline-offset:2px; } .loader-result-heading label { display:flex; align-items:center; gap:10px; font-size:12px; } .game-card-link { position:absolute; inset:0; z-index:1; border-radius:inherit; } .game-card-link:focus-visible { outline:3px solid #ab755b; outline-offset:-4px; } .game-like { position:relative; z-index:2; display:inline-flex; align-items:center; justify-content:center; gap:6px; min-height:36px; min-width:44px; padding:5px 7px; border:0; border-radius:8px; background:transparent; color:#526d5b; font:inherit; font-size:12px; cursor:pointer; } .game-like svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linejoin:round; stroke-linecap:round; } .game-like[aria-pressed="true"] { background:#416f5a18; color:#315e46; font-weight:700; } .game-like[aria-pressed="true"] svg { fill:#416f5a26; } .game-like:hover { background:#416f5a20; } .game-like:focus-visible { outline:3px solid #ab755b; outline-offset:2px; } .game-like:disabled { opacity:.55; cursor:wait; } .game-likes-status { position:fixed; z-index:20; bottom:24px; left:50%; transform:translateX(-50%); width:max-content; max-width:calc(100vw - 32px); margin:0; font-size:12px; pointer-events:none; box-shadow:0 4px 18px #203b3520; } .game-likes-status:empty { display:none; } .game-likes-status:not(:empty) { background:#fffdf3e8; color:#203b35; padding:10px 14px; border-radius:8px; } .preview-top { flex-wrap:wrap; } .preview-top h2 { flex:1; min-width:120px; } .preview-rating { display:flex; gap:2px; align-items:center; flex-wrap:nowrap; } .preview-rating button { background:none; border:0; border-radius:6px; min-width:36px; min-height:44px; padding:3px; color:#79543a; font:inherit; font-size:25px; cursor:pointer; } .preview-rating button:hover,.preview-rating button[aria-pressed="true"] { background:#79543a15; } .preview-rating button:focus-visible { outline:3px solid #ab755b; outline-offset:2px; } .preview-rating button:disabled { opacity:.5; cursor:wait; } .preview-rating-status { font-size:12px; color:var(--green-dark); } .preview-rating-status:empty { display:none; } @media(max-width:500px) { .preview-top h2 { flex-basis:calc(100% - 100px); order:0; } .preview-top #close-preview { order:1; } .preview-rating { order:2; flex-basis:100%; justify-content:flex-end; } } .vocabulary-meta-row { display:flex; flex-wrap:wrap; align-items:center; gap:8px; } .vocabulary-meta-row > p { margin:0; } .preview-meta-row { margin:12px 0 16px; } .active-create { flex:0 0 155px; display:flex; flex-direction:column; justify-content:center; align-items:center; gap:12px; padding:22px 16px; background:var(--green); color:#fffdf3; text-align:center; text-decoration:none; font-size:13px; font-weight:600; line-height:1.5; overflow-wrap:anywhere; } .active-create svg { width:32px; height:32px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; } .active-create:hover { background:var(--green-dark); } .active-create:focus-visible { outline:3px solid #fffdf3; outline-offset:-6px; } @media(max-width:600px) { .active-content-info { flex-wrap:wrap; gap:13px; } .active-create { flex-basis:104px; padding:18px 10px; font-size:11px; } .active-content-main .content-actions { margin-left:0; width:100%; } } @media(max-width:450px) { .active-content-main { padding:16px 12px; } .active-content-main .content-actions { grid-template-columns:minmax(0,1fr); } .active-create { flex-basis:92px; padding:16px 8px; } } .loader-card[data-active="true"] { background:rgba(204,231,187,.65); } .loader-card[data-active="true"]:hover { background:rgba(204,231,187,.78); } .back-to-top { margin:0; padding:0; text-align:center; font-size:12px; } .back-to-top a { font-weight:600; text-underline-offset:4px; } #vocabulary-library { padding-top:24px; } .filter-panel-heading { display:flex; align-items:center; gap:8px; margin:0 0 18px; font:inherit; font-size:14px; font-weight:600; color:var(--ink); } .filter-panel-heading svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; } .active-content { position:relative; } .empty-content-link { position:absolute; inset:0; z-index:1; border-radius:inherit; } .empty-content-link:focus-visible { outline:3px solid #ab755b; outline-offset:-5px; } .active-content .content-actions,.active-content .active-create { position:relative; z-index:2; } .source-badge { font-weight:600; } .source-badge.source-local { background:#ffd29a; color:#704018; } .source-badge.source-created { background:#d5edff; color:#244d68; } .game-progress { margin:3px 0 12px; color:var(--green-dark); font-size:11px; } .game-progress > span { display:block; margin-bottom:6px; } .game-progress progress { display:block; width:100%; height:6px; border:0; border-radius:6px; overflow:hidden; background:#365e5026; accent-color:var(--green); } .game-progress progress::-webkit-progress-bar { background:#365e5026; border-radius:6px; } .game-progress progress::-webkit-progress-value { background:var(--green); border-radius:6px; } .game-progress progress::-moz-progress-bar { background:var(--green); border-radius:6px; } .vocabulary-editor { margin-top:24px; padding:25px; border-radius:18px; } .editor-heading,.editor-rows-heading { display:flex; align-items:center; justify-content:space-between; gap:15px; flex-wrap:wrap; } .editor-heading h2 { font-family:var(--serif); font-weight:500; font-size:28px; margin:0; } .vocabulary-editor > p { font-size:13px; line-height:1.7; } .editor-note { padding:10px 14px; background:#e7eedfc4; border-radius:8px; } #editor-fields { border:0; padding:0; margin:20px 0 0; min-width:0; } .editor-fields,.editor-word-fields { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; } .vocabulary-editor label { display:flex; flex-direction:column; gap:7px; min-width:0; font-size:12px; } .vocabulary-editor input:not([type="checkbox"]),.editor-fields select { width:100%; min-width:0; min-height:44px; padding:10px 12px; border:1px solid #365e5038; border-radius:8px; font:inherit; color:var(--ink); background-color:#fffdf4de; } .vocabulary-editor input:focus-visible,.editor-fields select:focus-visible { outline:3px solid #ab755b; outline-offset:2px; } .vocabulary-editor [aria-invalid="true"] { border-color:#a34d35; } .editor-wide { grid-column:1/-1; } .editor-rows-heading { margin:25px 0 14px; } .editor-rows-heading h3 { font-size:16px; margin:0; } #editor-count { font-size:12px; color:var(--green-dark); } .editor-word { background:#fffdf454; border:1px solid #365e5024; border-radius:12px; padding:16px; margin-bottom:14px; } .editor-word-top { display:flex; justify-content:space-between; gap:12px; align-items:center; margin-bottom:12px; } .editor-word-top h4 { margin:0; font-size:13px; } .editor-row-actions { display:flex; gap:4px; } .editor-row-action { min-width:38px; min-height:38px; border:1px solid #365e5026; border-radius:7px; background:#fffdf4a8; color:var(--green-dark); font:inherit; cursor:pointer; } .editor-row-action:disabled { opacity:.4; cursor:default; } .editor-save-options { margin:20px 0 15px; } .editor-save-options label { display:inline-flex; flex-direction:row; align-items:center; gap:9px; min-height:44px; } .editor-save-options input { width:18px; height:18px; accent-color:var(--green); } .editor-buttons { display:flex; flex-wrap:wrap; gap:9px; } .editor-status { margin:16px 0 0; font-size:13px; color:var(--green-dark); } .editor-status:empty { display:none; } @media(max-width:600px) { .vocabulary-editor { padding:18px; } .editor-fields,.editor-word-fields { grid-template-columns:minmax(0,1fr); } .editor-word { padding:12px; } .editor-heading h2 { font-size:24px; } } .vocabulary-editor label > span { overflow-wrap:anywhere; } .editor-topic-caption { display:block; } .editor-language-field { display:block; position:relative; min-width:0; } .editor-language-prefix { position:absolute; top:1px; bottom:1px; left:1px; width:32px; border-right:1px solid #365e5038; border-radius:7px 0 0 7px; pointer-events:none; } .vocabulary-editor .editor-language-field[data-language="ru"] > input,.vocabulary-editor .editor-language-field[data-language="hu"] > input { padding-left:var(--editor-language-text-inset); } .vocabulary-editor { --editor-language-text-inset:45px; } .editor-row-action svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; vertical-align:middle; } .editor-delete-dialog { width:min(440px,calc(100% - 30px)); } .editor-delete-dialog h3 { margin:0 0 12px; font-family:var(--serif); font-size:24px; font-weight:500; } #editor-delete-word { overflow-wrap:anywhere; margin:0 0 20px; } .editor-delete-dialog .delete-confirm { background:#934632; border-color:#934632; color:#fffdf3; } .editor-delete-dialog .delete-confirm:hover { background:#773726; } .editor-file-row { display:grid; grid-template-columns:minmax(0,1fr) minmax(125px,180px); gap:14px; } .editor-fields select { padding-right:40px; } @media(max-width:450px) { .editor-file-row { grid-template-columns:minmax(0,1fr) 115px; gap:10px; } } .hang-game { margin-top:24px; padding:25px; border-radius:18px; } .hang-game > progress { display:block; width:100%; height:7px; border:0; border-radius:7px; overflow:hidden; accent-color:var(--green); background:#365e5026; margin:12px 0 22px; } .hang-game > progress::-webkit-progress-bar { background:#365e5026; } .hang-game > progress::-webkit-progress-value { background:var(--green); } .hang-game > progress::-moz-progress-bar { background:var(--green); } .hang-board { display:flex; justify-content:center; align-items:center; gap:12px; border:1px solid #365e5026; background:#dcebc8a6; border-radius:16px; padding:20px; } .hang-board[data-result="failed"] { background:#f1ddd3; } .hang-drawing { display:block; flex:0 1 220px; width:220px; min-width:100px; max-width:220px; height:220px; max-height:220px; } .hang-question { flex:0 0 auto; max-width:calc(100% - 112px); text-align:center; min-width:0; } .hang-question > p { font-size:12px; } .hang-clue { display:inline; border:0; background:none; color:var(--ink); font-family:var(--serif); font-size:clamp(22px,3vw,34px); cursor:pointer; overflow-wrap:anywhere; } .hang-clue:disabled { cursor:default; } .hang-clue:enabled:hover { text-decoration:underline; text-underline-offset:5px; } .hang-question > .hang-mask { font-size:clamp(24px,4vw,40px); line-height:1.7; font-weight:600; white-space:nowrap; overflow-wrap:normal; word-break:normal; overflow-x:auto; margin:20px 0 10px; } .hang-keyboard { display:flex; flex-direction:column; gap:7px; margin:20px auto 14px; max-width:780px; } .hang-keyboard-row { display:flex; flex-wrap:wrap; justify-content:center; gap:7px; } .hang-key { flex:1 1 36px; max-width:62px; min-height:48px; border:1px solid #365e5033; border-radius:8px; background:#fffdf3ed; color:var(--ink); font:inherit; font-size:19px; cursor:pointer; } :is(#hang-keyboard,#cross-keyboard) { --hang-key-gap:7px; } :is(#hang-keyboard,#cross-keyboard) .hang-keyboard-row { flex-wrap:nowrap; gap:var(--hang-key-gap); } :is(#hang-keyboard,#cross-keyboard) .hang-key { flex:0 1 calc((100% - (var(--hang-key-columns,13) - 1)*var(--hang-key-gap))/var(--hang-key-columns,13)); min-width:0; padding:0; } .hang-key:focus-visible,.hang-clue:focus-visible { outline:3px solid #ab755b; outline-offset:2px; } .hang-key:enabled:hover { background:#e4edd6; } .hang-key:disabled { cursor:default; opacity:.45; } .hang-key[data-result="correct"] { background:#dcebbb; opacity:1; border-color:#6e8d58; } .hang-key[data-result="wrong"] { background:#ecd8d0; color:#854733; opacity:.8; } .hang-feedback { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:12px; padding:16px; border-radius:10px; background:#e1edcf; margin-top:16px; overflow-wrap:anywhere; } .hang-feedback[data-result="failed"] { background:#f1ddd3; } .hang-feedback > span { font-size:20px; font-family:var(--serif); } .hang-actions { display:flex; justify-content:center; margin-top:14px; } .hang-manual { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin:14px 0; } .hang-manual input { max-width:80px; padding:10px; border:1px solid #365e5033; border-radius:8px; font:inherit; } @media(max-width:600px) { .hang-game { padding:18px; } .hang-board { flex-direction:column; gap:10px; padding:14px; } .hang-drawing { flex:none; width:150px; min-width:0; height:150px; } .hang-question { max-width:100%; } :is(#hang-keyboard,#cross-keyboard) { --hang-key-gap:2px; gap:5px; } :is(#hang-keyboard,#cross-keyboard) .hang-key { font-size:clamp(10px,3.2vw,15px); min-height:36px; border-radius:5px; } }  .scramble-question { text-align:center; padding:16px; overflow-wrap:anywhere; } .scramble-settings,.scramble-controls { display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin:18px 0; } .scramble-answer { display:flex; flex-wrap:nowrap; gap:var(--scramble-answer-gap,7px); overflow-x:auto; overflow-y:hidden; justify-content:center; min-height:62px; padding:12px; border-radius:12px; background:#365e5012; margin-bottom:18px; } .scramble-tile { display:inline-flex; align-items:center; justify-content:center; min-width:44px; min-height:44px; border:1px solid #44675650; border-radius:12px; background:#fffdf5; color:var(--ink); font:inherit; font-size:24px; font-weight:600; padding:6px 10px; cursor:pointer; } .scramble-tile:focus-visible { outline:3px solid #a87b5d; outline-offset:3px; } .scramble-tile:disabled { opacity:.75; cursor:default; } .scramble-dial { position:relative; margin:0 auto; } .scramble-dial[data-mode="dial"] { width:min(100%,390px); aspect-ratio:1; border-radius:50%; background:#56765b22; touch-action:none; user-select:none; } .scramble-dial[data-mode="dial"] #scramble-letters { position:absolute; inset:0; z-index:1; } .scramble-dial[data-mode="dial"] .scramble-tile { position:absolute; left:var(--x); top:var(--y); transform:translate(-50%,-50%); width:var(--tile-size); height:var(--tile-size); min-width:0; min-height:0; padding:0; border-radius:50%; font-size:clamp(16px,4vw,24px); } .scramble-tile[data-selected="true"] { background:#3e6355; color:#fffdf5; } .scramble-path { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:0; fill:none; stroke:#3e6355; stroke-width:2.3; stroke-linejoin:round; stroke-linecap:round; } .scramble-dial[data-mode="tiles"] #scramble-letters { display:flex; flex-wrap:wrap; gap:10px; justify-content:center; } .scramble-dial[data-mode="tiles"] .scramble-path { display:none; } .scramble-answer[data-result="solved"] { background:#d5e9c7; } .scramble-answer[data-result="wrong"] { background:#f1ddd3; } .scramble-answer[data-result="revealed"] .scramble-tile { animation:scramble-reveal .5s both; animation-delay:var(--reveal-delay); } .scramble-game .hang-feedback[data-result="wrong"],.scramble-game .hang-feedback[data-result="revealed"] { background:#f1ddd3; } @keyframes scramble-reveal { from { opacity:0; transform:translateY(16px) scale(.8); } to { opacity:1; transform:translateY(0) scale(1); } } @media(prefers-reduced-motion:reduce) { .scramble-answer[data-result="revealed"] .scramble-tile { animation:none; } } @media(max-width:400px) { .scramble-game { padding:12px; } .scramble-controls .g-button,.scramble-settings .g-button { padding:10px; font-size:14px; } }  .scramble-shuffle { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); z-index:2; display:inline-flex; align-items:center; justify-content:center; width:58px; height:58px; padding:14px; border:1px solid #365e5040; border-radius:50%; background:#fffdf4ed; color:#3e6355; box-shadow:0 3px 10px #203b3517; cursor:pointer; touch-action:manipulation; } .scramble-shuffle svg { width:28px; height:28px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; } .scramble-shuffle:active { transform:translate(-50%,-50%); } .scramble-shuffle:hover:not(:disabled) { background:#e2ebd9; } .scramble-shuffle:focus-visible { outline:3px solid #a87b5d; outline-offset:4px; } .scramble-shuffle:disabled { cursor:default; opacity:.6; } .scramble-dial[data-shuffling="true"] #scramble-letters { animation:scramble-rotate .5s ease-out both; } .scramble-dial[data-shuffling="true"] #scramble-letters .scramble-tile { animation:scramble-counter-rotate .5s ease-out both; } .scramble-dial[data-shuffling="true"] .scramble-shuffle svg { animation:scramble-rotate .5s ease-out both; } @keyframes scramble-rotate { from { transform:rotate(-360deg); } to { transform:rotate(0deg); } } @keyframes scramble-counter-rotate { from { transform:translate(-50%,-50%) rotate(360deg); } to { transform:translate(-50%,-50%) rotate(0deg); } } @media(prefers-reduced-motion:reduce) { .scramble-dial[data-shuffling="true"] #scramble-letters,.scramble-dial[data-shuffling="true"] #scramble-letters .scramble-tile,.scramble-dial[data-shuffling="true"] .scramble-shuffle svg { animation:none; } } .scramble-mode { display:inline-flex; align-items:center; justify-content:center; gap:10px; } .scramble-mode svg { width:30px; height:30px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; } .scramble-mode .scramble-mode-arrows { width:23px; height:23px; opacity:.65; } .scramble-mode[data-mode="dial"] .scramble-mode-dial,.scramble-mode[data-mode="tiles"] .scramble-mode-tiles { color:#365e50; fill:#365e501c; } .g-button .game-skip-icon { fill:currentColor; stroke:none; flex-shrink:0; } .scramble-answer > .scramble-tile,.scramble-slot { box-sizing:border-box; flex:0 0 var(--scramble-answer-size,44px); width:var(--scramble-answer-size,44px); height:var(--scramble-answer-height,48px); min-width:0; min-height:0; padding:0; } #scramble-answer .scramble-tile { font-size:var(--scramble-answer-font,24px); border-radius:var(--scramble-answer-radius,12px); } .scramble-answer[data-overflow="true"] { justify-content:flex-start; } .scramble-slot { display:inline-block; border:1px dashed #44675666; border-bottom:2px solid #44675688; border-radius:var(--scramble-answer-radius,12px); background:#fffdf535; } .scramble-controls { display:grid; grid-template-columns:minmax(0,1fr); width:min(100%,160px); align-items:stretch; margin:18px auto; } .scramble-controls > .g-button { box-sizing:border-box; width:100%; min-width:0; height:52px; min-height:52px; } .g-button .scramble-reveal-icon { width:34px; height:28px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; } .g-button .scramble-eye-icon { width:26px; height:26px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; } #scramble-hint-toggle:not([data-visible="false"]) .scramble-eye-slash { display:none; } .scramble-settings { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); width:min(100%,420px); gap:8px; margin:18px auto; } .scramble-settings > .g-button { box-sizing:border-box; width:100%; min-width:0; height:52px; min-height:52px; padding:6px; gap:4px; } .scramble-settings .scramble-mode svg { width:clamp(16px,4vw,26px); height:clamp(16px,4vw,26px); flex-shrink:1; min-width:0; } .scramble-settings .scramble-mode .scramble-mode-arrows { width:clamp(12px,3vw,20px); height:clamp(12px,3vw,20px); } .scramble-answer > .scramble-tile { position:relative; z-index:3; } #scramble-speak { width:44px; height:44px; margin-inline-start:6px; vertical-align:middle; } #scramble-speak svg { width:clamp(22px,3vw,34px); height:clamp(22px,3vw,34px); } .scramble-answer-row { display:flex; flex-direction:column; align-items:center; gap:4px; width:100%; margin-bottom:18px; } .scramble-answer-row > .scramble-answer { box-sizing:border-box; width:100%; min-width:0; margin-bottom:0; padding-inline:12px; } .scramble-answer-row > #scramble-speak { flex:none; margin:0; color:var(--green); } .scramble-answer-row > #scramble-speak.playing { background:#365e5018; } .scramble-dial[data-mode="tiles"] .scramble-tile { box-sizing:border-box; flex:0 0 44px; width:44px; height:48px; padding:0; } .scramble-dial[data-mode="tiles"] .scramble-tile[data-vacant="true"] { border:1px dashed #44675666; border-bottom:2px solid #44675688; background:#fffdf535; color:transparent; opacity:1; cursor:default; } #scramble-next .scramble-retry-icon { display:none; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; } #scramble-next[data-result="wrong"] .scramble-skip-icon { display:none; } #scramble-next[data-result="wrong"] .scramble-retry-icon { display:inline-block; } .scramble-dial[data-result="revealed"] #scramble-path { stroke-dasharray:100; animation:scramble-draw-path var(--reveal-path-duration,1ms) linear both; } @keyframes scramble-draw-path { from { stroke-dashoffset:100; } to { stroke-dashoffset:0; } } @media(prefers-reduced-motion:reduce) { .scramble-dial[data-result="revealed"] #scramble-path { animation:none; stroke-dashoffset:0; } } .scramble-dial[data-mode="tiles"] .scramble-tile[data-reveal-source="true"] { animation:scramble-empty-source 1ms linear var(--reveal-delay) forwards; } @keyframes scramble-empty-source { to { border:1px dashed #44675666; border-bottom:2px solid #44675688; background:#fffdf535; color:transparent; opacity:1; } } @media(prefers-reduced-motion:reduce) { .scramble-dial[data-mode="tiles"] .scramble-tile[data-reveal-source="true"] { animation:none; border:1px dashed #44675666; border-bottom:2px solid #44675688; background:#fffdf535; color:transparent; opacity:1; } } .scramble-question { padding-top:24px; } .scramble-clue-row { display:grid; grid-template-columns:68px minmax(0,auto) 68px; align-items:center; gap:8px; width:fit-content; max-width:100%; margin-inline:auto; } .scramble-clue-row > .hang-clue { grid-column:2; grid-row:1; justify-self:center; min-width:0; max-width:100%; } .scramble-descriptions { grid-column:3; grid-row:1; display:inline-flex; flex:none; align-items:center; justify-content:center; width:68px; height:56px; padding:0; transform:translateY(-30px); color:var(--green); background:transparent; border:0; cursor:pointer; } .scramble-descriptions svg { width:64px; height:54px; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; } .scramble-descriptions .scramble-thought-cloud { fill:#fffdf580; } .scramble-descriptions:hover:not(:disabled) .scramble-thought-cloud { fill:#dce8d2; } .scramble-descriptions:active { transform:translateY(-30px); } .scramble-descriptions:focus-visible { outline:3px solid #a87b5d; outline-offset:2px; border-radius:12px; } .scramble-descriptions:disabled { opacity:.4; cursor:default; } .scramble-reveal-slot { position:relative; border:0; background:none; } .scramble-reveal-slot::before { content:""; position:absolute; inset:0; box-sizing:border-box; border:1px dashed #44675666; border-bottom:2px solid #44675688; border-radius:var(--scramble-answer-radius,12px); background:#fffdf535; } .scramble-reveal-slot > .scramble-tile { position:absolute; inset:0; z-index:3; box-sizing:border-box; width:100%; height:100%; min-width:0; min-height:0; padding:0; opacity:1; } .scramble-language-flag { display:inline-block; flex:none; width:22px; height:15px; border-radius:2px; box-shadow:inset 0 0 0 1px #203b3526; } #scramble-clue[data-obscured="true"] { filter:blur(12px); opacity:.65; user-select:none; -webkit-user-select:none; pointer-events:none; } .games-footer > .games-privacy { grid-column:1; grid-row:1; min-width:0; } .games-footer > .back-to-top { grid-column:2; grid-row:1; justify-self:center; } .games-footer > .scene-credit { grid-column:3; grid-row:1; justify-self:end; min-width:0; max-width:100%; } @media(max-width:760px) { .games-footer { grid-template-columns:minmax(0,1fr); align-items:center; } .games-footer > .scene-credit { grid-column:1; grid-row:2; } .games-footer > .back-to-top { grid-column:1; grid-row:3; } } #scramble-letters .scramble-tile[data-compact="true"],#scramble-answer .scramble-tile[data-compact="true"] { font-size:10px; line-height:1; overflow-wrap:anywhere; } #clear-active-dialog { width:min(560px,calc(100% - 30px)); } #clear-active-content { overflow-wrap:anywhere; font-weight:600; } .remove-content-dialog { width:min(560px,calc(100% - 30px)); } #remove-local-content { overflow-wrap:anywhere; font-weight:600; } #remove-local-status { color:#934632; } #remove-local-status:empty { display:none; } .remove-content-dialog .delete-confirm { background:#934632; border-color:#934632; color:#fffdf3; } .remove-content-dialog .delete-confirm:hover { background:#773726; } :is(#reset-filters,#reset-empty-filters):enabled { background:#ffd29a; border-color:#c68c4f; color:#704018; } :is(#reset-filters,#reset-empty-filters):enabled:hover { background:#ffc17a; } .loader-selection { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,2fr) minmax(0,1fr); grid-template-rows:auto auto; row-gap:4px; column-gap:20px; min-height:80px; padding-block:10px; } .loader-selection > .selection-summary { display:contents; } .loader-selection > #load-selected { grid-column:3; grid-row:1/-1; align-self:center; justify-self:end; min-width:0; max-width:100%; } .loader-selection .selection-caption { grid-column:1; grid-row:1; display:block; justify-self:start; text-align:left; margin:0; font-size:9px; font-weight:700; letter-spacing:.15em; line-height:1.6; color:#637267; } .selection-details { display:contents; } .selection-file { grid-column:1; grid-row:2; text-align:left; display:flex; flex-direction:column; gap:6px; min-width:0; } .selection-file > strong,.selection-file > span,.loader-selection .selection-topic { overflow:hidden; white-space:nowrap; text-overflow:ellipsis; } .loader-selection .selection-topic { min-width:0; font-family:var(--serif); font-size:17px; line-height:1.3; font-weight:500; text-align:left; } .loader-selection:has(.selection-topic-row[hidden]) { grid-template-columns:minmax(0,1fr) auto; } .loader-selection:has(.selection-topic-row[hidden]) > #load-selected { grid-column:2; } .selection-topic-row { grid-column:2; grid-row:1/-1; align-self:center; display:flex; justify-content:center; align-items:center; gap:8px; min-width:0; text-align:left; } .loader-selection .selection-topic-row > .rating-badge { flex:none; font-size:10px; color:#79543a; } @media(max-width:500px) { .loader-selection { grid-template-columns:minmax(0,1fr) minmax(0,1fr); row-gap:10px; } .loader-selection:has(.selection-topic-row[hidden]) { grid-template-columns:minmax(0,1fr); } .loader-selection .selection-caption { grid-column:1/-1; } .selection-topic-row { grid-row:2; } .loader-selection > #load-selected,.loader-selection:has(.selection-topic-row[hidden]) > #load-selected { grid-column:1/-1; grid-row:3; } }  .search-layout { display:grid; grid-template-columns:minmax(0,1fr) minmax(180px,.7fr); gap:28px; align-items:start; } .search-board-scroll { min-width:0; overflow-x:auto; padding:4px; } .search-board { display:grid; grid-template-columns:repeat(10,minmax(0,1fr)); width:100%; max-width:500px; min-width:240px; margin:auto; padding:8px; border:1px solid #365e5033; border-radius:14px; background:#fffdf5b3; touch-action:none; user-select:none; } .search-cell { display:flex; align-items:center; justify-content:center; padding:0; aspect-ratio:1; min-width:0; border:1px solid transparent; border-radius:6px; background:transparent; color:var(--ink); font-family:var(--serif); font-size:clamp(13px,2.8vw,25px); font-weight:600; cursor:pointer; } .search-cell { touch-action:none; user-select:none; -webkit-user-select:none; -webkit-user-drag:none; transition:background .18s; } .search-cell:active { transform:none; } .search-cell:hover:not(:disabled) { border-color:var(--green); } .search-cell.search-found-cell { background:var(--found-color); color:#172d25; } .search-cell.search-selected { background:var(--green); color:white; } .search-cell:focus-visible,.search-clue:focus-visible,.search-details-button:focus-visible { outline:3px solid #a76b42; outline-offset:1px; z-index:1; } .search-cell:disabled { cursor:default; opacity:1; } .search-current-clue { font-family:var(--serif); text-align:center; font-size:clamp(24px,4vw,38px); margin:22px 0 12px; overflow-wrap:anywhere; } .search-instructions { text-align:center; color:var(--green-dark); font-size:12px; line-height:1.6; margin:10px 0 20px; } .search-list-title { margin:0 0 12px; font-size:14px; } .search-words { display:flex; flex-direction:column; gap:7px; } .search-word { display:flex; border:1px solid #365e5026; border-radius:9px; background:#fffdf570; overflow:hidden; } .search-word[data-current="true"] { border-color:var(--green); background:#d6e7d2a6; } .search-word[data-found="true"] { border-left:7px solid var(--found-color); } .search-clue { flex:1; min-width:0; text-align:left; padding:10px 12px; background:transparent; color:var(--ink); overflow-wrap:anywhere; font-size:13px; line-height:1.5; } .search-clue:disabled { opacity:1; cursor:default; } .search-details-button { flex:none; min-width:44px; min-height:44px; background:transparent; color:var(--green-dark); font-size:22px; } .search-details-button:hover { background:#365e5012; } .search-details-panel { width:min(500px,calc(100% - 28px)); padding:18px; background:var(--glass); border:1px solid #ffffffd9; backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px); } .search-details-panel section { padding:10px 0; } .search-details-panel section + section { border-top:1px solid #365e5026; } .search-detail-word { font-family:var(--serif); font-size:28px; overflow-wrap:anywhere; } .search-detail-description { white-space:pre-wrap; overflow-wrap:anywhere; line-height:1.7; } .search-detail-description:empty { display:none; } @media(max-width:760px) { .search-layout { grid-template-columns:minmax(0,1fr); gap:20px; } .search-words { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); } .search-cell { font-size:clamp(16px,4vw,25px); } } @media(max-width:400px) { .search-game { padding:12px; } .search-board { padding:3px; } .search-words { grid-template-columns:minmax(0,1fr); } }  .cross-layout { display:grid; grid-template-columns:minmax(0,1.5fr) minmax(200px,1fr); align-items:start; gap:24px; } .cross-board-area { min-width:0; } .cross-board-scroll { max-height:62vh; min-height:180px; overflow:auto; overscroll-behavior:contain; background:#365e501a; border:1px solid #365e5033; border-radius:12px; padding:14px; } .cross-board-scroll,.cross-board-scroll input { cursor:grab; } .cross-board-scroll[data-dragging="true"],.cross-board-scroll[data-dragging="true"] * { cursor:grabbing; user-select:none; -webkit-user-select:none; } .cross-board-scroll:focus-visible { outline:3px solid #a76b42; outline-offset:2px; } .cross-board { display:grid; grid-template-columns:repeat(var(--cross-cols),38px); grid-auto-rows:38px; width:max-content; gap:1px; margin:auto; } .cross-cell { position:relative; min-width:0; } .cross-cell input { appearance:none; display:block; width:38px; height:38px; padding:7px 1px 1px; border:1px solid #365e502e; border-radius:3px; background:#fffdf4ed; color:var(--ink); font-family:var(--serif); font-size:23px; font-weight:600; text-align:center; caret-color:var(--green); } .cross-cell input[data-word="true"] { background:#e2eed6; } .cross-cell input[data-locked="true"] { background:#c6dfbf; color:#284535; } .cross-cell input[data-selected="true"] { outline:2px solid var(--green); outline-offset:-2px; background:#d0e4ba; } .cross-cell input:focus-visible { outline:3px solid #a76b42; outline-offset:-3px; } .cross-cell input:disabled { opacity:.65; } .cross-number { position:absolute; z-index:1; pointer-events:none; left:3px; top:1px; font-size:8px; line-height:1; font-weight:700; color:#3a584c; } .cross-current-clue { font-family:var(--serif); font-size:clamp(20px,3vw,28px); line-height:1.5; text-align:center; overflow-wrap:anywhere; margin:20px 0; } .cross-input-actions { display:flex; justify-content:center; gap:7px; flex-wrap:wrap; margin:16px 0; } .cross-input-actions .g-button { min-width:44px; min-height:44px; padding:10px; font-size:20px; } .cross-input-actions svg { width:23px; height:23px; } .cross-keyboard { display:flex; flex-direction:column; } .cross-help-actions { margin-bottom:18px; } .cross-clue-panel { min-width:0; } .cross-clue-panel h3 { font-size:15px; margin:0 0 10px; } .cross-clue-panel h3:not(:first-child) { margin-top:24px; } .cross-clues { display:flex; flex-direction:column; gap:7px; } .cross-clue { display:flex; align-items:center; gap:12px; text-align:left; font-size:13px; line-height:1.6; padding:10px 12px; min-height:44px; overflow-wrap:anywhere; background:#fffdf570; border:1px solid #365e5026; border-radius:8px; color:var(--ink); } .cross-clue[data-selected="true"] { border-color:var(--green); background:#d6e7d2a6; } .cross-clue[data-complete="true"] { color:#38536b; background:#d8e7f4bf; } .cross-clue-text { flex:1; min-width:0; } .cross-clue-check { flex:none; margin-left:auto; color:#38536b; font-size:19px; font-weight:700; } .cross-clue:focus-visible { outline:3px solid #a76b42; outline-offset:2px; } @media(max-width:850px) { .cross-layout { grid-template-columns:minmax(0,1fr); } .cross-board-scroll { max-height:55vh; } }  .detective-settings { margin:16px 0 24px; border:1px solid #365e5026; border-radius:10px; padding:0 14px; } .detective-settings summary { cursor:pointer; padding:12px 0; font-size:13px; font-weight:600; } #detective-settings-form { display:flex; flex-wrap:wrap; align-items:end; gap:14px; padding:8px 0 16px; } #detective-settings-form label { display:flex; flex-direction:column; gap:8px; font-size:12px; min-width:0; } #detective-settings-form input,#detective-settings-form select { min-height:44px; max-width:100%; padding:9px 12px; font:inherit; color:var(--ink); border:1px solid #365e5033; border-radius:8px; background:#fffdf5d9; } #detective-attempt-limit { width:130px; } .detective-layout { display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); gap:18px; align-items:stretch; } .detective-guess-panel,.detective-history-panel { min-width:0; padding:22px; border:1px solid #ffffffa6; border-radius:16px; box-shadow:0 4px 18px #203b350a; backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); } .detective-guess-panel { background:#9aaa90a6; } .detective-history-panel { background:#98a9aea6; } .detective-clue-row { display:grid; grid-template-columns:minmax(44px,1fr) minmax(0,auto) minmax(44px,1fr); align-items:center; gap:8px; margin:0 0 20px; min-height:44px; } .detective-clue { grid-column:2; min-width:0; text-align:center; font-family:var(--serif); font-size:clamp(24px,4vw,38px); overflow-wrap:anywhere; margin:0; } .detective-clue[data-hidden="true"] { filter:blur(12px); opacity:.65; user-select:none; pointer-events:none; } .detective-eye { grid-column:3; justify-self:start; display:inline-flex; align-items:center; justify-content:center; flex:none; width:44px; height:44px; padding:10px; border:0; background:transparent; color:var(--green); } .detective-eye:hover:not(:disabled) { color:var(--green-dark); } .detective-eye:active { transform:none; } .detective-eye svg { width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; } .detective-color-note,.detective-legend { color:var(--green-dark); font-size:12px; line-height:1.7; } .detective-color-note { text-align:center; margin:0 0 22px; } .detective-draft-row { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:7px; padding:20px 14px; min-height:90px; max-height:210px; overflow:auto; border-radius:12px; background:#d6e7d29c; } .detective-draft-row > .detective-slots { display:flex; flex-wrap:nowrap; justify-content:center; gap:var(--detective-answer-gap,7px); width:100%; min-width:0; overflow-x:auto; overflow-y:hidden; } #detective-draft[data-overflow="true"] { justify-content:flex-start; } #detective-draft > .detective-tile { box-sizing:border-box; flex:0 0 var(--detective-answer-size,34px); width:var(--detective-answer-size,34px); height:var(--detective-answer-height,40px); min-width:0; min-height:0; padding:0; font-size:var(--detective-answer-font,23px); } #detective-draft > .detective-long-word { flex:none; max-width:none; white-space:pre; overflow-wrap:normal; font-size:var(--detective-answer-font,20px); } .detective-draft-row > .vocabulary-audio { width:56px; height:56px; color:var(--green-dark); } .detective-draft-row > .vocabulary-audio svg { width:36px; height:36px; } .detective-draft-row > .vocabulary-audio.playing { color:white; } .detective-tile,.detective-letter { display:inline-flex; align-items:center; justify-content:center; flex:none; min-width:34px; min-height:40px; padding:4px 7px; border:1px solid #365e5033; border-radius:7px; background:var(--letter-color,#fffdf5c9); color:#233d34; font-family:var(--serif); font-size:23px; font-weight:600; } .detective-palette { display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin:22px 0 14px; max-height:240px; overflow:auto; padding:5px; } .detective-letter { min-width:48px; min-height:48px; cursor:pointer; } #detective-erase > span { display:inline-block; font-size:28px; line-height:1; } .detective-letter:disabled { cursor:default; opacity:.6; } .detective-letter:focus-visible { outline:3px solid #a76b42; outline-offset:2px; } .detective-attempt-count { text-align:center; font-size:13px; color:var(--green-dark); margin:18px 0; } .detective-result { padding:16px; text-align:center; background:#f4decb9c; border-radius:12px; } .detective-result[data-result="solved"] { background:#d6e7d29c; } .detective-answer-row { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:10px; margin-top:12px; } #detective-answer { min-width:0; overflow-wrap:anywhere; font-family:var(--serif); font-size:28px; } .detective-history-panel h3 { margin:0 0 10px; font-size:16px; } .detective-history { margin:0; padding:0 0 0 25px; max-height:560px; overflow:auto; scrollbar-gutter:stable; } .detective-history::-webkit-scrollbar { width:10px; height:10px; } .detective-history::-webkit-scrollbar-track { background:#fffdf54d; border-radius:8px; } .detective-history::-webkit-scrollbar-thumb { background:#416553b3; border:2px solid transparent; background-clip:padding-box; border-radius:8px; } .detective-history::-webkit-scrollbar-thumb:hover { background-color:#365e50; } @supports not selector(::-webkit-scrollbar) { .detective-history { scrollbar-width:thin; scrollbar-color:#416553b3 #fffdf54d; } } .detective-attempt { padding:12px 0; } .detective-attempt:not(:last-child) { border-bottom:1px solid #365e5026; } .detective-attempt-word { display:flex; flex-wrap:wrap; gap:5px; } .detective-attempt .detective-tile { min-width:25px; min-height:32px; font-size:19px; padding:3px 5px; } .detective-feedback { margin:8px 0 0; font-size:12px; color:var(--green-dark); line-height:1.6; } .detective-history-paging { display:flex; align-items:center; flex-wrap:wrap; justify-content:center; gap:9px; margin-top:16px; font-size:12px; } .detective-long-word { display:block; white-space:pre-wrap; overflow-wrap:anywhere; font-family:var(--serif); font-size:20px; line-height:1.7; max-width:100%; } @media(min-width:761px) { .detective-history-panel { contain:size; display:flex; flex-direction:column; } .detective-history-panel > .detective-history { flex:1; min-height:0; max-height:none; } } @media(max-width:760px) { .detective-layout { grid-template-columns:minmax(0,1fr); } .detective-history { max-height:400px; } } @media(max-width:400px) { .detective-guess-panel,.detective-history-panel { padding:16px 12px; } .detective-clue-row { gap:4px; } .detective-eye { width:44px; height:44px; padding:10px; } .detective-settings { padding:0 10px; } #detective-settings-form label { width:100%; } }  .editor-ai-panel { position:relative; padding:16px 52px 16px 18px; margin:16px 0 18px; border:1px solid #9bb8cc99; border-radius:12px; background:#dceaf4a6; } .editor-ai-dismiss { position:absolute; top:3px; right:3px; display:flex; align-items:center; justify-content:center; width:44px; height:44px; padding:12px; background:transparent; border:0; border-radius:50%; color:var(--green-dark); cursor:pointer; } .editor-ai-dismiss svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; } .editor-ai-dismiss:hover { background:#365e5012; } .editor-ai-dismiss:focus-visible { outline:3px solid #a76b42; outline-offset:-3px; } .editor-ai-link { display:inline-flex; align-items:center; gap:12px; padding:8px 0; margin:0; min-height:44px; line-height:1.7; text-align:left; color:var(--green-dark); background:none; font-size:13px; font-weight:600; text-decoration:none; } .editor-ai-link > svg { flex:none; width:32px; height:32px; } .editor-ai-link > span { min-width:0; text-decoration:underline; text-underline-offset:4px; } .ai-intro { width:min(600px,calc(100% - 30px)); } .ai-intro p,.ai-guide p,.ai-steps { font-size:13px; line-height:1.75; } .ai-guide { width:min(1000px,calc(100% - 30px)); } .ai-guide-heading { display:flex; align-items:center; justify-content:space-between; gap:16px; } .ai-guide-heading h2 { margin-right:auto; } .ai-mode-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:10px; margin:20px 0; } .ai-mode { display:flex; flex-direction:column; gap:7px; padding:14px; text-align:left; border:1px solid #365e5033; border-radius:10px; background:#fffdf590; color:var(--ink); } .ai-mode strong { font-size:13px; } .ai-mode span { font-size:12px; line-height:1.6; } .ai-mode[aria-pressed="true"] { border-color:var(--green); background:#d6e7d2ba; } .ai-mode:focus-visible,.editor-ai-link:focus-visible { outline:3px solid #a76b42; outline-offset:2px; } .ai-options { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; margin:16px 0; } .ai-options label { display:flex; flex-direction:column; gap:7px; font-size:12px; min-width:0; } .ai-options input,.ai-options select,.ai-prompt { font:inherit; color:var(--ink); background:#fffdf5e0; border:1px solid #365e5033; border-radius:8px; padding:10px 12px; min-height:44px; min-width:0; max-width:100%; } .ai-options select { padding-right:40px; appearance:none; -webkit-appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='m1 1 5 5 5-5' fill='none' stroke='%23365e50' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-size:12px 8px; background-position:right 14px center; } .ai-description-choice { display:flex; align-items:center; gap:10px; margin:18px 0; font-size:13px; line-height:1.6; } .ai-description-choice input { width:20px; height:20px; flex:none; accent-color:var(--green); } .ai-prompt-label { display:block; font-size:13px; font-weight:600; margin:20px 0 10px; } .ai-prompt { display:block; width:100%; font-family:ui-monospace,monospace; font-size:12px; line-height:1.65; resize:vertical; } .ai-copy-row { display:flex; flex-wrap:wrap; align-items:center; gap:12px; font-size:13px; margin:15px 0 20px; } .ai-guide .ai-note { color:#5e7066; font-size:12px; } .ai-steps { padding-left:22px; } .ai-steps li { margin:7px 0; } .ai-apps-scroll { min-width:0; max-width:100%; overflow-x:auto; margin-top:16px; } .ai-guide .ai-apps { width:max-content; min-width:100%; table-layout:auto; border-collapse:collapse; font-size:13px; } .ai-guide .ai-apps th,.ai-guide .ai-apps td { width:auto; text-align:left; padding:12px 10px; border-bottom:1px solid #365e5026; white-space:nowrap; } .ai-guide[data-platform="android"] [data-ai-platform]:not([data-ai-platform="android"]),.ai-guide[data-platform="apple"] [data-ai-platform]:not([data-ai-platform="apple"]) { display:none; } .ai-apps a { color:var(--green-dark); text-underline-offset:3px; } @media(max-width:600px) { .ai-options { grid-template-columns:minmax(0,1fr); } .ai-mode-grid { grid-template-columns:minmax(0,1fr); } .ai-guide-heading { align-items:start; } .ai-guide-heading h2 { font-size:22px; } }  .game-title-block { position:relative; display:flex; flex-direction:column; align-items:flex-start; gap:8px; min-width:0; max-width:100%; } .game-title-block h2 { min-width:0; max-width:100%; white-space:nowrap; overflow-wrap:normal; } .game-title-like { min-height:40px; padding:6px 10px; background:#fffdf575; border:1px solid #365e5026; } .game-title-block .game-likes-status { position:absolute; top:calc(100% + 8px); bottom:auto; right:auto; left:0; transform:none; max-width:min(320px, calc(100vw - 48px)); text-align:center; } .game-title-block .game-likes-status:empty { display:none; } .cross-toolbar { align-items:flex-end; } .cross-hint-setting { display:flex; flex-direction:column; gap:5px; margin-left:auto; max-width:100%; font-size:12px; } .cross-hint-setting > span { padding-left:13px; } .cross-hint-setting select { font-size:14px; } #hang-speak { color:var(--green); width:52px; height:52px; min-width:52px; min-height:52px; padding:8px; vertical-align:middle; } #hang-speak svg { width:clamp(22px,3vw,34px); height:clamp(22px,3vw,34px); } .hang-word-audio { display:flex; justify-content:center; margin:0 0 10px; } #hang-speak.playing { color:#fff; } #hang-status:empty { display:none; } #detective-difficulty { padding-right:40px; appearance:none; -webkit-appearance:none; background-color:#fffdf4c9; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='m1 1 5 5 5-5' fill='none' stroke='%23365e50' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-size:12px 8px; background-position:right 14px center; } .detective-difficulty-notice { padding:12px 16px; border:1px solid #9bb8cc99; border-radius:10px; background:#dceaf4a6; color:var(--ink); font-size:13px; line-height:1.6; } .loader-result-heading > p { flex:1 1 200px; } .vocabulary-pagination,.vocabulary-pages { display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:8px; } .vocabulary-pagination { margin:22px 0; } .vocabulary-pagination .g-button { min-width:44px; } .vocabulary-page[aria-current="page"] { background:var(--green); color:#fff; border-color:var(--green); } .vocabulary-page-summary { flex-basis:100%; text-align:center; font-size:12px; color:var(--ink); } @media(max-width:600px) { .loader-result-heading > p { flex:0 1 auto; } } .vocabulary-pages { flex:none; flex-wrap:nowrap; } .vocabulary-pagination > .g-button { flex:none; } .vocabulary-pagination .g-button:not([aria-current="page"]) { background:#fffdf3d9; color:#203b35; } .search-details-panel::backdrop { background:#203b3533; backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px); } .search-details-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; } .search-details-heading h2 { margin:0; font-size:18px; font-weight:400; line-height:1.4; } .search-details-heading > .g-button { flex:none; width:40px; min-height:40px; padding:8px; } .search-details-panel .search-detail-line { margin:4px 0; line-height:1.5; } .search-details-panel .search-detail-word { font-size:24px; } .search-details-panel .search-detail-word[data-hidden="true"] { font:inherit; font-size:13px; color:#5e7066; } .search-details-panel .search-detail-description { font-size:14px; line-height:1.5; } .search-details-panel .search-detail-audio { width:36px; height:36px; min-width:36px; margin-left:4px; vertical-align:middle; color:var(--green); } .search-details-panel .search-detail-audio svg { width:20px; height:20px; } .search-details-panel .search-detail-audio.playing { color:white; } .search-details-panel .preview-speech-status:empty { display:none; }  .editor-title-row { display:flex; align-items:center; gap:12px; min-width:0; } .editor-keyboard-toggle { flex:none; width:44px; height:44px; padding:10px; color:var(--green); } .editor-keyboard-toggle[aria-pressed="true"] { background:#d6e7d2bd; border-color:var(--green); } .editor-keyboard { position:fixed; z-index:40; width:min(640px,calc(100vw - 16px)); max-height:calc(100dvh - 16px); overflow:auto; padding:12px; border:1px solid #ffffffc9; border-radius:16px; background:#dce5d6bf; color:var(--ink); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px); box-shadow:0 10px 36px #203b353b; } .editor-keyboard-handle { display:flex; align-items:center; gap:9px; min-height:36px; padding:0 6px 8px; font-size:13px; font-weight:600; cursor:grab; touch-action:none; user-select:none; -webkit-user-select:none; } .editor-keyboard-handle:active { cursor:grabbing; } .editor-keyboard-handle > span:first-child { font-size:24px; } .editor-keyboard-row { display:grid; grid-template-columns:repeat(var(--keys),minmax(0,1fr)); gap:4px; margin-top:5px; } .editor-key { display:inline-flex; align-items:center; justify-content:center; min-width:0; height:38px; padding:0 3px; border:1px solid #365e5033; border-radius:7px; background:#fffdf5c9; color:var(--ink); font:inherit; font-size:18px; touch-action:manipulation; } .editor-key:hover { background:#fffdf5; } .editor-key:active { transform:none; background:#c4d8bd; } .editor-key[aria-pressed="true"] { background:var(--green); color:white; } .editor-keyboard-controls { display:grid; grid-template-columns:44px minmax(0,1fr) 44px 44px; gap:5px; margin-top:7px; } .editor-keyboard-controls .editor-key { height:44px; font-size:24px; } .editor-keyboard-controls .editor-key-space { font-size:13px; } .editor-key-close { background:#365e501a; } .editor-keyboard-handle:focus-visible { outline:3px solid #a76b42; outline-offset:1px; border-radius:6px; } @media(max-width:400px) { .editor-keyboard { padding:8px; } .editor-keyboard-row { gap:3px; } .editor-key { font-size:16px; } } .vocabulary-card-edit { position:absolute; inset-inline-end:12px; top:calc(var(--card-title-top,52px) - 8px); display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; padding:11px; border:0; border-radius:8px; background:transparent; color:var(--green); } .vocabulary-card-edit:hover:not(:disabled) { background:#365e5014; } .vocabulary-card-edit svg { width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }  @media(hover:hover) and (pointer:fine) { .loader-card > .vocabulary-card-actions,.loader-card > .vocabulary-card-edit { opacity:0; pointer-events:none; } .loader-card:hover > .vocabulary-card-actions,.loader-card:hover > .vocabulary-card-edit, .loader-card:has(:focus-visible) > .vocabulary-card-actions,.loader-card:has(:focus-visible) > .vocabulary-card-edit { opacity:1; pointer-events:auto; } } .editor-save-dialog > h2 { margin:0 0 14px; font-size:20px; font-weight:500; } .editor-save-dialog > p { font-size:14px; line-height:1.6; } .editor-save-name-label { display:flex; flex-direction:column; gap:7px; font-size:13px; } #editor-save-name { width:100%; min-height:44px; padding:10px; border:1px solid #365e5040; border-radius:8px; background:#fffdf5cc; font:inherit; color:var(--ink); } #editor-save-error:empty { display:none; } .vocabulary-action-icon { display:inline-flex; flex:none; } .vocabulary-action-icon svg { width:18px; height:18px; } .editor-picture-control { display:flex; flex-direction:column; gap:7px; } .editor-picture-field { position:relative; display:block; } .editor-picture-field input { width:100%; padding-right:48px; } .editor-picture-preview { position:absolute; right:1px; top:1px; bottom:1px; width:44px; display:inline-flex; align-items:center; justify-content:center; border:0; border-radius:0 8px 8px 0; background:transparent; color:var(--green); } .editor-picture-preview:hover:not(:disabled) { background:#365e5014; } .editor-picture-preview:disabled { opacity:.4; } .editor-picture-preview:active { transform:none; } .editor-image { display:block; max-width:100%; max-height:65vh; height:auto; margin:14px auto 0; border-radius:8px; object-fit:contain; } #editor-image-status { font-size:14px; line-height:1.6; } .vocabulary-tab-counts { display:inline-flex; align-items:center; gap:4px; white-space:nowrap; } .tab-count-local { background:#ffd29a; color:#704018; } .tab-count-created { background:#d5edff; color:#244d68; } @media(max-width:600px) { .games-tabs { flex-wrap:wrap; gap:0 12px; } .games-tabs a { gap:6px; font-size:13px; } }  .loader-card .remove-local { position:absolute; inset-inline-end:12px; top:calc(var(--card-title-top,52px) + 42px); width:44px; height:44px; min-height:44px; margin:0; padding:11px; border:0; border-radius:8px; background:transparent; color:var(--green); } .loader-card .remove-local:hover:not(:disabled) { background:#365e5014; } .loader-card:has(.remove-local) .vocabulary-pick > :is(.vocabulary-summary,.file-name) { width:100%; padding-inline-end:42px; } .filter-fields .rating-field { grid-column:1/-1; margin-top:0; } .rating-options { display:flex; flex-wrap:wrap; align-items:center; gap:10px 20px; } .filter-fields .pictures-only { display:inline-flex; flex-direction:row; align-items:center; gap:8px; min-height:44px; cursor:pointer; } .pictures-only input { width:18px; height:18px; margin:0; accent-color:var(--green); } .vocabulary-picture-indicator { display:inline-flex; align-items:center; justify-content:center; width:26px; height:26px; border-radius:6px; background:#d5e7d299; color:var(--green-dark); } .vocabulary-picture-indicator svg { width:18px; height:18px; } .editor-image-status-row { display:flex; align-items:center; gap:9px; } .editor-image-spinner { flex:none; width:18px; height:18px; border:2px solid #365e5033; border-top-color:var(--green); border-radius:50%; animation:editor-image-spin .8s linear infinite; } @keyframes editor-image-spin { to { transform:rotate(360deg); } } @media(prefers-reduced-motion:reduce) { .editor-image-spinner { animation:none; } } .preview-picture-button svg { width:18px; height:18px; } @media(hover:hover) and (pointer:fine) { #preview-words .preview-picture-button { opacity:0; pointer-events:none; } #preview-words td:hover .preview-picture-button,#preview-words td:has(:focus-visible) .preview-picture-button { opacity:1; pointer-events:auto; } } #cross-prev-icon[data-direction="up"],#cross-next-icon[data-direction="down"] { transform:rotate(90deg); } @media(max-width:600px) { .loader-result-heading { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:start; gap:12px; } .loader-result-heading > p { grid-column:1/-1; } .loader-result-heading > label { flex-direction:column; align-items:stretch; min-width:0; gap:6px; } .loader-result-heading > label > select { width:100%; } } .vocabulary-card-actions .vocabulary-select { background:#ffd29a; border-color:#c28b4873; color:#704018; } .vocabulary-card-actions .vocabulary-select:hover:not(:disabled) { background:#ffc579; } .vocabulary-select .vocabulary-action-icon { color:#2f7042; } .vocabulary-select svg { stroke-width:2.5; } .memory-word-track { display:inline-flex; gap:32px; width:max-content; vertical-align:top; } .memory-word-text,.memory-word-copy { flex:none; } .memory-word[data-scrolling="true"] { text-align:left; } .memory-word[data-scrolling="true"] .memory-word-track { animation:memory-word-scroll var(--memory-scroll-duration,10s) linear infinite; } @keyframes memory-word-scroll { to { transform:translateX(var(--memory-scroll-distance)); } } @media(prefers-reduced-motion:reduce) { .memory-word[data-scrolling="true"] { overflow-x:auto; } .memory-word[data-scrolling="true"] .memory-word-track { animation:none; } .memory-word-copy { display:none; } } #scramble-hint-close { position:absolute; top:4px; right:4px; display:flex; align-items:center; justify-content:center; width:44px; height:44px; padding:11px; border:0; border-radius:50%; background:transparent; color:var(--green); cursor:pointer; } #scramble-hint-close svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; } #scramble-hint-close:hover { background:#365e5014; } #scramble-hint-close:focus-visible { outline:3px solid #a87b5d; outline-offset:-3px; } #scramble-hint-dialog > section > h3 { margin-top:0; padding-right:24px; } .editor-keyboard-top { display:flex; align-items:flex-start; gap:8px; } .editor-keyboard-top .editor-keyboard-handle { flex:1; min-width:0; } .editor-keyboard-symbols { flex:none; min-height:36px; padding:4px 8px; border:1px solid #365e5033; border-radius:8px; color:var(--green-dark); background:#fffdf580; font:inherit; font-size:12px; font-weight:600; cursor:pointer; } .editor-keyboard-symbols[aria-pressed="false"] { text-decoration:line-through; text-decoration-thickness:2px; opacity:.65; } .editor-keyboard-symbols[aria-pressed="true"] { background:#cce0c4a6; } .editor-keyboard-symbols:focus-visible { outline:3px solid #a76b42; outline-offset:1px; }