*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;font-family:system-ui,sans-serif;color:#25334a;background:#fff8e9}main{height:100dvh;max-width:920px;margin:auto;padding:clamp(8px,2vw,24px);display:flex;flex-direction:column}header{display:flex;align-items:center;justify-content:space-between;gap:8px}h1{font-size:clamp(20px,4vw,32px);margin:0}button{font:inherit;border:2px solid #62748d;border-radius:14px;background:white;color:inherit;padding:.55em .85em;min-height:44px;touch-action:manipulation}button:focus-visible{outline:4px solid #ffbf47}#play,#maker{flex:1;display:flex;flex-direction:column;justify-content:center;min-height:0;text-align:center}#row,#made{display:grid;grid-template-columns:repeat(9,minmax(0,1fr));justify-items:center;align-items:center;gap:clamp(2px,1vw,10px);min-height:90px;max-width:100%;margin-inline:auto}#row{width:min(100%,900px);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px}.cycle{display:flex;justify-content:center;gap:clamp(3px,1vw,10px);width:100%}.cycle .token{width:clamp(34px,5vw,52px);height:clamp(25.5px,3.75vw,39px)}#made{grid-template-columns:repeat(6,minmax(0,1fr));width:min(100%,720px)}.token{width:clamp(48px,12vw,96px);height:clamp(36px,9vw,72px);background-image:url('assets/tokens.png');background-size:300% 400%;background-repeat:no-repeat;border:0;border-radius:8px;padding:0}.token.hinted{outline:4px solid #ffbf47}#choices{display:flex;justify-content:center;gap:12px;margin:18px 0}#palette{display:grid;grid-template-columns:repeat(3,minmax(44px,72px));justify-content:center;gap:8px;margin:12px auto}#palette .token{width:100%;height:auto;aspect-ratio:4/3;min-height:44px;min-width:44px}nav{display:flex;justify-content:center;gap:8px;flex-wrap:wrap}#feedback{min-height:1.5em;font-weight:700}footer{text-align:center;font-size:14px} [hidden]{display:none!important}@media(max-width:520px){#row{width:100%;gap:3px}.cycle{gap:2px}.cycle .token{width:clamp(34px,8vw,48px);height:clamp(25.5px,6vw,36px)}#made{grid-template-columns:repeat(6,minmax(0,1fr))}#choices{gap:5px;margin:8px 0}#choices .token{width:clamp(52px,18vw,72px);height:clamp(39px,13.5vw,54px)}}@media(max-width:700px) and (orientation:landscape){main{padding:4px}#row{gap:2px}.cycle{gap:2px}.cycle .token{width:clamp(34px,5vw,48px);height:clamp(25.5px,3.75vw,36px)}#play,#maker{gap:2px}#row,#made{min-height:48px}}@media(max-height:500px){main{padding:4px}header h1{font-size:18px}#row,#made{min-height:55px}#palette{gap:4px;margin:4px auto}#palette .token{min-height:44px}#choices,#palette{margin:5px}#play,#maker p{margin:4px}}
.token[data-id="0"]{background-position:0% 0%}.token[data-id="1"]{background-position:0% 33.333%}.token[data-id="2"]{background-position:0% 61%}.token[data-id="3"]{background-position:50% 0%}.token[data-id="4"]{background-position:50% 33.333%}.token[data-id="5"]{background-position:50% 61%}.token[data-id="6"]{background-position:100% 0%}.token[data-id="7"]{background-position:100% 33.333%}.token[data-id="8"]{background-position:100% 61%}
.cycle .token{min-height:0}#choices .token{min-width:54px;min-height:44px;border:2px solid #d6c9ae;background-color:#fff;border-radius:12px}#choices .token:hover{outline:3px solid #f0b746}#row{padding:8px;background:#fffdf6;border:1px solid #e9dfc8;border-radius:18px}#row .cycle:last-child:after{content:"？";align-self:center;font-weight:800;color:#267f78}.cycle{position:relative}.cycle:last-child:after{position:absolute;left:calc(50% + 22px);transform:translateX(100%)}.cycle:last-child:after{position:static;transform:none}.cycle:not(:last-child):after{content:"";width:1em}#levelHelp:empty{display:none}a.game-exit{font-size:12px}#choices .token:focus-visible{outline:4px solid #e9ad32;outline-offset:3px}
@media(max-height:500px) and (orientation:landscape){
 main{padding:4px}header{min-height:44px}footer{font-size:11px;min-height:18px}#play{gap:2px;justify-content:center}#play>*{flex-shrink:0}#play p{margin:0;font-size:13px;min-height:20px}#levelHelp{font-size:12px!important}#row{min-height:104px;height:104px;padding:4px;gap:2px}.cycle .token{width:40px;height:30px}.cycle{height:30px}#choices{height:54px;margin:0;gap:8px}#choices .token{width:72px;height:54px;min-height:44px}#feedback{height:20px;min-height:20px}nav{min-height:44px}nav button{font-size:13px;padding:4px 10px}#maker{display:grid;grid-template-rows:20px 20px 84px 48px 44px;gap:3px;align-content:center;justify-content:stretch}#maker p{margin:0;font-size:13px}#made{grid-template-columns:repeat(6,minmax(0,1fr));width:min(100%,550px);height:84px;min-height:84px;gap:0}#made .token{width:56px;height:42px}#palette{grid-template-columns:repeat(9,44px);gap:4px;margin:0 auto;height:48px}#palette .token{width:44px;height:44px;min-height:44px}#maker nav{flex-wrap:nowrap}
}