*{box-sizing:border-box}body{margin:0;background:#c5c8cf linear-gradient(#91acbe,#c5c8cf 230px) no-repeat;color:#111;font-family:Arial,sans-serif}main{max-width:760px;margin:28px auto;padding:12px;background:white;border:1px solid #ddd;border-radius:20px}nav{text-align:right;font:14px Georgia;padding:2px 8px 10px}nav button{border:0;background:none;color:#00e;text-decoration:underline;font:inherit}.game{position:relative;aspect-ratio:5/4;border:1px solid #eee;overflow:hidden}canvas{display:block;width:100%;height:100%;touch-action:none}#menu,#overlay{position:absolute;inset:0;text-align:center;background:white;padding:5% 3%;font-family:Georgia,serif}small{position:absolute;right:12px;top:8px;font:11px Arial;color:#555}h1{font-size:clamp(32px,7vw,58px);line-height:.98;color:#7f4797;margin:8px 0 22px;letter-spacing:-2px;text-shadow:1px 2px #ddd}#menu p{font-weight:bold;font-size:clamp(13px,2.6vw,20px);line-height:1.7;margin:0 0 15px}label{font:13px Arial}input{width:120px;border:1px solid #bbb;padding:5px;border-radius:3px}.scores{display:grid;grid-template-columns:1fr 70px 1fr;align-items:center;margin-top:25px}.scores h2{font-size:clamp(14px,2.5vw,21px);margin:0 0 8px}ol{list-style:none;margin:0;padding:0;font-size:14px;line-height:1.6;min-height:60px}button{cursor:pointer}#play{border:3px solid #991b12;border-radius:50%;background:radial-gradient(circle at 35% 25%,#ff9488,#e2301d 55%,#a91a0b);color:white;width:65px;height:65px;font-size:29px;box-shadow:1px 3px 3px #aaa}#overlay{background:#fffffff5;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:10px}#overlay[hidden]{display:none}#overlay h2{font:bold 42px Georgia;color:#7f4797;margin:0}#overlay button,.below button{padding:10px 18px;background:#f1f1f1;border:1px solid #aaa;border-radius:5px;font-size:15px}.below{text-align:center;padding:18px 8px 4px}.below strong{font-size:18px;color:#733b89}.below p{font-size:14px;line-height:1.5;margin:9px 0}details{margin:20px 0 10px;font-size:14px}summary{cursor:pointer;color:#00e;text-decoration:underline}#practice{display:flex;justify-content:center;gap:7px;flex-wrap:wrap;padding:12px 0}.below #practice button{font-size:12px;padding:8px}.below .note{color:#777;font-size:12px;margin-top:20px}#action{min-width:150px}@media(max-width:600px){main{margin:10px 6px;padding:8px;border-radius:13px}.scores{margin-top:15px;grid-template-columns:1fr 60px 1fr}#play{width:55px;height:55px;font-size:24px}h1{margin-bottom:13px}#menu p{margin-bottom:8px}ol{font-size:11px}#menu{padding-top:7%}}
@media(max-width:600px){.game:has(#menu:not([hidden])){aspect-ratio:1;min-height:360px}#menu{padding-top:23px}.scores{margin-top:13px}#menu h1{margin-top:6px}#menu ol{min-height:55px}}
@media(max-width:600px){.game:has(#menu:not([hidden])){width:100%;height:360px;min-height:0;aspect-ratio:auto}}
/* Recorded game composition: a single title line, original instructions and image buttons. */
.game{background:#f7f8f7}#menu{padding:0;background:#f7f8f7}#menu h1{position:absolute;left:18%;top:11%;width:66%;margin:0;line-height:0}#menu h1 img{width:100%;height:auto}#menu .original-instructions{position:absolute;left:19%;top:25%;width:64%;margin:0;line-height:0}#menu .original-instructions img{width:100%;height:auto}.scores{position:absolute;inset:46% 7% 8%;display:block;margin:0}.scores>div{position:absolute;top:0;width:31%;text-align:left}.scores>div:first-child{left:0}.scores>div:last-child{right:0}.scores h2{line-height:0;margin:0 0 8px}.scores h2 img{width:100%;height:auto}#play{position:absolute;left:42%;top:47%;width:17%;height:auto;aspect-ratio:61/58;border:0;background:none;box-shadow:none;padding:0}#play img{width:100%;height:100%;display:block}#menu small{right:3%;top:7%;font-family:Georgia,serif}.player-name{display:block;margin:0 0 16px}.scores ol{font-weight:bold;font-size:15px;line-height:1.3}#overlay{background:#f7f8f7f5}#overlay h2{font-size:0;width:52%;height:55px;background:url('assets/game-over.png') center/contain no-repeat}#overlay:has(#resume:not([hidden])) h2{font-size:40px;background:none}#again{background:#f7f8f7 url('assets/retry.png') center/contain no-repeat!important;border:0!important;font-size:0!important;width:70px;height:70px}
@media(max-width:600px){.game:has(#menu:not([hidden])){height:auto;min-height:0;aspect-ratio:5/4;width:100%}#menu{padding:0}#menu h1{margin:0}.scores{margin:0}.scores ol{font-size:10px}#menu ol{min-height:0}#menu small{font-size:8px}#play{width:17%;height:auto;font-size:0}}

#menu-player{position:absolute;left:3%;bottom:4%;font:bold 16px Georgia}@media(max-width:600px){#menu-player{font-size:11px}}

@font-face{font-family:Classic;src:url('assets/bookman.otf') format('opentype');font-display:swap}#menu{background:#fdfbff}#menu h1{font-family:Classic,Georgia,serif;font-size:clamp(19px,4vw,33px);line-height:1.1;letter-spacing:-1px;text-shadow:none;color:#520764;left:17%;width:70%;top:9%}#menu .original-instructions{font-family:Classic,Georgia,serif;font-size:clamp(11px,2.2vw,19px);line-height:1.22;text-align:left;top:23%;left:19%;width:77%;color:#520764}.scores h2{font-family:Classic,Georgia,serif;font-size:clamp(10px,1.6vw,14px);line-height:1.2;margin-bottom:8px}.scores ol,#menu-player{font-family:Classic,Georgia,serif}.scores{inset:45% 6% 8%}#overlay h2{background:none;font:32px Classic,Georgia,serif;width:auto;height:auto}#again{background:#eee!important;font:16px Arial!important;width:auto;height:auto;border:1px solid #aaa!important}canvas{image-rendering:auto}