/* Ricochet v6 - Colour Shift. Simple, fluid, fully visible board. */
.page-ricochet.tg-game-page{
 --tg-banner-bg:linear-gradient(115deg,#e8edf2,#f2f1f5,#e9f5f5);
 --tg-banner-ink:#283747;
 --tg-game-action:#526b88;--tg-game-action-hover:#405a77;
 --tg-game-action-shadow:#283950;
 --tg-game-badge-bg:#e0e6ef;--tg-game-badge-ink:#495e78;
 --rc-height:min(690px,max(310px,calc(100dvh - 355px)));
}
:root[data-theme="dark"] .page-ricochet.tg-game-page{
 --tg-banner-bg:linear-gradient(115deg,#283342,#303044,#263d40);
 --tg-banner-ink:var(--text);
 --tg-game-action:#7189a5;--tg-game-action-hover:#849eb8;
 --tg-game-action-shadow:#364457;
 --tg-game-badge-bg:#344456;--tg-game-badge-ink:#dce8f7;
}
.page-ricochet .tg-game-panel{min-height:0}
.page-ricochet .tg-game-round-badge{display:none}
.page-ricochet .tg-game-stage-preview{display:flex;justify-content:center;align-items:center;min-height:0;width:100%}
.rc-preview,.rc-stage{
 display:flex;flex-direction:column;align-items:center;justify-content:center;
 width:100%;max-width:100%;min-width:0;box-sizing:border-box;
}
.rc-preview{min-height:0}
.rc-table-wrap{position:relative;height:var(--rc-height);aspect-ratio:5/8;max-width:100%;flex:none}
.rc-table{
 display:block;width:100%;height:100%;aspect-ratio:5/8;
 box-sizing:border-box;border:2px solid var(--line);
 border-radius:15px;background:#ebedef;
 box-shadow:0 4px 0 #8293a11c,0 15px 35px #15273b15;
 touch-action:none;user-select:none;-webkit-user-select:none;
}
.rc-table-preview{
 width:auto;height:var(--rc-height);max-width:100%;aspect-ratio:5/8;
 border-radius:14px;object-fit:contain;
}
.rc-table:focus-visible{outline:3px solid var(--tg-game-action);outline-offset:3px}
.rc-hud{
 display:flex;align-items:center;justify-content:space-between;
 gap:15px;width:min(100%,430px);margin:0 auto 10px;padding:0 4px;box-sizing:border-box;
}
.rc-stat{display:flex;flex-direction:column;align-items:center;gap:3px;min-width:67px}
.rc-stat:first-child{align-items:flex-start}
.rc-stat:last-child{align-items:flex-end}
.rc-stat small{
 font-size:10px;font-weight:850;letter-spacing:.105em;color:var(--muted);
 white-space:nowrap;
}
.rc-stat strong{
 font-size:22px;line-height:1.15;font-weight:900;letter-spacing:-.055em;
 font-family:ui-monospace,Consolas,monospace;font-variant-numeric:tabular-nums;
 color:var(--text);
}
.rc-floating-label{
 position:absolute;left:50%;top:10px;transform:translateX(-50%);z-index:2;
 width:max-content;max-width:94%;box-sizing:border-box;
 padding:6px 12px;border-radius:18px;background:#233040d9;
 color:#fff;text-align:center;white-space:nowrap;
 font-size:10px;letter-spacing:.03em;font-weight:850;pointer-events:none;
}
.rc-big-moment{
 position:absolute;left:50%;top:9%;transform:translate(-50%,-8px);
 z-index:3;max-width:93%;text-align:center;white-space:nowrap;
 border-radius:11px;padding:7px 16px;background:#263748e7;color:#fff;
 font-size:13px;font-weight:900;letter-spacing:.065em;line-height:1.25;
 opacity:0;pointer-events:none;transition:opacity .18s ease,transform .18s ease;
 box-shadow:0 4px 16px #0f1b282e;
}
.rc-big-moment.is-visible{opacity:1;transform:translate(-50%,0)}
.rc-charge{
 width:min(100%,415px);display:flex;align-items:center;gap:9px;
 box-sizing:border-box;margin-top:10px;color:var(--muted);
}
.rc-charge>span{font-size:10px;font-weight:800;letter-spacing:.085em;white-space:nowrap}
.rc-stage-name{font-weight:900;font-size:12px;letter-spacing:.06em;min-width:67px;text-align:right}
.rc-charge-meter{
 height:8px;flex:1;min-width:52px;overflow:hidden;border-radius:10px;
 background:var(--surface-soft);border:1px solid var(--line);
}
.rc-charge-meter i{display:block;width:0;height:100%;border-radius:10px;background:#93a1af;transition:width .15s linear,background .2s}
.rc-pads{display:grid;grid-template-columns:1fr 1fr;gap:12px;width:min(100%,405px);margin-top:10px;touch-action:none}
.rc-pad{
 min-height:50px;padding:9px;box-sizing:border-box;border-radius:11px;
 background:#53687d;border:1px solid #3c526b;border-bottom:4px solid #344657;
 color:#fff;font:850 13px system-ui,Arial,sans-serif;
 letter-spacing:.05em;cursor:pointer;user-select:none;touch-action:none;
 -webkit-tap-highlight-color:transparent;
 transition:background .1s ease,transform .1s ease,border-bottom-width .1s;
}
.rc-pad-right{background:#62798b;border-color:#485d6e;border-bottom-color:#405262}
.rc-pad:hover{filter:brightness(1.08)}
.rc-pad.is-down,.rc-pad:active{transform:translateY(2px);border-bottom-width:2px;background:#8596ac}
.rc-pad:focus-visible{outline:3px solid var(--tg-game-action);outline-offset:3px}
.rc-helper{text-align:center;font-size:11px;color:var(--muted);margin:7px 0 0;min-height:13px;line-height:1.3}
.rc-error{color:var(--text);font-size:12px;text-align:center;margin:4px 0 10px}
.rc-result-stats{display:flex;justify-content:center;flex-wrap:wrap;gap:8px;margin-top:14px}
.rc-result-stats>div{
 display:flex;align-items:center;flex-direction:column;gap:5px;
 background:var(--surface-soft);border:1px solid var(--line);
 border-radius:9px;padding:10px 12px;min-width:77px;
}
.rc-result-stats small{font-size:10px;color:var(--muted)}
.rc-result-stats strong{font-size:18px;font-variant-numeric:tabular-nums}
.rc-help-example{
 display:block;width:auto;height:min(310px,38dvh);max-width:100%;
 aspect-ratio:5/8;margin:0 auto;border-radius:10px;border:1px solid var(--line);
}
@media(max-width:700px){
 .page-ricochet{--rc-height:min(550px,max(245px,calc(100dvh - 335px)))}
 .rc-hud{width:min(100%,347px);gap:8px;margin-bottom:8px}
 .rc-stat strong{font-size:19px}
 .rc-stat small{font-size:9px}
 .rc-pads{width:min(100%,350px);gap:10px;margin-top:8px}
 .rc-pad{min-height:50px}
 .rc-floating-label{font-size:8px;top:7px;padding:5px 9px}
 .rc-charge{width:min(100%,350px);margin-top:7px}
 .rc-helper{font-size:10px}
}
@media(max-height:680px){
 .page-ricochet{--rc-height:min(390px,max(185px,calc(100dvh - 293px)))}
 .rc-stat strong{font-size:18px}
 .rc-hud{margin-bottom:5px}
 .rc-pads{margin-top:6px}
 .rc-pad{min-height:43px}
 .rc-helper{margin-top:4px}
}
@media(prefers-reduced-motion:reduce){
 .rc-pad,.rc-charge-meter i,.rc-big-moment{transition:none}
}

/* v6 - stage-changing machine, missions and more readable scoring. */
.page-ricochet .rc-hud{width:min(100%,465px);gap:8px}
.page-ricochet .rc-stat{min-width:0;flex:1}
.page-ricochet .rc-stat:first-child{flex:1.9}
.page-ricochet .rc-stat strong{font-variant-numeric:tabular-nums}
.page-ricochet .rc-stat strong.is-scoring{color:#4b92b6;text-shadow:0 0 11px #5bc9db68}
:root[data-theme="dark"] .page-ricochet .rc-stat strong.is-scoring{color:#a1e8f1}
.page-ricochet .rc-mission{
 width:min(100%,415px);display:flex;justify-content:space-between;align-items:center;
 gap:10px;margin-top:7px;min-height:17px;color:var(--muted);
 font-size:10px;line-height:1.3;letter-spacing:.04em;
}
.page-ricochet .rc-mission>span{font-weight:850}
.page-ricochet .rc-mission strong{text-align:right;font-weight:850;color:var(--text)}
.page-ricochet .rc-mission.is-complete strong{color:#56a98e}
.page-ricochet .rc-stage-banner{
 position:absolute;z-index:4;top:23%;left:50%;width:88%;max-width:460px;
 transform:translate(-50%,12px) scale(.92);opacity:0;
 display:flex;align-items:center;flex-direction:column;gap:3px;
 padding:24px 10px;box-sizing:border-box;border-radius:23px;
 background:linear-gradient(135deg,#192b3ce5,#314f5de3);
 border:2px solid #f7f9faa8;
 box-shadow:0 13px 50px #192a3861;pointer-events:none;
 transition:opacity .25s,transform .3s ease;
}
.page-ricochet .rc-stage-banner.is-visible{
 opacity:1;transform:translate(-50%,0) scale(1)
}
.page-ricochet .rc-stage-kicker{
 color:#b8dfe6;font-size:12px;font-weight:900;letter-spacing:.15em;text-align:center;
}
.page-ricochet .rc-stage-title{
 color:#fff;font-size:clamp(34px,7vw,65px);font-weight:950;
 letter-spacing:-.05em;line-height:1.08;text-shadow:0 3px 12px #0004;
}
.page-ricochet .rc-stage-caption{
 color:#e1edf2;font-size:12px;font-weight:850;letter-spacing:.045em;text-align:center;
}
.page-ricochet .rc-big-moment{
 top:7%;width:max-content;max-width:90%;white-space:normal;font-size:12px;
}
.page-ricochet .rc-pads{margin-top:9px}
@media(max-width:700px){
 .page-ricochet .rc-hud{width:min(100%,370px);gap:5px}
 .page-ricochet .rc-stat:first-child{flex:1.6}
 .page-ricochet .rc-stat strong{font-size:17px}
 .page-ricochet .rc-stat:first-child strong{font-size:16px}
 .page-ricochet .rc-stat small{font-size:8px}
 .page-ricochet .rc-mission{width:min(100%,350px);font-size:9px}
 .page-ricochet .rc-stage-banner{padding:15px 7px;gap:2px;border-radius:15px}
 .page-ricochet .rc-stage-title{font-size:clamp(27px,8vw,46px)}
 .page-ricochet .rc-stage-caption{font-size:9px}
 .page-ricochet .rc-stage-kicker{font-size:9px}
 .page-ricochet .rc-floating-label{max-width:96%;white-space:normal;line-height:1.15}
}
@media(prefers-reduced-motion:reduce){
 .page-ricochet .rc-stage-banner{transition:none}
}