:root{font-family:system-ui,-apple-system,Arial,sans-serif;color:#193857}*{box-sizing:border-box}body{margin:0;background:#236e9b}button{font:inherit;cursor:pointer;touch-action:manipulation}button:focus-visible{outline:4px solid orange}#home{display:block;position:relative;width:min(100vw,calc(100dvh * 1.333333));aspect-ratio:4/3;margin:auto;background:url('home.png') center/100% 100% no-repeat} .hot{position:absolute;z-index:10;display:block;border:0;background:transparent;border-radius:13%;touch-action:manipulation;-webkit-tap-highlight-color:rgba(255,255,255,.2)} .hot:active{background:rgba(255,255,255,.2)}#solBtn{left:8.3%;top:32%;width:40%;height:23%}#pairsBtn{left:49%;top:32%;width:41%;height:23%}#highBtn{left:8.3%;top:56%;width:40%;height:24%}#puzzleBtn{left:49%;top:56%;width:41%;height:24%}
#game{display:block;min-height:100dvh;max-width:1050px;margin:auto;background:linear-gradient(#c9efff,#fff3d8);padding:12px 14px 24px}.top{display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap}.top h1{font-size:clamp(24px,4vw,38px);margin:7px 0}.pill{border:3px solid #2c5378;border-radius:14px;background:#fff;padding:11px 17px;font-weight:800;color:#153956;font-size:20px}.pill:active{transform:scale(.98)}.info{font-size:clamp(18px,2.7vw,24px);font-weight:700;margin:10px 0;text-align:center}#content{text-align:center}.panel{border:3px solid #b8d0dd;background:#fffefb;border-radius:20px;padding:14px;margin:12px auto;max-width:760px}.controls{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin:12px auto}.big{border:3px solid #17476c;border-radius:16px;min-height:58px;padding:10px 20px;font-size:clamp(19px,2.6vw,26px);font-weight:850;background:#ffe278;color:#143c5b}.blue{background:#7fddff}.green{background:#91ed9e}.red{background:#ffaaa4}.score{font-weight:800;font-size:22px}.pairgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;max-width:620px;margin:12px auto}.pair{height:clamp(76px,13vw,122px);border:3px solid #256697;border-radius:15px;background:#1880bc;color:white;font-size:clamp(35px,6vw,60px);font-weight:900}.pair.open,.pair.done{background:#fff9cf}.pair.done{border-color:#1c9c54;opacity:.65}.playing{display:inline-flex;flex-direction:column;align-items:center;justify-content:space-between;width:clamp(72px,15vw,125px);height:clamp(103px,21vw,175px);background:#fff;border:4px solid #315c7a;border-radius:15px;padding:10px;font-size:clamp(28px,4vw,46px);font-weight:900;box-shadow:0 5px 8px #0002}.playing.redcard{color:#ce2635}.playing.blackcard{color:#14283a}.playing .suit{font-size:1.4em}.playing.back{background:repeating-linear-gradient(45deg,#0b68ab,#0b68ab 9px,#a8e2ff 10px,#a8e2ff 14px)}.puzzlegrid{display:grid;grid-template-columns:repeat(3,1fr);width:min(76vw,430px);aspect-ratio:1;margin:12px auto;border:5px solid #1a6294;border-radius:15px;overflow:hidden}.tile{border:2px solid white;background-image:url('home.png');background-size:300% 300%;min-width:0;min-height:0}.tile.chosen{outline:6px solid #ffde36;outline-offset:-6px}.solboard{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:12px}.pile{min-width:55px;border:2px dashed #7199aa;border-radius:8px;min-height:90px;background:#ffffff70;position:relative}.minicard{width:clamp(43px,8vw,68px);height:clamp(65px,11vw,94px);border:2px solid #315471;background:#fff;border-radius:7px;font-weight:800;font-size:clamp(16px,2.5vw,22px);display:grid;place-items:center;line-height:1.05;box-shadow:0 2px 3px #0002}.minicard.redcard{color:#ca2239}.minicard.blackcard{color:#203247}.minicard.back{background:repeating-linear-gradient(45deg,#0954a4,#0954a4 7px,#c0e6ff 8px,#c0e6ff 11px)}.minicard.selected{outline:4px solid #efb800}.stack{width:clamp(44px,8vw,70px);position:relative;min-height:260px}.stack .minicard{position:absolute;left:0}.empty{font-size:19px;font-weight:800;color:#315471;padding:12px}.hint{font-size:17px;line-height:1.4;max-width:720px;margin:12px auto}
@media (orientation:portrait){#home{width:100vw;margin-top:max(0px,calc((100dvh - 75vw)/2))}}@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

#home a.hot{cursor:pointer} #game{min-height:100vh} .top a.pill{text-decoration:none;display:inline-block} .top h1{text-align:center} .tile{touch-action:manipulation}

/* V8: approved visual references translated to working, accessible game layouts */
#game{background:linear-gradient(180deg,#86d9fd 0%,#e0f7ff 46%,#fff0bd 100%);padding:14px clamp(12px,3vw,28px) 30px;color:#102d54;min-height:100dvh}
.top{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;align-items:center;gap:10px 18px;margin:0 auto 13px;max-width:980px}
.top h1{grid-column:2;grid-row:1/3;font-size:clamp(27px,5vw,55px);text-align:center;color:#ffc932;text-shadow:2px 2px 0 #10234f,-2px -2px 0 #10234f,3px 4px 0 #10234f;line-height:1.07;max-width:670px}
.pill{background:#ffe457;border:4px solid #0f3161;color:#102a52;border-radius:19px;font-size:clamp(18px,3vw,29px);box-shadow:0 4px 0 #0c3250;padding:12px 17px;text-decoration:none}
#restart{grid-column:1;grid-row:2}.top a.pill{grid-column:1;grid-row:1}
.info{font-size:clamp(18px,3vw,27px);color:#142c54;margin:12px auto;font-weight:900}
.big{border:4px solid #102c5b;border-radius:20px;color:#102c52;box-shadow:0 4px 0 #0d3159;font-weight:900}
.big.active{outline:4px solid white;outline-offset:-10px}
.hint{background:#fffcf2;border:4px solid #ff9718;border-radius:18px;padding:14px 18px;color:#162d53;font-size:clamp(17px,2.8vw,24px);font-weight:800;max-width:900px}
body[data-game="pairs"] .pairgrid{max-width:800px;gap:clamp(6px,1.2vw,13px);margin:17px auto}
body[data-game="pairs"] .pair{height:clamp(75px,19vw,150px);min-width:0;border:4px solid #08719d;border-radius:18px;background:linear-gradient(#13a6ee,#087abe);box-shadow:0 5px 6px #16496a42;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:4px}
body[data-game="pairs"] .pair.open,body[data-game="pairs"] .pair.done{background:linear-gradient(#fff4ca,#fff9e8);border-color:#1688b0}
body[data-game="pairs"] .pair.done{opacity:1;border-color:#209a58}
.backKangaroo{width:90%;height:90%;background:url('pairs-art.jpg') center/cover;border-radius:10px;display:block}
.animalpic{font-size:clamp(30px,7vw,66px);line-height:1.12}.animalname{font-size:clamp(10px,1.9vw,20px);font-weight:900;line-height:1.05;color:#19375b;overflow-wrap:anywhere}
body[data-game="puzzle"] .puzzlegrid{width:min(90vw,570px);border:10px solid #ffb035;box-shadow:0 0 0 4px #422b17;border-radius:23px}
body[data-game="puzzle"] .tile{background-image:url('puzzle-art.jpg');border:2px solid #101e28}
.puzzlechoices .big:nth-child(1){background:#47e430}.puzzlechoices .big:nth-child(2){background:#22b7f7}.puzzlechoices .big:nth-child(3){background:#ffe64a}.puzzlechoices .big:nth-child(4){background:#b667e5}
body[data-game="high"] #game{background:linear-gradient(#55c7fa 0%,#e6f8ff 34%,#ffec8f 74%,#fff6bb 100%)}
body[data-game="high"] .panel{background:transparent;border:0;padding:4px;box-shadow:none}
body[data-game="high"] .score{color:white;background:linear-gradient(90deg,#198ce9,#0065d5);border:5px solid #083f91;padding:14px;border-radius:26px;margin:auto auto 20px;max-width:800px;font-size:clamp(20px,3vw,30px)}
body[data-game="high"] .playing{border:5px solid #d82f33;border-radius:20px;width:clamp(100px,25vw,210px);height:clamp(150px,34vw,290px);font-size:clamp(45px,8vw,75px)}
body[data-game="high"] .big.green{background:#4fef38;color:white;text-shadow:2px 2px #153150}
body[data-game="high"] .big.red{background:#fa4c45;color:white;text-shadow:2px 2px #153150}
body[data-game="sol"] #game{background:linear-gradient(#62c8f5,#c7effe 45%,#fae8a5)}
body[data-game="sol"] #content{padding-top:160px;background:url('sol-art.jpg') center top/100% 155px no-repeat}
body[data-game="sol"] .solboard{background:linear-gradient(#006c2b,#064e22);padding:17px 6px 22px;border:5px solid #b98425;border-radius:20px;margin-top:0;gap:5px}
body[data-game="sol"] .stack{min-height:260px}
body[data-game="sol"] .hint{margin-top:16px}
@media(max-width:540px){.top{gap:7px}.top h1{font-size:clamp(24px,5.2vw,35px)}.pill{padding:10px 12px}.pairmodes .big{font-size:17px;min-height:55px;padding:8px}.pairmodes{gap:10px}.pair{border-width:2px!important}.puzzlechoices .big{font-size:15px;min-height:53px;padding:8px}.puzzlechoices{display:grid;grid-template-columns:repeat(4,1fr);gap:5px}body[data-game="sol"] #content{padding-top:115px;background-size:100% 110px}}

.animalphoto{display:block;width:93%;height:75%;object-fit:cover;object-position:center;border-radius:8px}.animalname{margin-top:4px}body[data-game="pairs"] .pair{padding:3px}

/* V11: targeted phone fit repairs. Keep the V8 theme, palette, cards and artwork. */
html,body{overflow-x:hidden}
#game{padding:12px 10px 28px;min-height:100dvh}
.top{grid-template-columns:minmax(128px,42%) minmax(0,1fr);gap:8px 10px}
.top h1{font-size:clamp(25px,5.3vw,40px);margin:0;line-height:1.13}
.pill{white-space:nowrap;font-size:clamp(17px,4vw,24px);padding:10px 8px}
.info{font-size:clamp(18px,4vw,23px);line-height:1.25;margin:10px auto}
.hint{font-size:clamp(16px,3.8vw,20px);padding:9px 12px;margin:12px auto}
body[data-game="puzzle"] .puzzlegrid{width:min(90vw,52dvh,500px);margin:13px auto;border-width:7px}
body[data-game="puzzle"] .tile{border-width:1px}
.puzzlechoices{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px}
.puzzlechoices .big{min-width:0;min-height:54px;font-size:clamp(13px,3.8vw,21px);padding:5px;border-width:3px}
body[data-game="high"] .panel{padding:0}
body[data-game="high"] .score{padding:10px 6px;margin-bottom:10px;font-size:clamp(18px,4.2vw,24px)}
body[data-game="high"] .playing{width:clamp(110px,27vw,185px);height:clamp(160px,31dvh,230px);font-size:clamp(45px,8vw,68px)}
body[data-game="high"] .controls{flex-wrap:nowrap;gap:10px}
body[data-game="high"] .controls .big{min-width:0;flex:1;font-size:clamp(17px,4vw,23px)}
body[data-game="pairs"] .pairgrid{width:min(100%,550px);gap:6px;margin:12px auto}
body[data-game="pairs"] .pair{height:auto;aspect-ratio:1;border-width:3px;border-radius:13px}
body[data-game="pairs"] .pairmodes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
body[data-game="pairs"] .pairmodes .big{font-size:clamp(14px,3.6vw,23px);min-width:0;padding:7px}
body[data-game="sol"] #content{padding-top:clamp(88px,16dvh,155px);background-size:100% clamp(82px,15dvh,150px)}
body[data-game="sol"] #soltop,body[data-game="sol"] #solcols{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));width:100%;max-width:720px;margin:8px auto;gap:3px;padding:8px 3px}
body[data-game="sol"] #soltop .pile{min-width:0;min-height:65px;padding:0}
body[data-game="sol"] #soltop .pile:nth-child(1){grid-column:1}body[data-game="sol"] #soltop .pile:nth-child(2){grid-column:2}
body[data-game="sol"] #soltop .pile:nth-child(3){grid-column:4}body[data-game="sol"] #soltop .pile:nth-child(4){grid-column:5}body[data-game="sol"] #soltop .pile:nth-child(5){grid-column:6}body[data-game="sol"] #soltop .pile:nth-child(6){grid-column:7}
body[data-game="sol"] .stack{width:100%;min-width:0;min-height:clamp(190px,29dvh,300px)}
body[data-game="sol"] .minicard{width:100%;height:clamp(61px,16vw,93px);font-size:clamp(15px,3.5vw,24px)}
body[data-game="sol"] .empty{padding:2px;font-size:clamp(10px,2.6vw,18px)}
@media(min-width:700px){body[data-game="sol"] #soltop,body[data-game="sol"] #solcols{gap:9px;padding:15px}body[data-game="sol"] .stack{min-height:360px}}
/* V12 landscape-only layout: preserve all V11 art, colours and game code. */
@media (orientation:landscape) and (max-height:600px){
 #game{padding:5px 10px 10px;min-height:100dvh;max-width:100%;}
 .top{display:grid;grid-template-columns:minmax(130px,25%) 1fr;grid-template-rows:auto auto;gap:3px 10px;margin-bottom:2px;max-width:900px}
 .top h1{font-size:clamp(20px,3.3vw,32px);line-height:1.02;margin:0}
 .top .pill{font-size:clamp(14px,2vw,19px);border-width:2px;border-radius:11px;box-shadow:0 2px 0 #0c3250;padding:3px 8px;min-height:29px}
 .info{font-size:clamp(14px,2vw,18px);margin:3px auto 5px;line-height:1.13}
 .controls{margin:4px auto;gap:5px}
 .big{min-height:30px;padding:3px 8px;font-size:clamp(13px,1.9vw,18px);border-width:2px;border-radius:11px;box-shadow:0 2px 0 #0d3159}
 .hint{font-size:clamp(12px,1.6vw,15px);padding:4px 8px;margin:5px auto;border-width:2px;border-radius:10px}
 body[data-game="puzzle"] .puzzlegrid{width:min(43dvh,30vw,230px);border-width:4px;margin:4px auto;border-radius:12px}
 .puzzlechoices{max-width:500px;margin:5px auto;gap:5px}
 .puzzlechoices .big{min-height:28px;font-size:clamp(11px,1.5vw,15px);padding:3px 4px;border-width:2px}
 body[data-game="pairs"] .pairgrid{width:min(54dvh,300px);gap:3px;margin:5px auto}
 body[data-game="pairs"] .pair{border-width:2px!important;border-radius:8px;padding:1px}
 .animalphoto{height:73%;border-radius:4px}.animalname{font-size:clamp(7px,1vw,11px);margin-top:1px}
 body[data-game="pairs"] .pairmodes{margin:3px auto;max-width:470px}
 body[data-game="pairs"] .pairmodes .big{min-height:28px;font-size:clamp(12px,1.6vw,16px);padding:2px 5px}
 body[data-game="high"] .panel{max-width:680px;margin:2px auto;padding:0}
 body[data-game="high"] .score{font-size:clamp(13px,1.9vw,19px);padding:3px 6px;border-width:3px;border-radius:12px;margin:0 auto 3px}
 body[data-game="high"] .panel>p{margin:2px auto;font-size:12px}
 body[data-game="high"] .playing{width:clamp(58px,10dvh,92px);height:clamp(85px,23dvh,116px);border-width:3px;border-radius:10px;padding:3px;font-size:clamp(24px,5dvh,36px)}
 body[data-game="high"] .controls{max-width:390px;margin:4px auto}
 body[data-game="high"] .controls .big{min-height:28px;font-size:clamp(12px,1.8vw,17px)}
 body[data-game="sol"] #content{padding-top:clamp(35px,11dvh,70px);background-size:100% clamp(32px,10dvh,65px)}
 body[data-game="sol"] #soltop,body[data-game="sol"] #solcols{max-width:600px;margin:3px auto;gap:3px;padding:4px;border-width:3px;border-radius:11px}
 body[data-game="sol"] #soltop .pile{min-height:40px;border-width:1px}
 body[data-game="sol"] .minicard{height:clamp(32px,11dvh,52px);font-size:clamp(11px,2.1dvh,16px);border-width:1px;border-radius:4px}
 body[data-game="sol"] .stack{min-height:clamp(115px,30dvh,170px)}
 body[data-game="sol"] .stack .minicard{font-size:clamp(10px,2dvh,16px)}
 body[data-game="sol"] .empty{font-size:clamp(9px,1.8dvh,13px);padding:2px}
 body[data-game="sol"] .stack .minicard{transform:translateZ(0)}
}


/* V13 phone-landscape: side controls leave the full game area visible; art unchanged. */
@media (orientation:landscape) and (max-height:600px){
 #game{position:relative;display:grid;grid-template-columns:24% minmax(0,76%);grid-template-rows:56px minmax(0,1fr);gap:0 6px;padding:3px 7px 6px;min-height:100dvh;align-items:start}
 .top{grid-column:1;grid-row:1 / 3;display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;gap:5px;margin:0;padding:2px 0;max-width:unset}
 .top .pill{display:block;width:100%;font-size:clamp(12px,2vw,18px);padding:5px 6px;min-height:30px;border-width:2px;text-align:center}
 .top h1{position:absolute;left:25.5%;top:1px;width:73%;max-width:none;text-align:center;font-size:clamp(18px,3vw,28px);line-height:1.02}
 .info{grid-column:2;grid-row:1;margin:29px auto 1px;font-size:clamp(11px,1.7vw,15px);line-height:1.02;max-width:100%;align-self:start}
 #content{grid-column:2;grid-row:2;min-width:0;align-self:start;max-width:100%;margin:0}
 .hint{font-size:clamp(10px,1.35vw,13px);padding:2px 6px;margin:3px auto;border-width:2px}
 .controls{margin:2px auto;gap:4px}
 body[data-game="puzzle"] .puzzlegrid{width:min(56dvh,29vw,175px);margin:1px auto 3px;border-width:4px}
 .puzzlechoices{width:min(100%,520px);max-width:100%;margin:3px auto;gap:4px}
 .puzzlechoices .big{min-height:28px;font-size:clamp(10px,1.55vw,14px);padding:2px}
 body[data-game="pairs"] .pairgrid{width:min(60dvh,32vw,195px);gap:3px;margin:3px auto}
 body[data-game="pairs"] .pairmodes{max-width:380px;margin:1px auto 4px;gap:6px}
 body[data-game="pairs"] .pairmodes .big{min-height:27px;font-size:clamp(10px,1.5vw,14px);padding:2px 4px}
 body[data-game="pairs"] .pair{border-radius:10px}
 .animalphoto{height:72%;border-radius:4px}.animalname{font-size:clamp(6px,0.9vw,10px);margin-top:1px}
 body[data-game="high"] .panel{margin:0 auto;padding:0;max-width:100%}
 body[data-game="high"] .score{max-width:530px;margin:0 auto 1px;padding:2px 4px;border-width:2px;font-size:clamp(11px,1.6vw,15px)}
 body[data-game="high"] .playing{height:clamp(82px,28dvh,112px);width:clamp(64px,18dvh,88px);font-size:clamp(24px,4.2vw,38px);margin:0 auto}
 body[data-game="high"] .panel>p{margin:1px auto;font-size:11px}
 body[data-game="high"] .controls{margin:3px auto;max-width:440px}
 body[data-game="high"] .controls .big{min-height:30px;font-size:clamp(11px,1.6vw,15px);padding:3px 6px}
 body[data-game="sol"] #content{padding-top:30px;background-size:100% 26px;min-width:0}
 body[data-game="sol"] #soltop,body[data-game="sol"] #solcols{max-width:540px;margin:2px auto;gap:2px;padding:2px;border-width:2px}
 body[data-game="sol"] #soltop .pile{min-height:34px}
 body[data-game="sol"] .minicard{height:clamp(32px,10.5dvh,46px);font-size:clamp(11px,2.2dvh,15px)}
 body[data-game="sol"] .stack{min-height:clamp(115px,39dvh,175px)}
 body[data-game="sol"] .hint{margin-top:3px}
}

/* V16: fixed-size phone-landscape grid; no zoom and no viewport-width overflow */
@media (orientation:landscape) and (max-height:600px){
 html,body{width:100%;max-width:100%;overflow-x:hidden}
 #game{box-sizing:border-box;width:100%;max-width:100%;grid-template-columns:minmax(0,24%) minmax(0,1fr);grid-template-rows:48px minmax(0,1fr);gap:0 6px;padding:3px 8px 7px;overflow:hidden;zoom:1}
 .top{min-width:0;gap:4px}
 .top .pill{min-height:29px;padding:3px 4px;font-size:clamp(12px,1.7vw,17px)}
 .top h1{left:26%;width:72%;top:2px;font-size:clamp(17px,2.8vw,25px);line-height:1}
 .info{margin:25px auto 0;font-size:clamp(11px,1.5vw,14px);line-height:1.08}
 #content{width:100%;min-width:0;max-width:100%;overflow:hidden}
 .hint{width:100%;max-width:100%;font-size:clamp(10px,1.2vw,12px);padding:2px 5px;margin:2px auto}
 .controls{margin:2px auto;gap:4px}
 body[data-game="puzzle"] .puzzlegrid{width:min(51dvh,25vw,170px);margin:2px auto 3px;border-width:4px}
 .puzzlechoices{width:min(100%,480px);max-width:100%;margin:3px auto;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px}
 .puzzlechoices .big{min-height:27px;font-size:clamp(10px,1.4vw,13px);padding:2px 0;white-space:nowrap}
 body[data-game="pairs"] .pairgrid{width:min(55dvh,27vw,182px);max-width:100%;margin:3px auto;gap:2px}
 body[data-game="pairs"] .pairmodes{width:min(100%,380px);margin:2px auto 3px;max-width:100%}
 body[data-game="pairs"] .pairmodes .big{min-height:26px;padding:2px;font-size:clamp(10px,1.4vw,13px);white-space:nowrap}
 body[data-game="high"] .panel{width:100%;max-width:100%;margin:0 auto}
 body[data-game="high"] .score{width:100%;max-width:520px;padding:2px;font-size:clamp(11px,1.4vw,14px);margin:1px auto}
 body[data-game="high"] .playing{height:clamp(70px,26dvh,100px);width:clamp(55px,18dvh,80px);font-size:clamp(22px,4vw,32px)}
 body[data-game="high"] .controls{max-width:410px;width:95%;margin:2px auto}
 body[data-game="high"] .controls .big{min-height:28px;font-size:clamp(11px,1.4vw,14px)}
 body[data-game="sol"] #content{padding-top:26px;background-size:100% 23px}
 body[data-game="sol"] #soltop,body[data-game="sol"] #solcols{width:min(100%,495px);max-width:100%;margin:2px auto;gap:2px;padding:2px;border-width:2px}
 body[data-game="sol"] .minicard{height:clamp(30px,10dvh,43px);font-size:clamp(10px,2dvh,14px)}
 body[data-game="sol"] .stack{min-height:clamp(96px,33dvh,145px)}
 body[data-game="sol"] .hint{margin:2px auto}
}

/* V17: correct Solitaire's last card overlapping the instructions. Keep all art and other games intact. */
@media (orientation:landscape) and (max-height:600px){
 body[data-game="sol"] .stack{min-height:calc(60px + clamp(30px,10dvh,43px));}
 body[data-game="sol"] #solcols{margin-bottom:5px;}
 body[data-game="sol"] .hint{position:relative;clear:both;margin-top:6px;}
 /* Prevent white inset selection outlines obscuring button labels */
 .big.active{outline-width:2px;outline-offset:-5px;}
}
/* V19: strong SIDEWAYS width reduction only; locked art unchanged. */
@media (orientation:landscape) and (max-height:600px){
 #game{grid-template-columns:minmax(0,22%) minmax(0,1fr);grid-template-rows:42px auto;padding:3px 7px 5px;column-gap:4px;overflow-x:clip;zoom:1;}
 .top{gap:4px}.top .pill{min-height:28px;padding:2px 4px;font-size:clamp(11px,1.5vw,15px)}
 .top h1{left:24%;width:70%;top:1px;font-size:clamp(17px,2.7vw,24px)}
 .info{grid-column:2;grid-row:1;width:min(46vw,380px);max-width:100%;margin:24px auto 0;font-size:clamp(10px,1.3vw,13px);line-height:1.05}
 #content{grid-column:2;grid-row:2;box-sizing:border-box;width:min(46vw,380px)!important;max-width:100%!important;justify-self:center;min-width:0;margin:0 auto;overflow:visible}
 .controls{margin:2px auto;gap:4px}.big{min-height:27px;font-size:clamp(10px,1.3vw,13px);padding:2px 4px}
 .hint{box-sizing:border-box;width:100%;max-width:100%;font-size:clamp(9px,1.1vw,11px);padding:2px 5px;margin:3px auto;line-height:1.1}
 body[data-game="puzzle"] .puzzlegrid{width:min(37dvh,19vw,137px);border-width:3px;margin:1px auto 4px}
 .puzzlechoices{width:100%;max-width:100%;margin:2px auto;gap:3px}.puzzlechoices .big{min-height:26px;font-size:clamp(9px,1.2vw,11px);padding:2px 0}
 body[data-game="pairs"] .pairgrid{width:min(46dvh,22vw,150px);gap:2px;margin:3px auto}
 body[data-game="pairs"] .pairmodes{width:100%;max-width:100%;gap:4px;margin:2px auto 3px}body[data-game="pairs"] .pairmodes .big{min-height:26px;font-size:clamp(9px,1.2vw,12px)}
 body[data-game="high"] .panel{width:100%;max-width:100%;padding:0;margin:0 auto}body[data-game="high"] .score{width:100%;font-size:clamp(10px,1.3vw,12px);padding:2px}
 body[data-game="high"] .playing{width:clamp(52px,16dvh,73px);height:clamp(69px,24dvh,93px);font-size:clamp(21px,3.6vw,30px)}body[data-game="high"] .controls{width:100%;max-width:100%;gap:4px}body[data-game="high"] .controls .big{min-height:27px;font-size:clamp(10px,1.2vw,12px)}
 body[data-game="sol"] #content{padding-top:21px;background-size:100% 19px}body[data-game="sol"] #soltop,body[data-game="sol"] #solcols{width:100%;max-width:100%;margin:2px auto;padding:2px;gap:2px}body[data-game="sol"] #soltop .pile{min-height:27px}body[data-game="sol"] .minicard{height:clamp(25px,8dvh,33px);font-size:clamp(9px,1.7dvh,12px)}body[data-game="sol"] .stack{min-height:95px}body[data-game="sol"] .hint{margin-top:4px}
}


/* V20: group all controls and play board together at centre, compact width. */
@media (orientation:landscape) and (max-height:600px){
 #game{display:grid!important;grid-template-columns:minmax(0,1fr) minmax(100px,132px) minmax(0,300px) minmax(0,1fr)!important;grid-template-rows:40px auto!important;column-gap:8px!important;width:100%!important;max-width:100%!important;min-height:100dvh;box-sizing:border-box;padding:4px 6px!important;overflow-x:hidden!important;position:relative;}
 .top{grid-column:2!important;grid-row:1/3!important;width:100%!important;max-width:100%!important;position:static!important;display:flex!important;flex-direction:column!important;gap:6px!important;padding:1px 0!important;}
 .top .pill{width:100%!important;white-space:nowrap;min-height:29px!important;font-size:12px!important;padding:3px 2px!important;}
 .top h1{position:absolute!important;left:calc(50% - 64px)!important;top:3px!important;width:280px!important;max-width:34vw!important;font-size:clamp(16px,2.4vw,21px)!important;text-align:center!important;margin:0!important;line-height:1.05!important;}
 .info{grid-column:3!important;grid-row:1!important;width:100%!important;max-width:100%!important;justify-self:center!important;align-self:end!important;margin:20px auto 1px!important;font-size:11px!important;line-height:1.05!important;}
 #content{grid-column:3!important;grid-row:2!important;width:100%!important;max-width:100%!important;justify-self:center!important;margin:0!important;overflow:visible!important;}
 .hint{font-size:10px!important;line-height:1.1!important;padding:2px 4px!important;margin:3px auto!important}
 .big{min-height:26px!important;font-size:11px!important;padding:2px 3px!important}
 body[data-game="puzzle"] .puzzlegrid{width:min(34dvh,140px)!important;margin:2px auto 4px!important;}
 .puzzlechoices{width:100%!important;max-width:100%!important;gap:2px!important;margin:3px auto!important}
 .puzzlechoices .big{min-height:26px!important;font-size:9px!important;padding:2px 0!important}
 body[data-game="pairs"] .pairgrid{width:min(38dvh,140px)!important;max-width:100%!important;margin:3px auto!important;gap:2px!important}
 body[data-game="pairs"] .pairmodes{width:100%!important;max-width:100%!important;gap:3px!important;margin:2px auto!important}
 body[data-game="pairs"] .pairmodes .big{font-size:10px!important;min-height:25px!important}
 body[data-game="high"] .panel{width:100%!important;max-width:100%!important}
 body[data-game="high"] .score{width:100%!important;font-size:11px!important;padding:2px!important;margin:1px auto!important}
 body[data-game="high"] .playing{width:55px!important;height:78px!important;font-size:24px!important;padding:3px!important}
 body[data-game="high"] .controls{width:100%!important;max-width:100%!important;gap:4px!important;margin:2px auto!important}
 body[data-game="high"] .controls .big{font-size:10px!important;min-height:27px!important}
 body[data-game="sol"] #content{padding-top:20px!important;background-size:100% 17px!important;}
 body[data-game="sol"] #soltop,body[data-game="sol"] #solcols{width:100%!important;max-width:100%!important;margin:2px auto!important;gap:2px!important;padding:2px!important}
 body[data-game="sol"] .minicard{height:30px!important;font-size:10px!important}
 body[data-game="sol"] .stack{min-height:95px!important}
 body[data-game="sol"] #soltop .pile{min-height:30px!important}
}
@media (orientation:landscape) and (max-height:600px) and (max-width:540px){
 #game{grid-template-columns:4px minmax(82px,25%) minmax(0,1fr) 4px!important;column-gap:4px!important}
 .top h1{left:36%!important;width:60%!important;max-width:60vw!important}
}

/* V23: display animal drawings without truncating them or doubling their names. */
body[data-game="pairs"] .pair.open,
body[data-game="pairs"] .pair.done{justify-content:space-between;overflow:hidden;}
body[data-game="pairs"] .animalphoto{
  display:block;width:100%;height:auto;flex:1 1 0;min-height:0;
  object-fit:contain;object-position:center center;border-radius:7px;margin:0;
}
body[data-game="pairs"] .animalname{
  display:block;flex:0 0 auto;margin:3px 0 1px;padding:0 1px;
  font-weight:900;font-size:clamp(9px,2.4vw,17px);line-height:1.02;
  overflow-wrap:normal;hyphens:auto;max-width:100%;
}
@media (orientation:landscape) and (max-height:600px){
 body[data-game="pairs"] .animalname{font-size:clamp(7px,1.06vw,11px);margin:1px 0 0;}
 body[data-game="pairs"] .animalphoto{border-radius:3px;}
}
/* Let the foundation pile itself show when selected for a move back to the board. */
body[data-game="sol"] #soltop .pile:has(.selected){outline:3px solid #ffcb17;outline-offset:1px}

/* V24: readable Solitaire tableau, even with several face-up cards stacked.
   The rank/suit belongs in the exposed top strip of EVERY face-up card. */
body[data-game="sol"] .stack{min-height:var(--sol-height,260px)!important}
body[data-game="sol"] .stack .minicard.tableau-card{
  display:flex;align-items:flex-start;justify-content:flex-start;
  padding:3px 3px;overflow:hidden;
}
body[data-game="sol"] .tableau-card .card-corner{
  display:flex;flex-direction:column;align-items:center;justify-content:flex-start;
  gap:0;font-size:clamp(14px,3.3vw,21px);line-height:0.85;
  font-weight:900;white-space:nowrap;position:relative;z-index:2;
}
body[data-game="sol"] .tableau-card .card-large-suit{
  position:absolute;left:50%;top:55%;transform:translate(-50%,-50%);
  font-size:clamp(22px,5vw,38px);line-height:1;z-index:1;
}
/* The bottom card remains fully visible, with a large central suit.
   On landscape phones, use one line to fit the smaller exposed strip. */
@media (orientation:landscape) and (max-height:600px){
body[data-game="sol"] .stack .minicard.tableau-card{padding:2px 1px!important}
 body[data-game="sol"] .tableau-card .card-corner{flex-direction:row;gap:1px;font-size:10px;line-height:1!important}
 body[data-game="sol"] .tableau-card .card-large-suit{font-size:18px;top:63%}
 body[data-game="sol"] .stack{min-height:var(--sol-height,95px)!important}
}

/* V25: tighter Solitaire overlap while showing rank + suit of every exposed card. */
@media (orientation:portrait) and (max-width:540px){
 body[data-game="sol"] .tableau-card .card-corner{
  flex-direction:row;gap:1px;font-size:clamp(14px,3.5vw,17px);line-height:1.1;
 }
 body[data-game="sol"] .stack .minicard.tableau-card{padding:3px 2px}
}
@media (min-width:541px) and (min-height:601px){
 body[data-game="sol"] .tableau-card .card-corner{
  flex-direction:row;gap:2px;font-size:clamp(16px,2vw,21px);line-height:1.1;
 }
}

/* V26: Solitaire scroll stays put when a tapped card is re-rendered. */
body[data-game="sol"]{overflow-anchor:none;}
body[data-game="sol"] #game,body[data-game="sol"] #content,
body[data-game="sol"] #solcols,body[data-game="sol"] .stack{overflow-anchor:none;}
body[data-game="sol"] .info{
 display:flex;align-items:center;justify-content:center;
 height:60px;min-height:60px;overflow:hidden;
 padding:0 4px;
}
@media (orientation:landscape) and (max-height:600px){
 body[data-game="sol"] .info{height:26px!important;min-height:26px!important;overflow:hidden;}
}
/* V26: Higher or Lower has a clear twenty-round finish and replay button. */
body[data-game="high"] .high-win{font-size:clamp(21px,3.6vw,34px);line-height:1.2;color:#103765;margin:12px auto;font-weight:900;}
body[data-game="high"] #playAgain{min-width:160px;}
@media (orientation:landscape) and (max-height:600px){
 body[data-game="high"] .high-win{font-size:12px;line-height:1.05;margin:1px auto;}
 body[data-game="high"] #playAgain{min-width:90px;}
}

/* V27 — crop the original pre-cut letters from the top of Sydney banner.
   Keep the entire Opera House and Harbour Bridge without altering source art. */
body[data-game="sol"] #content{background:none!important;padding-top:0!important;}
body[data-game="sol"] #content::before{
  content:"";display:block;width:100%;height:155px;margin-bottom:8px;
  background-image:url('sol-art.jpg');
  background-repeat:no-repeat;
  background-size:100% 127%; /* hide original upper 50px, where cut-off text sits */
  background-position:center bottom;
}
@media(max-width:540px){body[data-game="sol"] #content::before{height:110px;}}
.win-replay{
 display:block;margin:6px auto 13px;padding:10px 19px;
 font-size:clamp(17px,3vw,24px);font-weight:900;
 background:#ffdf53;border:4px solid #143566;border-radius:16px;
 color:#112d59;box-shadow:0 3px 0 #143566;
 touch-action:manipulation;
}
.win-replay:active{transform:translateY(2px);box-shadow:0 1px 0 #143566;}
@media (orientation:landscape) and (max-height:600px){.win-replay{font-size:13px;margin:3px auto;padding:4px 10px;border-width:2px;}}

/* V28 — hide Solitaire teaching text and unused fixed message area.
   Keep the win message, approved Sydney picture and all card sizes unchanged. */
body[data-game="sol"] #message:not(.sol-win){display:none!important;}
body[data-game="sol"] #message.sol-win{
 display:block!important;height:auto!important;min-height:0!important;
 margin:4px auto 8px!important;padding:0 4px!important;
 overflow:visible!important;
}
body[data-game="sol"] .top{margin-bottom:5px!important;}
body[data-game="sol"] #content::before{margin-bottom:5px!important;}
@media (orientation:landscape) and (max-height:600px){
 body[data-game="sol"] #game{grid-template-rows:30px auto!important;}
 body[data-game="sol"] .top{margin-bottom:0!important;}
 body[data-game="sol"] #message.sol-win{grid-column:3!important;grid-row:1!important;
  align-self:end!important;font-size:12px!important;line-height:1!important;
  margin:10px 0 0!important;}
}


/* V29 — colourful portrait game titles. Only the four game headings change.
   Simple high-contrast marquees designed for easy reading on an upright iPad. */
@media (orientation: portrait) {
  body[data-game="sol"] .top h1,
  body[data-game="pairs"] .top h1,
  body[data-game="high"] .top h1,
  body[data-game="puzzle"] .top h1 {
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:74px;
    padding:9px 8px 11px;
    margin:3px 0 7px;
    border:3px solid #112b53;
    border-radius:18px;
    color:#fff1aa;
    font-size:clamp(23px,4.5vw,44px);
    font-weight:950;
    letter-spacing:-.035em;
    line-height:1.13;
    overflow-wrap:normal;
    text-wrap:balance;
    text-shadow:0 2px 0 #192849, 1px 3px 0 #192849;
    box-shadow:0 5px 0 #102b51, inset 0 2px 0 #ffffff70, inset 0 -2px 0 #0b224744;
  }
  body[data-game="sol"] .top h1 {
    background:radial-gradient(ellipse at 18% 0%,#ffffff55,transparent 55%),linear-gradient(160deg,#178857,#056441);
  }
  body[data-game="pairs"] .top h1 {
    background:radial-gradient(ellipse at 18% 0%,#ffffff55,transparent 55%),linear-gradient(160deg,#1587be,#11518d);
  }
  body[data-game="high"] .top h1 {
    background:radial-gradient(ellipse at 18% 0%,#ffffff55,transparent 55%),linear-gradient(160deg,#d74a32,#a42526);
  }
  body[data-game="puzzle"] .top h1 {
    background:radial-gradient(ellipse at 18% 0%,#ffffff55,transparent 55%),linear-gradient(160deg,#a85cce,#62379c);
  }
  @media(max-width:540px){
    body[data-game="sol"] .top h1,
    body[data-game="pairs"] .top h1,
    body[data-game="high"] .top h1,
    body[data-game="puzzle"] .top h1 {
      min-height:66px;
      font-size:clamp(21px,5vw,32px);
      border-radius:14px;
      padding:7px 5px 9px;
    }
  }
}


/* V32 — Approved clean wooden boards: no decorative cards, leaves, or other pictures.
   Each artwork is cropped from the exact four-panel design approved by the user.
   Preserve heading box and positions, buttons and all game content. */
@media (orientation: portrait) {
  body[data-game="sol"] .top h1,
  body[data-game="pairs"] .top h1,
  body[data-game="high"] .top h1,
  body[data-game="puzzle"] .top h1 {
    display:block!important;
    align-self:stretch!important;
    justify-self:stretch!important;
    width:100%!important;
    height:auto!important;
    min-height:0!important;
    margin:0!important;
    padding:0!important;
    border:0!important;
    border-radius:0!important;
    box-shadow:none!important;
    background-color:transparent!important;
    background-repeat:no-repeat!important;
    background-size:100% 100%!important;
    background-position:center center!important;
    color:transparent!important;
    font-size:0!important;
    line-height:0!important;
    text-shadow:none!important;
    letter-spacing:0!important;
    overflow:hidden!important;
    grid-column:2!important;
    grid-row:1 / 3!important;
  }
  body[data-game="sol"] .top h1{background-image:url('heading-solitaire-v34.png')!important}
  body[data-game="pairs"] .top h1{background-image:url('heading-pairs-v34.png')!important}
  body[data-game="high"] .top h1{background-image:url('heading-higher-v34.png')!important}
  body[data-game="puzzle"] .top h1{background-image:url('heading-puzzles-v34.png')!important}
}

/* On upright tablets, keep the lettering proportions instead of stretching it. */
@media (orientation:portrait) and (min-width:600px){
  body[data-game="sol"] .top h1,
  body[data-game="pairs"] .top h1,
  body[data-game="high"] .top h1,
  body[data-game="puzzle"] .top h1{background-size:contain!important;background-position:left center!important;}
}


/* V36: no Solitaire scenery or blank area; keep V35 layout and V34 heading untouched. */
body[data-game="sol"] #content {background:none!important;padding-top:0!important;}
body[data-game="sol"] #content::before {content:none!important;display:none!important;}
body[data-game="sol"] #soltop {margin-top:4px!important;}
body[data-game="sol"] #message:not(.sol-win) {display:none!important;}
/* Match the Pairs now shows progress in the three score boxes, not twice. */
body[data-game="pairs"] #message:not(.pairs-win) {display:none!important;}
body[data-game="pairs"] #message.pairs-win {margin:7px auto!important;}
/* V36: Option 5 from the approved six-layout comparison. Blue / yellow / blue. */
.game-stats {
 display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;
 width:min(100%,760px);margin:6px auto 9px;
 font-variant-numeric:tabular-nums;text-align:center;
}
.game-stats .stat-box {
 min-width:0;min-height:62px;padding:6px 3px 5px;
 display:flex;flex-direction:column;align-items:center;justify-content:center;
 border:3px solid #06274c;border-radius:15px;
 background:linear-gradient(#1265ab,#07418a);color:#fff;
 box-shadow:0 3px 0 #072e56;
}
.game-stats .stat-box.score-stat {
 background:linear-gradient(#ffe94a,#ffd828);color:#102d52;
}
.game-stats .stat-label {
 font-size:clamp(16px,2.6vw,23px);font-weight:900;line-height:1.14;
}
.game-stats strong {
 font-size:clamp(23px,3.7vw,34px);font-weight:950;line-height:1.13;
}
@media(max-width:540px){
 .game-stats {gap:5px;margin:5px auto 8px;}
 .game-stats .stat-box {min-height:55px;border-width:3px;border-radius:11px;padding:3px 2px;}
 .game-stats .stat-label {font-size:clamp(15px,4.2vw,19px);}
 .game-stats strong {font-size:clamp(21px,5.7vw,26px);}
}

/* V39: top-row Solitaire order.  Four Ace foundations together at far left;
   intentional empty spacer column; draw stock and waste together at far right.
   This overrides legacy nth-child grid positions from the previous design. */
body[data-game="sol"] #soltop > .pile { grid-row:1; }
body[data-game="sol"] #soltop > .pile:nth-child(1) { grid-column:1 !important; } /* Spades */
body[data-game="sol"] #soltop > .pile:nth-child(2) { grid-column:2 !important; } /* Hearts */
body[data-game="sol"] #soltop > .pile:nth-child(3) { grid-column:3 !important; } /* Clubs */
body[data-game="sol"] #soltop > .pile:nth-child(4) { grid-column:4 !important; } /* Diamonds */
body[data-game="sol"] #soltop > .pile:nth-child(5) { grid-column:6 !important; } /* Draw */
body[data-game="sol"] #soltop > .pile:nth-child(6) { grid-column:7 !important; } /* Waste */