/* Per-game art direction. Only visual properties change; hitboxes and game state stay original. */
html[data-game="after"]{--pink:#d6abd9;--cyan:#a0d4d7;--gold:#d4c493}
html[data-game="after"] #wrap{width:min(calc(100vw - 24px),calc((100dvh - 82px)*1.7778));max-height:calc(100dvh - 78px);border-radius:10px;border-color:#8ca8b629}
html[data-game="after"] .screen .panel,html[data-game="rooftop"] .panel,html[data-game="rakpart"] .card{background:#172630ef!important;border:1px solid #b0c3b52a!important;border-radius:12px!important;box-shadow:0 20px 55px #0005!important}
html[data-game="after"] .pill,html[data-game="rooftop"] .pill,html[data-game="rakpart"] .stat{background:#172630e8;border-color:#a5bab530;border-radius:7px;backdrop-filter:blur(8px)}
html[data-game="after"] .screen h1,html[data-game="rooftop"] h1{background:none!important;color:#e3e6d8!important;-webkit-text-fill-color:initial;font-weight:650;letter-spacing:-1.5px}
html[data-game="after"] .btn,html[data-game="rooftop"] .btn,html[data-game="rakpart"] .btn{background:#bac9b1!important;color:#192f31!important;border:1px solid #bac9b1!important}
html[data-game="rooftop"] #wrap{max-height:calc(100dvh - 76px);width:min(calc(100vw - 20px),calc((100dvh - 76px)*.97619));border-radius:10px;border:1px solid #d3dfc329}
html[data-game="rooftop"] .hud{background:linear-gradient(#13232ccf,#13232c00);padding-top:10px}
html[data-game="rakpart"] .frame{width:min(calc(100vw - 26px),calc((100dvh - 82px)*1.778));max-height:calc(100dvh - 78px);border-radius:10px;border:1px solid #d3dfc329}
html[data-game="rakpart"] .hud{gap:9px}html[data-game="rakpart"] .pill{background:#15262edf!important;border-color:#a3b4aa35!important;color:#e3e8d8;border-radius:7px}
/* Strategy games: map remains clear, menus share restrained parchment and brass details. */
html[data-game="honfoglalas"] #app{inset:var(--dx-toolbar) 0 0}
html[data-game="honfoglalas"] #topbar{background:#182932;border-bottom:1px solid #c8c7a355;box-shadow:none}
html[data-game="honfoglalas"] .res{background:#e1d6b9;border:1px solid #a69c81;box-shadow:none;font-family:"Segoe UI",sans-serif}
html[data-game="honfoglalas"] #brand{letter-spacing:1px;font-size:14px;color:#d1d4b6}
html[data-game="honfoglalas"] .panel{background:#ded4ba;border:1px solid #9c927b;border-radius:8px;box-shadow:0 12px 30px #0003}
html[data-game="honfoglalas"] .navbtn{background:#253e45;color:#d2d7bf;border:1px solid #b3c1a933;text-shadow:none;box-shadow:none;font-family:"Segoe UI",sans-serif;font-size:11px;letter-spacing:.2px}
html[data-game="mohacs"] #stage,html[data-game="zrinyi"] #stage,html[data-game="torda"] #stage{display:flex;justify-content:center;align-items:center;background:#101b22}
html[data-game="hunyadi-defense"] #stage{height:calc(100dvh - var(--dx-toolbar));top:auto!important}
html[data-game="hunyadi-rpg"] #ui{top:calc(var(--dx-toolbar) + 8px)}
html[data-game="hunyadi-rpg"] .panel,html[data-game="hunyadi-rpg"] #dialog,html[data-game="hunyadi-rpg"] #inventory{background-color:#202d31!important;border-color:#b5aa833b!important;border-radius:10px!important}
html[data-game="hunyadi-rpg"] #hud{background:#1a2d31e8!important;border-color:#c3bc9845!important;box-shadow:none!important}
/* Medieval storybook panels and highly detailed, separate NPC silhouettes. */
html[data-game="matyas"] .app{height:calc(100dvh - var(--dx-toolbar));max-height:calc(100dvh - var(--dx-toolbar));padding-top:12px}
html[data-game="matyas"] .panel{border-radius:10px;border:1px solid #8e795d;box-shadow:0 12px 35px #0004}
html[data-game="matyas"] .topbar{background:#293941;color:#eee5ca;border-radius:8px 8px 0 0}
html[data-game="matyas"] .figure .dx-character{width:89px;height:113px;max-width:none;position:absolute;left:50%;bottom:0;transform:translateX(-50%);object-fit:contain;filter:drop-shadow(1px 3px 2px #22313742);pointer-events:none}
html[data-game="matyas"] .nameTag{font-family:"Segoe UI",sans-serif;font-size:10px;font-weight:500;border:1px solid #e0ceb557;background:#243139e8;color:#ede3cb;box-shadow:none;border-radius:4px;padding:4px 7px}
html[data-game="matyas"] .ring{box-shadow:none!important}
/* A noir casebook, not a neon dashboard. */
html[data-game="rejtely"] #game,html[data-game="kulcs"] #app{max-width:1540px;margin-left:auto;margin-right:auto}
html[data-game="rejtely"] .panel,html[data-game="kulcs"] .panel{background:linear-gradient(130deg,#273439,#1b282e)!important;border:1px solid #b0bca138!important;border-radius:10px!important;color:#d9dccd}
html[data-game="rejtely"] header,html[data-game="kulcs"] #top{background:#1a282e!important;border-color:#b9c5ae2e!important;border-radius:7px}
html[data-game="rejtely"] button:not([class*="dx"]),html[data-game="kulcs"] button:not([class*="dx"]){background:linear-gradient(130deg,#354a4c,#253e44);color:#e6e2c9;border:1px solid #b7c1a546;font:500 12px "Segoe UI",sans-serif;box-shadow:none!important}
html[data-game="rejtely"] button.active,html[data-game="kulcs"] button.active{background:#b9baa0;color:#21343a}
html[data-game="rejtely"] .npc .dx-character{position:absolute;width:130px;height:177px;max-width:none;bottom:0;left:50%;transform:translateX(-50%);pointer-events:none;filter:drop-shadow(2px 4px 2px #0b1a2666)}
html[data-game="kulcs"] .fig .dx-character,html[data-game="kulcs"] .portrait .dx-character{position:absolute;width:128px;height:172px;max-width:none;bottom:0;left:50%;transform:translateX(-50%);pointer-events:none;filter:drop-shadow(2px 4px 2px #0b1a2666)}
html[data-game="rejtely"] .npc,html[data-game="kulcs"] .fig{filter:drop-shadow(3px 8px 4px #0005)}
html[data-game="rejtely"] .scene,html[data-game="kulcs"] .scene-art{border:1px solid #b0bca140!important;border-radius:8px;box-shadow:inset 0 0 35px #0919237a}
html[data-game="kulcs"] .scene-art:after{background:radial-gradient(ellipse at 40% 25%,transparent 40%,#10243255)}
html[data-game="kulcs"] .spot{border-width:1px;box-shadow:0 0 12px #dfd5a324;animation:none;border-color:#dfd3a2;background:#ddc79115}
html[data-game="kulcs"] .figLabel,html[data-game="rejtely"] .npc-label{font:500 11px "Segoe UI",sans-serif;background:#142b34e6;border:1px solid #d9d0a54f;color:#e7dec5;border-radius:5px}
/* Petőfi: keep the articulated arms, crouch, punches and equipped objects intact. */
html[data-game="petofi"] #wrap{height:calc(100dvh - var(--dx-toolbar));max-height:calc(100dvh - var(--dx-toolbar));border:0}
html[data-game="petofi"] #topbar{background:#24313be8!important;border-bottom:1px solid #d3c9a444!important;box-shadow:none}
html[data-game="petofi"] .hudItem,html[data-game="petofi"] .stat{background:#1c3036e3;border:1px solid #c8d1b937;color:#eee4ca}
html[data-game="petofi"] #player{filter:drop-shadow(3px 6px 3px #101b2666)!important}
html[data-game="petofi"] .human .head{background:radial-gradient(ellipse at 30% 25%,#f4d9b6 0,#dbab8a 62%,#ac735b);box-shadow:inset -4px -2px 0 #71433122;border:1px solid #613c3333}
html[data-game="petofi"] .human .nose{background:#c18e70;box-shadow:1px 1px 1px #6a484d55}
html[data-game="petofi"] .human .eye{box-shadow:0 -3px 0 -.5px #58443c,inset 1px 1px 0 #c6c8b4}
html[data-game="petofi"] #player .hair{background:linear-gradient(145deg,#635044,#382e31 60%,#26262f);box-shadow:inset 3px 2px 0 #baa88b1f}
html[data-game="petofi"] #player .torso{background:linear-gradient(95deg,#ded2b9 0 34%,#92575a 35% 64%,#657c69 65%);box-shadow:inset 2px 2px 0 #eee4c722,inset -4px -3px 0 #21313d33}
html[data-game="petofi"] #player .coat{background:linear-gradient(90deg,#243b47 0 18%,#577180 19% 22%,transparent 23% 77%,#577180 78% 81%,#243b47 82%)}
html[data-game="petofi"] .human .leg{background:linear-gradient(90deg,#526171,#293c4b);box-shadow:inset 1px 0 0 #bfd0bc33}
html[data-game="petofi"] .human .arm{background:linear-gradient(90deg,#526a76,#263c47);box-shadow:inset 1px 0 0 #cad5c033}
html[data-game="petofi"] .human .shoe{background:linear-gradient(145deg,#564d44,#222e35);border-bottom:1px solid #ab9169}
/* Football: printed sports journal UI, new animated player sheets on the live pitch. */
html[data-game="manager"]{--red:#a34f53;--green:#557a66;--paper:#e7e2d2}
html[data-game="manager"] .newspaper{background:#e5dfca!important;border:1px solid #a5a391!important;box-shadow:0 20px 60px #0004!important}
html[data-game="manager"] .paper,html[data-game="manager"] .panel,html[data-game="manager"] .playerRow{border-width:1px!important;border-color:#b4b4a1!important;box-shadow:none!important}
html[data-game="manager"] .panel{border-radius:8px!important;background:#f1ecdc!important}
html[data-game="manager"] .playerRow{background:#f6f1e2!important;border-radius:6px!important;padding:10px}
html[data-game="manager"] .playerRow img{border-radius:7px}
html[data-game="manager"] .headline{letter-spacing:-1px;color:#25373a}
html[data-game="manager"] .log{background:#e8e5d7;border-width:1px;border-color:#a4aa98;line-height:1.7;font-weight:500}
html[data-game="manager"] .sprite>.h,html[data-game="manager"] .sprite>.b,html[data-game="manager"] .sprite>.legs{visibility:hidden}
html[data-game="manager"] .dx-actor-sheet{position:absolute;inset:-8px -16px -4px;background-size:800% 100%;background-repeat:no-repeat;pointer-events:none;animation:dx-sheet .75s steps(7) infinite paused;filter:drop-shadow(1px 3px 2px #173c4640)}
html[data-game="manager"] .sprite.moving .dx-actor-sheet{animation-play-state:running}
@keyframes dx-sheet{to{background-position:100% 0}}
html[data-game="manager"] .ball{border-width:1px;background:radial-gradient(circle at 35% 30%,#fbf6e7,#d9e2d9 35%,#657b7e 38% 48%,#f3eddb 50%);box-shadow:2px 4px 4px #173b4b44}
/* Swimming: preserve the original stroke animation and upgrade the body materials and water. */
html[data-game="uszas"] .screen{padding-top:12px}
html[data-game="uszas"] .panel,html[data-game="uszas"] .card,html[data-game="uszas"] .athlete-card{background:#1b303beF!important;border-color:#b2c5c230!important;border-radius:11px!important;box-shadow:none!important}
html[data-game="uszas"] .avatar .torso{background:linear-gradient(140deg,#e1b494,var(--suit) 45%,#466071)!important;box-shadow:inset 0 1px 0 #f7e8c767,0 2px 2px #15395455}
html[data-game="uszas"] .avatar .head{background:radial-gradient(ellipse at 40% 20%,#eed0ac,#c38e6f 70%);box-shadow:inset -2px -1px 0 #95614c66}
html[data-game="uszas"] .avatar .cap{background:linear-gradient(145deg,#ffffff44,transparent 65%),var(--cap);box-shadow:inset 0 1px 0 #e3ecda88}
html[data-game="uszas"] .avatar .frontArm,html[data-game="uszas"] .avatar .backArm{background:linear-gradient(#eed0ae,#b78669);box-shadow:0 1px 1px #29465233}
html[data-game="uszas"] .avatar .legA,html[data-game="uszas"] .avatar .legB{background:linear-gradient(90deg,#d5ad8c 0 44%,var(--suit) 45%);box-shadow:0 1px 1px #1b3e5144}
html[data-game="uszas"] .avatar .goggle{background:linear-gradient(145deg,#c4eee5,#648e9e 48%,#284552 55%);border:1px solid #3c6174;height:5px}
html[data-game="uszas"] .avatar:after{content:"";position:absolute;left:-14px;top:33px;width:112px;height:11px;background:repeating-linear-gradient(175deg,transparent 0 5px,#d9f2dc77 6px,transparent 7px 13px);border-radius:50%;pointer-events:none;opacity:.6}
/* Lake-side gastronomy: softer materials, shaded food and varied customer silhouettes. */
html[data-game="langos"] .panel,html[data-game="langos"] .card{border:1px solid #a89f855c!important;border-radius:10px!important;box-shadow:0 10px 32px #0002!important}
html[data-game="langos"] .menu-card{background:#eadbc0!important;border:1px solid #b3a581!important}
html[data-game="langos"] .customer .head{border-width:1px;background-image:radial-gradient(ellipse at 30% 25%,#ffe7c077,transparent 65%);box-shadow:inset -5px -3px 0 #73463425;border-radius:45% 45% 47% 47%}
html[data-game="langos"] .customer .hair{border-width:1px;box-shadow:inset 3px 3px 0 #eee2c724;border-radius:55% 55% 25% 30%;transform:rotate(-4deg)}
html[data-game="langos"] .customer .body{border-width:1px!important;box-shadow:inset -7px -4px 0 #23425335,inset 2px 2px 0 #e6e1c729;border-radius:24px 24px 10px 10px}
html[data-game="langos"] .customer .body:before{content:"";position:absolute;inset:4px 7px 0;border-left:1px solid #e2e4c957;border-right:1px solid #e2e4c933;background:linear-gradient(90deg,transparent 45%,#293e4955 46% 47%,transparent 48%);pointer-events:none}
html[data-game="langos"] .customer .arm{border-width:1px;background-image:linear-gradient(90deg,#ecd5ae55,#713d3822)}
html[data-game="langos"] .customer .eye{width:5px;height:7px;border-radius:50%;box-shadow:1px 1px 0 #eadabd,0 -4px 0 -1px #634a3c}
html[data-game="langos"] .customer .mouth{border-width:2px}
html[data-game="langos"] .customer .hat,html[data-game="langos"] .customer .cap,html[data-game="langos"] .customer .beard,html[data-game="langos"] .customer .bag{border-width:1px!important;box-shadow:inset 2px 2px 0 #e0daba29}
html[data-game="langos"] .fryer{border-width:1px;background:linear-gradient(130deg,#d4d9cb,#788a8e 70%,#bec6b8)}
html[data-game="langos"] .fryer:after{border-width:1px;box-shadow:inset 0 0 0 5px #694e3444,inset 0 0 18px #6a3f2944;background:radial-gradient(#eed27a,#c09442)}
/* Festival clean-up: environmental HUD with unobstructed isometric play. */
html[data-game="tefeszt"] #gameShell{height:calc(100dvh - var(--dx-toolbar))}
html[data-game="tefeszt"] .hero-card{background:#1b3035ef;border:1px solid #b6cba744;border-radius:13px;box-shadow:0 20px 70px #0005}
html[data-game="tefeszt"] .hero-card h1 span{color:#c2d1a7;text-shadow:none}
html[data-game="tefeszt"] .label{color:#d3ddba;background:#c2d1a714;border-radius:5px;font-size:10px;letter-spacing:1.6px}
html[data-game="tefeszt"] .hud-card,html[data-game="tefeszt"] .hud-panel,html[data-game="tefeszt"] .inventory{background:#192e35e8!important;border:1px solid #c0ceb832!important;border-radius:9px!important;box-shadow:none!important}
html[data-game="tefeszt"] .primary-btn{background:#c5d2b0;color:#243d35;border:1px solid #c5d2b0;box-shadow:none}
@media(max-width:700px){html[data-game="matyas"] .app{height:auto;max-height:none}html[data-game="kulcs"] #app,html[data-game="rejtely"] #game{padding-left:8px;padding-right:8px}html[data-game="manager"] .page{padding:8px}html[data-game="manager"] .newspaper{padding:10px}}

/* Final layout/contrast pass. Keep warm scene colors where the original UI uses dark ink. */
html[data-game="rooftop"] #wrap{margin-inline:auto}
html[data-game="langos"] body{background:linear-gradient(#b6d5d5,#efe0ba)!important;color:#263d42!important}
html[data-game="langos"] header,html[data-game="langos"] header *{color:#203c42!important}
html[data-game="rejtely"] .topbar h1,html[data-game="kulcs"] .topbar h1,html[data-game="rejtely"] header,html[data-game="kulcs"] header{color:#eef0de!important}
html[data-game="matyas"] .startBox{background:linear-gradient(145deg,#233d44,#172a35)!important;color:#f3eedc!important;border:1px solid #c4d0b23b!important;box-shadow:0 26px 90px #071a2966!important;border-radius:24px!important}
html[data-game="matyas"] .startBox h1,html[data-game="matyas"] .startBox p{color:#edf0de!important}
html[data-game="after"] #menu button,html[data-game="rooftop"] #menu button,html[data-game="rakpart"] #menu button{background:linear-gradient(120deg,#c0d0b1,#94b7af)!important;color:#112e38!important;border:1px solid #dde3c788!important;border-radius:12px!important;box-shadow:0 8px 24px #05162726!important;font:650 16px "Segoe UI",sans-serif!important}
html.dx-is-paused body *{animation-play-state:paused!important}

html[data-game="rooftop"] #wrap{width:100%;height:calc(100dvh - var(--dx-toolbar));min-height:0;padding:8px;display:grid;place-items:center}
html[data-game="rooftop"] canvas{width:min(860px,calc((100dvh - var(--dx-toolbar) - 18px)*.97619),calc(100vw - 16px))!important;height:auto!important;max-height:calc(100dvh - var(--dx-toolbar) - 18px)!important;aspect-ratio:820/840;border-radius:12px!important}
html[data-game="rooftop"] #hud{max-width:min(810px,calc((100dvh - var(--dx-toolbar) - 18px)*.97619));top:20px}
@media(pointer:coarse),(max-width:860px){html[data-game="rooftop"] #wrap{padding:0 0 100px;min-height:0!important}html[data-game="rooftop"] canvas{width:min(100vw,calc((100dvh - var(--dx-toolbar) - 100px)*.97619))!important;height:auto!important;max-height:calc(100dvh - var(--dx-toolbar) - 100px)!important}html[data-game="rooftop"] .screen{top:calc((100dvh - var(--dx-toolbar) - 100px)/2);max-height:calc(100dvh - var(--dx-toolbar) - 120px)}html[data-game="rooftop"] #hud{width:96vw;max-width:96vw;top:7px}.dx-desktop[data-game="rooftop"] .pill{min-width:0}}