/* Colour Memory: only colour-input mechanics. All page, panel and progress
 * geometry is owned by Game Presentation's shared .tg-game-play contract. */
.page-colour{--tg-game-visual-size:var(--float-square-size,min(46vh,520px))}
.page-colour .colour-preview-group{
 width:100%;min-height:0;display:flex;flex-direction:column;
 align-items:center;justify-content:center;gap:clamp(8px,1.3vh,16px)
}
.page-colour .colour-preview-art{
 width:min(var(--tg-game-visual-size),100%);aspect-ratio:1;flex:0 1 auto;
 min-height:0;display:grid;place-items:center
}
.page-colour .colour-preview-ring{
 width:100%;aspect-ratio:1;border-radius:50%;position:relative;
 background:conic-gradient(#ec657e,#eac763,#7bd17b,#61b9db,#7979dc,#bc71d4,#ec657e);
 box-shadow:0 12px 33px #00000012
}
.page-colour .colour-preview-ring::after{
 content:"";position:absolute;inset:32%;border-radius:50%;background:var(--surface)
}
.page-colour .colour-instructions{
 max-width:430px;text-align:center;font-size:12px;line-height:1.45;
 color:var(--muted);margin:0
}
.page-colour .colour-error{
 max-width:400px;text-align:center;font-size:12px;color:#b44b5c;margin:0 auto 8px
}
.page-colour .colour-error[hidden]{display:none!important}
.page-colour .colour-play:not([hidden]){
 width:100%;height:100%;min-height:0;
 display:flex;align-items:center;justify-content:center
}
.page-colour .colour-stage{
 width:100%;height:100%;min-height:0;min-width:0;
 display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);
 gap:clamp(6px,1.3vh,13px);align-items:center;justify-items:center;
 padding:4px 0;box-sizing:border-box;container-type:size
}
.page-colour .colour-instruction{
 font-size:14px;font-weight:750;color:var(--text);margin:0;text-align:center
}
.page-colour .colour-reference{
 /* One diameter controls BOTH axes. Never fill a tall grid row independently. */
 --colour-reference-diameter:min(100cqw,max(0px,calc(100cqh - 48px)),var(--tg-game-visual-size));
 width:var(--colour-reference-diameter);height:var(--colour-reference-diameter);
 min-width:0;min-height:0;aspect-ratio:1/1;place-self:center;display:block;
 border-radius:50%;box-shadow:0 13px 34px #00000014;
 opacity:1;transition:opacity .4s ease
}
.page-colour .colour-reference.is-fading{opacity:0}
.page-colour .colour-reference[hidden],
.page-colour .colour-selection[hidden],
.page-colour .colour-feedback[hidden]{display:none!important}
.page-colour .colour-selection{
 width:min(100%,var(--tg-game-visual-size));height:100%;min-height:0;min-width:0;
 display:grid;grid-template-columns:minmax(0,1fr);
 grid-template-rows:minmax(0,1fr) auto auto;container-type:size;
 gap:clamp(5px,1vh,10px);justify-self:center;justify-items:center;align-items:center
}
.page-colour .colour-wheel-wrap{
 box-sizing:border-box;
 width:min(100cqw,max(0px,calc(100cqh - 125px)),var(--tg-game-visual-size));
 height:auto;max-height:none;min-width:0;min-height:0;aspect-ratio:1/1;
 justify-self:center;margin-inline:auto;position:relative;touch-action:none
}
/* The ring is one functional circular brightness slider, not a second linear control. */
.page-colour .colour-brightness-ring{
 position:absolute;inset:0;border-radius:50%;touch-action:none;cursor:grab;
 background:conic-gradient(from 0deg,#151515 0%,var(--colour-brightness-hue,#e58ca9) 100%);
 outline-offset:3px
}
.page-colour .colour-brightness-ring:active{cursor:grabbing}
.page-colour .colour-brightness-ring:focus-visible,
.page-colour .colour-wheel:focus-visible{outline:3px solid var(--accent)}
.page-colour .colour-wheel{
 position:absolute;inset:10%;width:80%;height:80%;display:block;
 border-radius:50%;cursor:crosshair;touch-action:none;
 outline:clamp(4px,.65vw,6px) solid var(--canvas);
 outline-offset:0;
 box-shadow:0 4px 15px #00000015
}
.page-colour .colour-wheel-marker{
 position:absolute;width:14px;height:14px;border:3px solid #fff;
 border-radius:50%;box-shadow:0 0 0 1px #30333f99,0 2px 6px #0004;
 transform:translate(-50%,-50%);pointer-events:none;z-index:2
}
.page-colour .colour-brightness-marker{
 position:absolute;width:19px;height:19px;border:3px solid #fff;
 border-radius:50%;box-shadow:0 0 0 2px #3339,0 2px 6px #0004;
 transform:translate(-50%,-50%);pointer-events:none;z-index:3
}
.page-colour .colour-brightness-hint{
 font-size:10px;font-weight:760;letter-spacing:.08em;color:var(--muted);
 text-align:center;white-space:nowrap
}
.page-colour .colour-pick-actions{
 display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
 align-items:center;gap:clamp(8px,1.5vw,16px);width:100%;min-width:0
}
.page-colour .colour-picked-copy{
 justify-self:end;text-align:right;white-space:nowrap;
 font-size:11px;font-weight:800;letter-spacing:.045em;color:var(--muted)
}
.page-colour .colour-picked-sample{
 width:clamp(66px,9.5vh,91px);height:clamp(66px,9.5vh,91px);
 border-radius:50%;border:1px solid #0002;justify-self:center
}
.page-colour .colour-pick-actions .colour-confirm{
 min-width:clamp(96px,10vw,132px);min-height:46px;justify-self:end
}
.page-colour .colour-feedback .tg-game-button{min-width:128px;min-height:40px}
.page-colour .colour-feedback{
 width:min(100%,var(--tg-game-visual-size));height:100%;min-height:0;min-width:0;
 display:grid;grid-template-columns:minmax(0,1fr);
 grid-template-rows:minmax(0,1fr) auto;container-type:size;align-items:center;
 justify-items:center;gap:clamp(6px,1.2vh,12px);position:relative
}
/* A single circle, bisected exactly down its diameter: no gap or rounded half cards. */
.page-colour .colour-compare{
 box-sizing:border-box;
 width:min(100cqw,max(0px,calc(100cqh - 65px)),var(--tg-game-visual-size));
 height:auto;max-height:none;aspect-ratio:1/1;display:flex;overflow:hidden;border-radius:50%;
 min-width:0;min-height:0;justify-self:center;margin-inline:auto;position:relative;
 box-shadow:0 8px 24px #00000012
}
.page-colour .colour-compare-half{
 width:50%;min-width:0;height:100%;
 display:flex;flex-direction:column;align-items:center;justify-content:center;
 gap:6px;padding:0 3px;box-sizing:border-box;
 color:#fff;text-shadow:0 1px 6px #0009;text-align:center
}
.page-colour .colour-compare-half:first-child{
 padding-right:clamp(9px,2.1vw,19px)
}
.page-colour .colour-compare-half:nth-child(2){
 padding-left:clamp(9px,2.1vw,19px)
}
.page-colour .colour-compare-half>span{
 font-size:10px;font-weight:800;letter-spacing:.06em
}
.page-colour .colour-copy-hex{
 border:0;background:rgba(0,0,0,.14);color:#fff;cursor:pointer;
 padding:7px 4px;border-radius:8px;line-height:1.2;
 font-size:clamp(11px,1.8vw,18px);font-weight:800;
 font-family:inherit;letter-spacing:.01em;white-space:nowrap;
 text-shadow:0 1px 6px #0009;transition:background .15s ease
}
.page-colour .colour-copy-hex:hover,
.page-colour .colour-copy-hex:focus-visible{background:rgba(0,0,0,.38)}
.page-colour .colour-copy-hex:focus-visible{outline:2px solid #fff;outline-offset:2px}
.page-colour .colour-copy-note{
 position:absolute;bottom:0;left:0;right:0;text-align:center;
 font-size:11px;color:var(--muted);pointer-events:none;
 transform:translateY(100%)
}
.page-colour .colour-round-score{
 position:absolute;bottom:4.5%;left:50%;transform:translateX(-50%);
 z-index:3;display:flex;flex-direction:column;align-items:center;gap:1px;
 padding:0;border:0;background:none;box-shadow:none;
 color:#fff;text-shadow:0 1px 6px #0008;white-space:nowrap
}
.page-colour .colour-round-score>span{
 font-size:10px;color:rgba(255,255,255,.90);font-weight:790;letter-spacing:.12em
}
.page-colour .colour-round-score strong{
 font-size:clamp(33px,4.6vw,50px);letter-spacing:-.06em
}
.page-colour .colour-round-score .colour-component-scores{
 margin-top:0;font-size:clamp(9px,.8vw,10px);font-weight:550;
 letter-spacing:.015em;line-height:1.25;color:rgba(255,255,255,.80);
 white-space:nowrap;font-variant-numeric:tabular-nums;
}
.page-colour .colour-round-summary{
 display:grid;grid-template-columns:repeat(5,minmax(0,1fr));
 width:min(100%,520px);gap:8px;margin:16px auto 0
}
.page-colour .colour-round-card{
 display:flex;flex-direction:column;align-items:center;gap:6px;
 min-width:0;padding:10px 7px;border:1px solid var(--line);
 background:var(--surface-soft);border-radius:11px;font-variant-numeric:tabular-nums
}
.page-colour .colour-round-number{
 font-size:9px;font-weight:750;color:var(--muted);white-space:nowrap
}
.page-colour .colour-round-value{font-size:clamp(13px,1.8vw,17px);font-weight:800}
.page-colour .colour-round-pair{
 display:flex;gap:0;width:100%;height:28px;overflow:hidden;
 border-radius:6px;border:1px solid #0002
}
.page-colour .colour-round-pair span{display:block;flex:1;min-width:0}
@media(max-width:700px){
 .page-colour .colour-preview-group{gap:8px}
 .page-colour .colour-stage{width:100%;margin-inline:auto;justify-items:center}
}
@media(max-width:480px){
 .page-colour .colour-round-summary{gap:5px}
 .page-colour .colour-round-card{padding:7px 3px;gap:5px}
 .page-colour .colour-round-number{font-size:8px}
 .page-colour .colour-round-pair{height:23px}
 .page-colour .colour-picked-sample{width:clamp(62px,9vh,82px);height:clamp(62px,9vh,82px)}
 .page-colour .colour-pick-actions{gap:clamp(6px,1.5vw,10px)}
 .page-colour .colour-pick-actions .colour-confirm{min-width:92px}
}
@media(max-height:720px){
 .page-colour .colour-stage{gap:5px;padding:2px 0}
 .page-colour .colour-selection{gap:5px}
 .page-colour .colour-brightness-hint{font-size:9px}
 .page-colour .colour-picked-sample{width:clamp(58px,8.5vh,75px);height:clamp(58px,8.5vh,75px)}
 .page-colour .colour-feedback{gap:6px}
}
@media(prefers-reduced-motion:reduce){
 .page-colour .colour-reference{transition:none}
}