*{margin:0;padding:0;box-sizing:border-box}:root{--base-font-size: 14px;--bg-primary: #f5f7fa;--bg-secondary: #e8ecf1;--bg-canvas: linear-gradient(135deg, #ffffff 0%, #f0f4f8 100%);--bg-clues: rgba(240, 244, 248, .85);--bg-info: rgba(248, 250, 252, .9);--bg-card: rgba(255, 255, 255, .95);--text-primary: #1a202c;--text-secondary: #4a5568;--text-muted: #2b3442;--text-accent: #ff6b35;--accent-orange: #ff6b35;--accent-lime: #84cc16;--accent-purple: #8b5cf6;--accent-chartreuse: #a3e635;--accent-slate: #64748b;--accent-teal: #14b8a6;--border-light: rgba(100, 116, 139, .15);--border-medium: rgba(100, 116, 139, .3);--border-accent: #64748b;--status-timer: #ff6b35;--status-progress: #8b5cf6;--status-info: #14b8a6;--shadow-sm: 0 2px 8px rgba(100, 116, 139, .1);--shadow-md: 0 4px 16px rgba(100, 116, 139, .15);--shadow-lg: 0 8px 24px rgba(100, 116, 139, .2)}body.dark-mode{--bg-primary: #0f172a;--bg-secondary: #1e293b;--bg-canvas: linear-gradient(135deg, #1e293b 0%, #334155 100%);--bg-clues: rgba(30, 41, 59, .85);--bg-info: rgba(15, 23, 42, .9);--bg-card: rgba(51, 65, 85, .95);--text-primary: #f1f5f9;--text-secondary: #cbd5e1;--text-muted: #b5c8e2;--text-accent: #fb923c;--accent-orange: #fb923c;--accent-lime: #a3e635;--accent-purple: #a78bfa;--accent-chartreuse: #bef264;--accent-slate: #94a3b8;--accent-teal: #2dd4bf;--border-light: rgba(148, 163, 184, .2);--border-medium: rgba(148, 163, 184, .4);--border-accent: #94a3b8;--status-timer: #fb923c;--status-progress: #a78bfa;--status-info: #2dd4bf;--shadow-sm: 0 2px 8px rgba(0, 0, 0, .4);--shadow-md: 0 4px 16px rgba(0, 0, 0, .5);--shadow-lg: 0 8px 24px rgba(0, 0, 0, .6)}body{font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;background:var(--bg-primary);color:var(--text-primary);transition:background-color .3s ease,color .3s ease}.main-content{display:flex;height:calc(100vh - 90px);gap:20px;padding:20px;background:var(--bg-primary);transition:background .3s ease}.canvas-area{flex:2;min-width:300px;position:relative}.canvas-placeholder{background:var(--bg-canvas);height:100%;width:100%;border-radius:12px;display:flex;align-items:center;justify-content:center;border:3px solid var(--border-accent);padding:15px;box-shadow:var(--shadow-md);transition:all .3s ease}#fillincanvasholder{display:flex;align-items:center;justify-content:center;width:100%;height:100%}#fillincanvas{max-width:100%;max-height:100%;object-fit:contain}.sidebar{flex:1;min-width:300px;display:flex;flex-direction:column;gap:20px}.clues-area{background:var(--bg-clues);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-radius:12px;padding:20px;flex:1;border:2px solid var(--border-medium);overflow-y:auto;display:flex;flex-direction:column;box-shadow:var(--shadow-md);transition:all .3s ease}.clues-content{flex:1;overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--accent-pink) transparent}.clues-content::-webkit-scrollbar{width:8px}.clues-content::-webkit-scrollbar-track{background:transparent}.clues-content::-webkit-scrollbar-thumb{background:var(--accent-pink);border-radius:4px}.clues-content::-webkit-scrollbar-thumb:hover{background:var(--accent-purple)}.clues-section{margin-bottom:25px;display:block}.clues-section h3{color:var(--text-primary);margin-bottom:12px;font-size:calc(var(--base-font-size) + 2px);font-weight:600;border-bottom:2px solid var(--accent-orange);padding-bottom:6px;letter-spacing:.5px;text-transform:uppercase;background:linear-gradient(90deg,var(--accent-orange),var(--accent-purple));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;transition:all .3s ease}.clues-list{display:flex;flex-wrap:wrap;gap:4px;list-style:none;padding:0;margin:0;justify-content:flex-start;align-items:flex-start}.clues-list p{background:var(--bg-card);backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);padding:10px 12px;border-radius:8px;font-size:14px;color:var(--text-primary);border-left:4px solid var(--accent-teal);box-shadow:var(--shadow-sm);transition:all .3s ease;font-weight:500}.clues-list p:hover{transform:translate(4px);box-shadow:var(--shadow-md);border-left-color:var(--accent-purple)}.clues-list li{padding:4px 8px;margin:1px 0;cursor:pointer;border-radius:6px;transition:all .2s ease;color:var(--text-secondary);background:var(--bg-card);border-left:3px solid transparent;display:inline-block;min-width:fit-content;max-width:120px;text-align:center;font-size:calc(var(--base-font-size) - 1px)}.clues-list li:hover{background:var(--bg-secondary);border-left-color:var(--accent-coral);transform:scale(1.05);color:var(--text-primary)}.clues-list li:active,.clues-list li.selected{background:linear-gradient(90deg,var(--accent-peach),var(--accent-purple));color:var(--text-primary);font-weight:600;border-left-color:var(--accent-pink);box-shadow:var(--shadow-sm)}.clues-list li:before{content:" ";margin-right:.5em}.clues-list li{margin:.1em 0}.clues-list li.checked:before{content:"✓";margin-right:.5em;color:#4fd1c5;font-weight:700;text-shadow:0 0 8px rgba(79,209,197,.5)}.info-area{background:var(--bg-info);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-radius:12px;padding:20px;border:2px solid var(--border-medium);height:160px;display:flex;flex-direction:column;justify-content:center;gap:15px;position:relative;box-shadow:var(--shadow-md);transition:all .3s ease}.timer,.progress,.status{font-size:var(--base-font-size);font-weight:600;text-align:center;padding:8px 12px;background:var(--bg-card);backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);border-radius:8px;box-shadow:var(--shadow-sm);transition:all .3s ease;border-left:4px solid transparent}.timer{color:var(--status-timer);border-left-color:var(--status-timer)}.timer:hover{box-shadow:var(--shadow-md);transform:scale(1.02)}.progress{color:var(--status-progress);border-left-color:var(--status-progress)}.progress:hover{box-shadow:var(--shadow-md);transform:scale(1.02)}.status{color:var(--status-info);border-left-color:var(--status-info)}.status:hover{box-shadow:var(--shadow-md);transform:scale(1.02)}.version-tag{position:absolute;bottom:4px;right:8px;font-size:9px;color:var(--text-muted);background:var(--bg-card);backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);padding:3px 8px;border-radius:12px;font-family:Courier New,monospace;border:1px solid var(--border-light);-webkit-user-select:none;user-select:none;pointer-events:none;transition:all .3s ease}.puzzle-meta{margin-top:auto;padding-top:15px;border-top:2px solid var(--border-light);font-size:calc(var(--base-font-size) - 3px);color:var(--text-secondary);transition:all .3s ease}.puzzle-title{font-weight:700;margin-bottom:8px;font-size:calc(var(--base-font-size) - 1px);color:var(--text-primary);-webkit-text-fill-color:var(--text-primary);letter-spacing:.3px;text-shadow:0 1px 0 rgba(0,0,0,.08)}.meta-row{display:flex;justify-content:space-between;align-items:center;gap:6px;flex-wrap:wrap}.meta-item{padding:4px 8px;background:var(--bg-card);backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);border-radius:6px;font-size:calc(var(--base-font-size) - 4px);font-weight:500;color:var(--text-secondary);border:1px solid var(--border-light);transition:all .2s ease}.meta-item:hover{transform:scale(1.05);border-color:var(--accent-pink);color:var(--text-primary)}body[data-layout=mobile] .sidebar{gap:10px}body[data-layout=mobile] .clues-area{padding:12px}body[data-layout=mobile] .canvas-area{min-width:auto}body[data-layout=tablet] .main-content{gap:15px;padding:15px}body[data-layout=desktop] .main-content{gap:20px;padding:20px}@media (max-width: 768px){.main-content{flex-direction:column;height:auto}.canvas-area{min-height:300px;min-width:100%}.sidebar{min-width:auto}}@media (max-width: 480px){.main-content{padding:10px;gap:10px}.canvas-area{min-width:100%;min-height:250px}.clues-area{padding:12px}.info-area{height:auto;min-height:120px}}body[data-layout=mobile] .clues-section:nth-child(n+4){display:none!important}:root{--header-bg-light: #2c3e50;--header-bg-dark: rgba(44, 62, 80, .92);--header-text-light: white;--header-border-light: rgba(255, 255, 255, .2);--header-border-dark: rgba(255, 255, 255, .1);--header-shadow-light: rgba(236, 72, 153, .3);--header-shadow-dark: rgba(0, 0, 0, .5);--hamburger-color: rgba(255, 255, 255, .95);--hamburger-hover-color: #fde68a;--hamburger-hover-shadow: rgba(253, 230, 138, .5);--logo-image-shadow: rgba(0, 0, 0, .2);--logo-text-shadow: rgba(0, 0, 0, .2)}.header-container{display:flex;align-items:center;height:50px;width:100%;padding:0 18px;box-sizing:border-box;background:transparent}header{background-color:var(--header-bg-light);color:var(--header-text-light);padding:0;margin:0;height:50px;border-bottom:3px solid var(--header-border-light);box-shadow:0 4px 12px var(--header-shadow-light);transition:all .3s ease}body.dark-mode header{background:var(--header-bg-dark);border-bottom-color:var(--header-border-dark);box-shadow:0 4px 12px var(--header-shadow-dark)}.logo{display:flex;align-items:center;font-size:20px;font-weight:700;margin-right:auto;margin-left:18px;gap:10px;min-height:36px}.hamburger-icon{font-size:2.1rem;color:var(--hamburger-color);cursor:pointer;margin-right:12px;margin-left:2px;user-select:none;transition:all .3s ease;line-height:1;display:flex;align-items:center;height:50px}.hamburger-icon:hover{color:var(--hamburger-hover-color);transform:scale(1.1);text-shadow:0 0 10px var(--hamburger-hover-shadow)}.logo-image{width:32px;height:32px;filter:drop-shadow(0 2px 4px var(--logo-image-shadow));transition:transform .3s ease}.logo-image:hover{transform:rotate(10deg) scale(1.1)}.logo-text{font-weight:700;letter-spacing:.5px;text-shadow:0 2px 4px var(--logo-text-shadow)}.logo-image{height:36px;width:auto;max-width:36px;object-fit:contain}.logo-text{white-space:nowrap}.hamburger-menu-overlay{position:fixed;inset:0;background:#00000080;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);opacity:0;visibility:hidden;transition:opacity .3s ease,visibility .3s ease;z-index:998}.hamburger-menu-overlay.show{opacity:1;visibility:visible}.hamburger-nav{position:fixed;top:0;left:-320px;width:320px;height:100vh;background:var(--header-bg-light);color:var(--header-text-light);z-index:999;transition:left .3s ease;overflow-y:auto;box-shadow:2px 0 12px #0000004d}body.dark-mode .hamburger-nav{background:var(--header-bg-dark)}.hamburger-nav.show{left:0}.hamburger-menu-header{display:flex;justify-content:space-between;align-items:center;padding:20px;border-bottom:2px solid rgba(255,255,255,.1)}.hamburger-menu-header h2{margin:0;font-size:24px;font-weight:700}.hamburger-close{background:none;border:none;color:var(--header-text-light);font-size:36px;line-height:1;cursor:pointer;padding:0;width:36px;height:36px;display:flex;align-items:center;justify-content:center;border-radius:4px;transition:all .2s ease}.hamburger-close:hover{background:#ffffff1a;transform:rotate(90deg)}.hamburger-menu-content{padding:20px}.hamburger-section{margin-bottom:30px}.hamburger-section h3{font-size:14px;text-transform:uppercase;letter-spacing:1px;color:var(--hamburger-hover-color);margin-bottom:12px;padding-bottom:8px;border-bottom:1px solid rgba(255,255,255,.1)}.hamburger-section ul{list-style:none;padding:0;margin:0}.hamburger-section li{margin:0}.hamburger-section a,.hamburger-section button{display:block;width:100%;padding:12px 16px;color:var(--header-text-light);text-decoration:none;font-size:16px;border:none;background:none;text-align:left;cursor:pointer;border-radius:6px;transition:all .2s ease;font-family:inherit}.hamburger-section a:hover,.hamburger-section button:hover{background:#ffffff1a;transform:translate(4px)}.hamburger-section a:active,.hamburger-section button:active{background:#ffffff26}.hamburger-footer{border-top:2px solid rgba(255,255,255,.1);padding-top:20px;margin-top:auto}.social-links{display:flex;gap:16px;justify-content:center;margin-bottom:20px}.social-links a{width:40px;height:40px;display:flex;align-items:center;justify-content:center;background:#ffffff1a;border-radius:50%;color:var(--header-text-light);transition:all .3s ease;padding:0}.social-links a:hover{background:var(--hamburger-hover-color);transform:scale(1.1) translateY(-2px)}.legal-links{display:flex;flex-direction:column;gap:8px;margin-bottom:16px}.legal-links a{padding:8px 12px;font-size:13px;color:#ffffffb3}.legal-links a:hover{color:var(--hamburger-hover-color)}.copyright{text-align:center;font-size:11px;color:#ffffff80;padding:12px 0}body.menu-open{overflow:hidden}@media (max-width: 768px){.logo{font-size:18px;gap:8px}.logo-image{height:32px;max-width:32px}}@media (max-width: 480px){.logo{font-size:16px;gap:6px}.logo-image{height:28px;max-width:28px}.hamburger-nav{width:280px;left:-280px}}:root{--menu-bg-light: rgba(245, 245, 245, .95);--menu-border-light: rgba(255, 140, 0, .25);--menu-shadow-light: rgba(255, 140, 0, .12);--menu-bg-dark: rgba(35, 35, 40, .95);--menu-border-dark: rgba(255, 140, 0, .35);--menu-shadow-dark: rgba(0, 0, 0, .3);--gear-color-light: #61ec48;--gear-color-dark: #61ec48;--gear-hover-primary: rgba(255, 140, 0, .2);--gear-hover-secondary: rgba(97, 236, 72, .2);--gear-hover-color: #ff8c00;--gear-hover-primary-dark: rgba(255, 140, 0, .3);--gear-hover-secondary-dark: rgba(97, 236, 72, .3);--gear-hover-color-dark: #ff8c00;--btn-bg-light: rgba(255, 255, 255, .85);--btn-bg-dark: rgba(55, 55, 60, .85);--btn-border-light: rgba(200, 200, 200, .3);--btn-border-dark: rgba(120, 120, 125, .4);--btn-text-light: #2d3748;--btn-text-dark: #f0f0f0;--btn-hover-bg-light: #ff8c00;--btn-hover-bg-dark: #61ec48;--btn-shadow-light: rgba(0, 0, 0, .08);--btn-shadow-hover-light: rgba(255, 140, 0, .25);--btn-shadow-dark: rgba(0, 0, 0, .3);--btn-shadow-hover-dark: rgba(97, 236, 72, .3);--btn-focus-color: #6a0dad;--dropdown-bg-light: rgba(255, 255, 255, .98);--dropdown-bg-dark: rgba(45, 45, 50, .98);--dropdown-border-light: rgba(200, 200, 200, .4);--dropdown-border-dark: rgba(120, 120, 125, .5);--dropdown-shadow-light: rgba(0, 0, 0, .15);--dropdown-shadow-dark: rgba(0, 0, 0, .5);--dropdown-item-hover-light: rgba(255, 140, 0, .15);--dropdown-item-focus-light: rgba(255, 140, 0, .25);--dropdown-item-active-light: rgba(255, 140, 0, .35);--dropdown-item-hover-dark: rgba(97, 236, 72, .2);--dropdown-item-border-hover: #ff8c00;--dropdown-item-border-focus: #6a0dad;--dropdown-item-border-hover-dark: #61ec48;--dropdown-separator-light: rgba(200, 200, 200, .3);--dropdown-separator-dark: rgba(120, 120, 125, .3);--gear-menu-separator-light: rgba(200, 200, 200, .3);--gear-menu-separator-dark: rgba(120, 120, 125, .3);--dropdown-active-bg: rgba(255, 140, 0, .2)}.menu-btn#play-btn{min-width:90px;width:90px;text-align:center}.menu-bar{background-color:var(--bg-secondary);border-bottom:1px solid var(--border-medium);padding:8px 15px;display:flex;align-items:center;justify-content:space-between;height:40px;position:relative;z-index:100;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);transition:all .3s ease}body.dark-mode .menu-bar{border-bottom-color:var(--border-light)}.menu-left{display:flex;align-items:center;position:relative}.gear-icon{font-size:16px;color:var(--text-primary);margin-right:15px;cursor:pointer;padding:5px;border-radius:3px;transition:all .3s ease}.gear-icon:hover{background-color:var(--accent-orange);color:#fff;transform:rotate(90deg) scale(1.1)}.menu-items{display:flex;list-style:none;margin:0;padding:0;gap:20px}.menu-items li{margin:0;padding:0;position:relative}.menu-btn{background:var(--bg-card);border:2px solid var(--border-light);padding:6px 12px;cursor:pointer;border-radius:4px;font-size:14px;color:var(--text-primary);font-family:inherit;transition:all .3s ease;display:flex;align-items:center;gap:4px;box-shadow:var(--shadow-sm)}.menu-btn:hover{background-color:var(--accent-orange);color:#fff;transform:translateY(-2px);box-shadow:var(--shadow-md)}.menu-btn:focus{outline:2px solid var(--accent-purple);outline-offset:1px}.menu-btn:active{background-color:var(--accent-lime);transform:translateY(0)}.dropdown-container,.dropdown-btn{position:relative}.dropdown-arrow{font-size:10px;transition:transform .3s ease}.dropdown-btn:hover .dropdown-arrow{transform:rotate(180deg)}.dropdown-menu{position:absolute;top:100%;left:0;background-color:var(--bg-card);backdrop-filter:blur(15px);-webkit-backdrop-filter:blur(15px);border:1px solid var(--border-medium);border-radius:4px;box-shadow:var(--shadow-lg);min-width:140px;opacity:0;visibility:hidden;transform:translateY(-10px);transition:all .3s ease;z-index:1000;margin-top:2px}.dropdown-menu.show{opacity:1;visibility:visible;transform:translateY(0)}.dropdown-item{display:block;width:100%;padding:8px 12px;background:none;border:none;text-align:left;cursor:pointer;font-size:14px;color:var(--text-primary);font-family:inherit;transition:background-color .2s;border-radius:0}.dropdown-item:first-child{border-top-left-radius:4px;border-top-right-radius:4px}.dropdown-item:last-child{border-bottom-left-radius:4px;border-bottom-right-radius:4px}.dropdown-item:hover{background-color:var(--accent-orange);color:#fff}.dropdown-item:focus{outline:none;background-color:var(--bg-secondary)}.dropdown-item:active{background-color:var(--accent-lime)}.dropdown-item:not(:last-child){border-bottom:1px solid var(--border-light)}.dropdown-container:has(.dropdown-menu.show) .dropdown-btn{background-color:var(--bg-secondary)}.dropdown-container:has(.dropdown-menu.show) .dropdown-arrow{transform:rotate(180deg)}.gear-menu{position:absolute;top:100%;left:0;background-color:var(--bg-card);backdrop-filter:blur(15px);-webkit-backdrop-filter:blur(15px);border:1px solid var(--border-medium);border-radius:4px;box-shadow:var(--shadow-lg);min-width:160px;opacity:0;visibility:hidden;transform:translateY(-10px);transition:all .3s ease;z-index:1000;margin-top:4px;padding:0}.gear-menu.show{opacity:1;visibility:visible;transform:translateY(0)}.gear-menu ul{list-style:none;margin:0;padding:0}.gear-menu li{margin:0;padding:0}.gear-menu button{display:block;width:100%;padding:10px 14px;background:transparent;border:none;text-align:left;cursor:pointer;font-size:14px;font-weight:500;color:var(--text-primary);font-family:inherit;transition:all .2s ease;border-radius:0}.gear-menu button:hover{background-color:var(--accent-orange);color:#fff}.gear-menu button:focus{outline:none;background-color:var(--bg-secondary)}.gear-menu button:active{background-color:var(--accent-lime)}.gear-menu .menu-separator{border-bottom:1px solid var(--border-light);margin:4px 0;height:0}#help-btn[disabled]{opacity:1!important;cursor:pointer!important;pointer-events:auto!important}@media (max-width: 768px){.menu-items{gap:10px}.menu-btn{padding:4px 8px;font-size:13px}.dropdown-menu{min-width:120px}.dropdown-item{padding:6px 10px;font-size:13px}}#fillinapp{margin:0;padding:0;border:2px solid #e8e8e8;background-color:#fffff5;box-sizing:border-box}#fillinapp h1{font-size:2em;font-style:italic;margin-bottom:.5em}#fillinapp p{font-size:1.2em;margin-bottom:1em}#fillinbackground{display:flex;justify-content:center;align-items:center;min-height:640px;background-color:#f0f0f0}#fillincanvas{background:linear-gradient(135deg,#fff,#fef7f9);box-sizing:border-box;border:3px solid #000000;box-shadow:0 4px 16px #ec489933;transition:all .3s ease}body.dark-mode #fillincanvas{background:linear-gradient(135deg,#2d2438,#1e3a5f);border-color:#000;box-shadow:0 4px 16px #00000080}body.dark-mode .clues-list li.checked:before{color:#68d391;text-shadow:0 0 8px rgba(104,211,145,.6);margin-right:.5em}:root{font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}a{font-weight:500;color:var(--accent-purple);text-decoration:none;transition:color .2s ease}a:hover{color:var(--accent-pink);text-decoration:underline}h1{font-size:2.5em;line-height:1.2;color:var(--text-primary);margin-bottom:.5em}h2{font-size:2em;line-height:1.3;color:var(--text-primary);margin-bottom:.5em}h3{font-size:1.5em;line-height:1.4;color:var(--text-primary);margin-bottom:.5em}.card{background:var(--bg-card);backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);padding:1.5em;border-radius:8px;box-shadow:var(--shadow-sm);transition:all .3s ease}.card:hover{box-shadow:var(--shadow-md);transform:translateY(-2px)}*:focus-visible{outline:2px solid var(--accent-purple);outline-offset:2px}