/* Root participates in normal layout: fixed body + fixed shell clips iOS PWAs. */
html{position:static;width:100%;height:100%;min-height:100%;overflow:hidden;background:#061220 url('./magic-hall-clean.jpg') center/cover no-repeat}
body{position:relative;inset:auto;width:100%;height:var(--view-h,100%);min-height:0;max-height:none;overflow:hidden;background:url('./magic-hall-clean.jpg') center/cover no-repeat}
.appShell{position:relative;inset:auto;width:100%;height:100%;min-height:0;max-height:none;overflow:hidden;background:transparent}
.screen{position:absolute;inset:0;height:100%;min-height:0;overflow:hidden}
.splash{position:absolute;inset:0;height:100%;min-height:0}
.hallBackdrop{position:absolute;inset:0;background-size:100% 100%;background-position:center}
/* Square board and five bounded rows. Every control stays inside its row. */
#game .gameLayout{--board-size:min(94vw,calc((var(--view-h,100svh) - var(--safeT) - var(--safeB) - 40px)*.61),660px);position:relative;inset:auto;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,.85fr) minmax(0,.9fr) var(--board-size) minmax(0,.85fr) minmax(0,1fr);justify-content:normal;align-content:stretch;align-items:center;justify-items:center;gap:6px;width:100%;height:100%;padding:calc(var(--safeT) + 6px) 3% calc(var(--safeB) + 10px);overflow:hidden}
#game .gameHeader{grid-row:1;grid-column:1;position:relative;inset:auto;height:100%;min-height:0;max-height:none;width:min(100%,730px);display:grid;grid-template-columns:40px 1fr 40px;margin:0}
#game .gameBrand{height:100%;min-height:0;padding:0 5px;display:grid;place-items:center;width:100%}
#game .gameBrand h1{height:100%;max-height:100%;min-height:0;width:100%;aspect-ratio:auto;background-size:contain}
#game .roundIconBtn{height:38px;width:38px;font-size:27px}
#game .scoreStrip{grid-row:2;grid-column:1;position:relative;inset:auto;min-height:0;height:80%;max-height:65px;width:min(78%,calc(var(--board-size)*.85));margin:0;align-items:stretch}
#game .scoreCard{height:100%;min-height:0;padding:3px 9px 3px 35px;background:linear-gradient(110deg,#050b13,#0b1420,#03080f);border:2px ridge #ddaa4d;box-shadow:0 0 0 1px #694416;overflow:visible}
#game .scoreCard .avatar{width:clamp(42px,14vw,77px);height:auto;aspect-ratio:1;left:-26px;border:2px solid #ebc468;box-shadow:0 0 0 2px #68410c,0 0 0 3px #cca14e}
#game .scoreStrip .scoreCard:nth-child(2){padding:3px 35px 3px 9px}
#game .scoreStrip .scoreCard:nth-child(2) .avatar{left:auto;right:-26px}
#game .scoreCard small{font-size:12px;line-height:1.1}#game .scoreCard b{font-size:26px;line-height:1}#game .scoreSoloLevel b{font-size:14px}#game .onlineScoreMeta{bottom:-10px;padding:0 4px}#game .onlineScoreMeta small{font-size:7px}
#game .boardStage{grid-row:3;grid-column:1;position:relative;inset:auto;margin:0;width:var(--board-size);height:var(--board-size);max-width:100%;min-height:0;overflow:visible}
#game .boardFrame{position:relative;width:100%;height:100%;max-width:none;aspect-ratio:1;padding:6%;border:0;border-image:none;border-radius:0;background:transparent url('./board-frame.png') center/100% 100% no-repeat;box-shadow:none}
#game .boardFrame:before,#game .boardFrame:after{display:none}
#game .board{width:100%;height:100%;padding:0;gap:1px;background:#b68b4b;border:1px solid #b58b4f;grid-template-columns:repeat(13,minmax(0,1fr));grid-template-rows:repeat(13,minmax(0,1fr))}
#game .cell{border:1px solid #906733;box-shadow:inset 0 0 0 1px #f6d69566;background:linear-gradient(120deg,#dbc092,#ccb082 65%,#e0c79d);font-size:2.5cqw}
#game .cell.TW{background:linear-gradient(110deg,#ae140d,#800e08);color:#fff0cb}#game .cell.DW{background:linear-gradient(110deg,#c14449,#aa2734);color:#fff0cb}#game .cell.TL{background:linear-gradient(110deg,#134d93,#073271);color:#e9f6ff}#game .cell.DL{background:linear-gradient(110deg,#4896bc,#2d729a);color:#e9f6ff}
#game .rackFrame{grid-row:4;grid-column:1;position:relative;inset:auto;margin:0;width:min(88%,calc(var(--board-size)*.9));height:78%;max-height:68px;min-height:0;align-self:center}
#game .rack{height:100%;padding:5px 7px;gap:4px;border:2px ridge #d0a45b;border-radius:8px;background:linear-gradient(#2b170a,#090603 35%,#24160e 80%,#603d20);box-shadow:0 3px 3px #0007}
#game .rackTile{height:100%;font-size:clamp(20px,6vw,36px);max-width:none;flex:1 1 0;min-width:0}#game .rackTile small{font-size:8px}
#game .gameBottom{grid-row:5;grid-column:1;position:relative;inset:auto;margin:0;display:grid;grid-template-columns:1fr 1fr 1fr 2.35fr 1.15fr;align-items:start;gap:6px;width:min(100%,calc(var(--board-size)*1.03));height:100%;min-height:0;max-height:92px;padding:3px 0 19px}
#game .roundAction{height:auto;width:100%;max-width:57px;aspect-ratio:1;align-self:center;margin:0;position:relative;min-height:0}
#game .roundAction small{position:absolute;top:calc(100% + 5px);font-size:9px;line-height:1;max-width:145%;overflow:visible;white-space:nowrap}
#game .roundAction .ico{width:25px;height:25px}#game .roundAction span{font-size:25px}
#game .submitAction{height:100%;max-height:63px;min-height:0;align-self:center;padding:0 8%;font-size:17px;gap:1px}#game .submitAction b{font-size:clamp(15px,4.4vw,25px)}
#game .bagCounter{height:100%;min-height:0;max-height:68px;width:100%;align-self:center}#game .bagCounter b{bottom:-2px;right:0;font-size:12px;height:23px;min-width:23px}#game .bagCounter small{top:calc(100% + 4px);font-size:7px;line-height:1}
#game .stoneCaption{bottom:var(--safeB);font-size:7px}
/* Daily: all four sections share the actual available canvas height. */
#daily .dailyLayout{position:relative;inset:auto;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1.35fr) minmax(0,3.1fr) minmax(0,2.15fr) minmax(0,.65fr);width:min(100%,610px);height:100%;padding:calc(var(--safeT) + 4px) 13% calc(var(--safeB) + 12px);gap:8px;margin:0 auto;overflow:hidden;align-content:stretch}
#daily .dailyBrand{min-height:0;height:100%;width:100%;position:relative;margin:0;overflow:visible}
#daily .dailyBrand>div{height:100%;justify-content:center;gap:0}
#daily .dailyBrand h1{width:117%;height:72%;min-height:0;flex:0 1 72%;background-size:contain}
#daily .dailyBrand b{font-size:clamp(16px,4.8vw,26px);line-height:1.1;margin:0;flex:0 0 auto}
#daily .dailyBrand>.roundIconBtn{position:absolute;top:4px;left:calc(-13vw + 9px);width:28px;height:28px;font-size:23px;z-index:2}
#daily .dailyQuestCard{height:100%;min-height:0;max-height:none;display:grid;grid-template-columns:minmax(0,1fr);justify-content:stretch;grid-template-rows:1fr 1.25fr .85fr 1.7fr 1.6fr;gap:1px;align-items:center;justify-items:center;margin:0;padding:6% 8%;border:0;border-image:none;box-shadow:none;background:transparent url('./daily-parchment.png') center/100% 100% no-repeat;color:#261a0b;overflow:hidden}
#daily .dailyDate{font-size:clamp(15px,4.2vw,25px);margin:0;line-height:1;white-space:nowrap}
#daily .streakRibbon{min-height:0;max-height:100%;height:85%;margin:0;padding:3px 10px;border:1px solid #bf8f33;border-radius:20px;gap:5px;background:linear-gradient(#061321,#020a11);box-shadow:0 0 0 1px #a57936;color:#fbe0a4}
#daily .streakRibbon b{font-size:23px;line-height:1}#daily .streakRibbon small{font-size:11px}#daily .streakRibbon>span{font-size:19px}
#daily .dailyQuestCard p{margin:0;font-size:clamp(10px,2.8vw,15px);line-height:1.1;text-align:center}
#daily .dailyLetters{width:100%;height:85%;min-height:0;margin:0;gap:7px;align-items:center}
#daily .dailyLetter{height:100%;max-height:58px;min-height:0;flex:1 1 0;font-size:clamp(23px,7vw,40px);border:1px solid #b67e34;box-shadow:inset 1px 1px 0 #fff0b8,inset -2px -2px 1px #b87c30,0 2px 2px #5e3e20;background:linear-gradient(110deg,#eec68a,#ffdfa5,#dbab65);border-radius:5px}
#daily .dailyStart{height:95%;min-height:0;max-height:70px;width:100%;margin:0;padding:5px 8%;font-size:clamp(13px,3.6vw,22px);gap:3px;align-self:center;display:flex}
#daily .dailyStart b{white-space:nowrap}#daily .dailyStart i{font-style:normal}
#daily .monthlyCard{height:100%;min-height:0;max-height:none;display:grid;grid-template-columns:minmax(0,1fr);justify-content:stretch;grid-template-rows:25px minmax(0,1fr) 21px;gap:4px;padding:8px 9px;margin:0;border-width:10px;border-image-width:15px;background:radial-gradient(at 30% 20%,#102033,#030b15) padding-box;overflow:hidden}
#daily .monthlyHead{height:100%;display:grid;grid-template-columns:23px 1fr 23px;align-items:center;min-height:0}#daily .monthlyHead h2{font-size:clamp(14px,4vw,23px);line-height:1;margin:0;font-weight:400}#daily .monthlyHead button{font-size:22px;padding:0;line-height:1}
#daily .monthProgress{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));grid-auto-rows:minmax(0,1fr);gap:3px;min-height:0;height:100%;margin:0;align-content:stretch}
#daily .dayTick{height:auto;min-height:0;aspect-ratio:auto;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:0;padding:1px 0;border:1px solid #967547;border-radius:3px;background:#06121b}
#daily .dayTick small{font-size:7px;line-height:1.05}#daily .dayTick span{font-size:15px;line-height:1.1}#daily .dayTick.today{box-shadow:0 0 5px #f3c15b,inset 0 0 6px #e6b34766;border-color:#f4ce70}
#daily #monthProgressText{height:100%;display:flex;align-items:center;justify-content:center;font-size:9px;line-height:1;margin:0;white-space:nowrap;position:static;min-height:0}
#daily .dailyQuote{height:100%;min-height:0;max-height:none;align-self:stretch;margin:0 6%;padding:5px 9px;border:0;border-radius:0;background:transparent url('./daily-parchment.png') center/100% 100% no-repeat;font-size:clamp(10px,2.8vw,14px);line-height:1.12;overflow:hidden}
#daily .dailyQuote small{font-size:6px;line-height:1.1;margin-top:3px}
@media(orientation:landscape){
 #game .gameLayout{--board-size:min(calc(var(--view-h,100svh) - var(--safeT) - var(--safeB) - 30px),53vw);grid-template-columns:var(--board-size) minmax(0,360px);grid-template-rows:1fr 1fr 1fr 1.2fr;padding:calc(var(--safeT) + 15px) 4% calc(var(--safeB) + 15px);gap:8px 24px;justify-content:center}
 #game .boardStage{grid-column:1;grid-row:1/5}#game .gameHeader{grid-column:2;grid-row:1}#game .scoreStrip{grid-column:2;grid-row:2}#game .rackFrame{grid-column:2;grid-row:3;height:85%;width:100%}#game .gameBottom{grid-column:2;grid-row:4;width:100%}
 #daily .dailyLayout{width:min(100%,1000px);grid-template-columns:1fr 1fr;grid-template-rows:1fr 2fr 1fr;padding:calc(var(--safeT) + 12px) 8% calc(var(--safeB) + 12px);gap:8px 18px}
 #daily .dailyBrand{grid-column:1;grid-row:1}#daily .dailyQuestCard{grid-column:1;grid-row:2/4}#daily .monthlyCard{grid-column:2;grid-row:1/3}#daily .dailyQuote{grid-column:2;grid-row:3}#daily .dailyBrand>.roundIconBtn{left:-35px}
}
/* Slice the frame edges; the live playing area stays genuinely square. */
#game .boardFrame{padding:0;border:clamp(14px,4.6vw,26px) solid transparent;border-image:url('./board-frame.png') 11% 9.5% 14% 9.5% / 1 / 0 stretch;background:none}
/* Never stretch the source button's leather texture to fill tall dialogs. */
.modalCard,.resultPerson,.resultStats,#resultStats,.monthlyCard,.handoffCard,.checkingCard{border-image-slice:180 260 180 260;border-image-width:20px;background:radial-gradient(ellipse at 35% 20%,#102033,#030b15 76%);box-shadow:0 4px 18px #0008}
.modal{position:absolute;inset:0;height:var(--dialog-h,var(--view-h,100%));padding:calc(var(--safeT) + 10px) 9% calc(var(--safeB) + 10px);align-items:center}
.modalCard{width:min(100%,480px);border-width:13px;padding:8px;max-height:100%;overscroll-behavior:contain}
.modalCard .modalBrand{height:69px;min-height:0;margin:0 12px 2px}.modalCard h2{font-size:25px;line-height:1.1;margin:2px 0 8px}.modalClose{height:29px;width:29px;top:0;right:0}
.rulesModal{display:flex;flex-direction:column;max-height:100%;padding:7px 5px}.rulesModal .modalBrand{flex:0 0 62px}.rulesModal h2{flex:0 0 auto}.rulesList{gap:2px;min-height:0;flex:0 1 auto}.rulesList>div{grid-template-columns:29px 19px minmax(0,1fr);gap:4px;min-height:36px;padding:4px 3px;border-radius:2px;border-color:#7e6337;background:linear-gradient(100deg,#08121f,#091320)}.rulesList p b{font-size:12px;line-height:1.1}.rulesList p small{font-size:9px;line-height:1.12}.rulesList i{font-size:10px;width:18px;height:18px}.ruleIcon{display:grid;place-items:center}.ruleIcon svg{width:26px;height:26px;color:#f6c76b;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linejoin:round;stroke-linecap:round;filter:drop-shadow(0 1px 1px #713907)}
.rulesModal .bonusTitle{font-size:21px;line-height:1.1;margin:7px 0 5px}.rulesBonus{gap:10px;padding:0 6px}.rulesBonus>div{min-height:50px;padding:3px;border-width:1px}.rulesBonus b{font-weight:400;font-size:17px}.rulesBonus small{font-size:8px}.rulesActions{position:static;flex:0 0 46px;margin:5px 0 0;padding:0;background:none}.rulesActions button.primary{min-height:0;height:100%;border:0;border-image:none;border-radius:0;background:transparent url('./menu-frame.png') center/100% 100% no-repeat!important;color:#fff0bf!important;box-shadow:none!important;font-size:22px;font-weight:400;padding:6px 12%}
.settingsModal .modalBrand{height:70px}.settingsBlock{padding:6px 0}.sectionTitle{grid-template-columns:30px 1fr;gap:5px}.sectionTitle b{font-size:13px}.sectionTitle small{font-size:9px;line-height:1.15}.sectionTitle>span,.settingRow>span{display:grid;place-items:center}.sectionTitle svg,.settingRow svg{width:27px;height:27px;fill:none;stroke:#e8b756;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}.dictionaryTabs{margin-top:6px;gap:7px}.dictionaryTabs button{font-size:13px;min-height:33px}.settingsRows .settingRow{padding:4px 0;grid-template-columns:30px 1fr 39px}.settingRow b{font-size:12px}.settingRow small{font-size:8px}.settingsModal .bonusLegend{gap:10px;padding:0 5px}.settingsModal .bonusLegend>div{min-height:46px}.settingsModal .bonusLegend b{font-size:16px;font-weight:400}.cloudActions{gap:6px;margin-top:7px}.cloudActions button{font-size:10px;min-height:32px}.settingsModal>.modalActions{position:static;padding:0;margin-top:7px;background:none}.settingsModal .settingsSave{min-height:37px;font-size:14px}.cloudActions #resetProgress{grid-column:1/-1}
/* Results: all five sections fit, including Play Again, Home and Share. */
#result .resultLayout{position:relative;inset:auto;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1.9fr) minmax(0,3.4fr) minmax(0,1.5fr) minmax(0,.7fr) minmax(0,.6fr);width:min(100%,610px);height:100%;padding:calc(var(--safeT) + 8px) 16% calc(var(--safeB) + 13px);gap:6px;margin:0 auto;overflow:hidden}
#result .resultBrand{grid-row:1;display:flex;flex-direction:column;justify-content:center;align-items:center;min-height:0;height:100%;gap:0;margin:0}
#result .resultBrand h1{height:49%;min-height:0;max-height:none;width:122%;aspect-ratio:auto;margin:0;background-size:contain;flex:0 1 49%}
#result .resultBrand h2{height:auto;margin:0;font-size:clamp(36px,12vw,65px);line-height:1.05;white-space:nowrap;flex:0 1 auto}
#result .resultBrand p{font-size:clamp(13px,3.9vw,22px);line-height:1.1;margin:0;flex:0 0 auto}
#result .resultMetaBar{display:none}
#result .resultPlayers{grid-row:2;min-height:0;height:100%;width:100%;min-width:0;display:grid;grid-template-columns:minmax(0,1fr);justify-content:stretch;justify-items:stretch;grid-template-rows:minmax(0,1.7fr) minmax(0,.75fr);align-content:stretch;gap:8px;margin:0;padding-top:47px}
#result.ref-solo .resultPlayers{grid-template-rows:minmax(0,1fr);align-content:center;padding-top:48px}
#result .resultPerson{position:relative;min-height:0;margin:0;width:100%;height:100%;border:11px solid transparent;border-image:url('./menu-frame.png') 180 260 180 260 / 17px / 0 stretch;padding:3px 6px;background:radial-gradient(at 30% 20%,#0d1a2a,#030b14);box-shadow:none}
#result .resultPerson.winner{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:1px;margin:0;padding:25px 4px 2px;min-height:0;max-height:none}
#result .resultPerson.winner .avatar{position:absolute;width:clamp(67px,21vw,105px);height:auto;aspect-ratio:1;top:0;left:50%;transform:translate(-50%,-67%);border:2px solid #e7c177;box-shadow:0 0 0 2px #7a4c1b,0 0 12px #eabc5555}
#result .resultPortraitCrown{position:absolute;top:-67px;font-size:29px;line-height:1;height:auto;left:50%;transform:translateX(-50%);margin:0}
#result .winner .resultRank{font-size:17px;line-height:1.1}#result .winner .resultName{font-size:clamp(17px,4.8vw,26px);line-height:1.1;max-width:100%;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}#result .winner .resultScore{font-size:clamp(30px,9vw,49px);line-height:1.05}
#result .resultPerson.runner{display:grid;grid-template-columns:43px minmax(0,1fr);grid-template-rows:repeat(3,minmax(0,1fr));gap:0 6px;padding:0 4px;align-items:center}
#result .runner .avatar{width:41px;height:41px;grid-area:1/1/4/2}.runner .resultPortraitCrown{display:none}#result .runner .resultRank{grid-area:1/2;font-size:11px;line-height:1}#result .runner .resultName{grid-area:2/2;font-size:15px;line-height:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}#result .runner .resultScore{grid-area:3/2;font-size:21px;line-height:1}
#result #resultStats{grid-row:3;height:100%;min-height:0;margin:0 -5%;border:10px solid transparent;border-image:url('./menu-frame.png') 180 260 180 260 / 17px / 0 stretch;padding:0 5px;background:radial-gradient(at 30% 20%,#0d1a2a,#030b14);display:flex;flex-direction:column;justify-content:space-evenly;overflow:hidden}
#result .resultStatRow{height:auto;min-height:0;flex:1;display:flex;align-items:center;gap:5px;padding:2px 0}#result .resultStatRow small{font-size:11px;line-height:1.1}#result .resultStatRow b{font-size:12px;line-height:1.1}#result .statIcon{font-size:18px}
#result .playAgainButton{grid-row:4;height:100%;min-height:0;max-height:none;width:100%;margin:0;padding:5px 14%;font-size:clamp(20px,6vw,30px);line-height:1;border:0;background:transparent url('./menu-frame.png') center/100% 100% no-repeat;gap:3px;align-items:center}
#result .playAgainButton .ico{width:22px;height:22px}#result .playAgainButton b{white-space:nowrap}
#result .resultActions{grid-row:5;min-height:0;height:100%;margin:0 -4%;gap:5px;display:grid;grid-template-columns:1fr 1fr}
#result .resultActions button{height:100%;min-height:0;max-height:none;font-size:15px;line-height:1;padding:3px 13%;background:transparent url('./menu-frame.png') center/100% 100% no-repeat;display:flex;align-items:center;justify-content:space-between;gap:3px}
@media(max-height:730px) and (orientation:portrait){.modal{padding-top:calc(var(--safeT) + 5px);padding-bottom:calc(var(--safeB) + 5px)}.rulesModal .modalBrand{flex-basis:45px}.rulesList>div{min-height:31px;padding:2px 3px}.rulesList p small{font-size:8px}.rulesModal .bonusTitle{font-size:18px;margin:4px 0}.rulesBonus>div{min-height:42px}.rulesActions{flex-basis:38px}.settingsModal .modalBrand{height:48px}.settingsModal h2{font-size:23px;margin-bottom:4px}.settingsBlock{padding:4px 0}.cloudActions button{min-height:28px}.settingsRows .settingRow{padding:2px 0}.settingsModal .bonusLegend>div{min-height:38px}#result .resultPortraitCrown{top:-60px;font-size:26px}#result .resultPerson.winner .avatar{width:69px}#result .resultPlayers{padding-top:41px}#result .resultBrand h2{font-size:39px}}
@media(orientation:landscape){#result .resultLayout{width:min(100%,900px);grid-template-columns:1fr 1fr;grid-template-rows:1.3fr 1.2fr .5fr .5fr;gap:8px 20px;padding:calc(var(--safeT) + 12px) 8% calc(var(--safeB) + 12px)}#result .resultBrand{grid-row:1;grid-column:1}#result .resultPlayers{grid-column:2;grid-row:1/5;padding-top:46px}#result #resultStats{grid-column:1;grid-row:2;margin:0}#result .playAgainButton{grid-column:1;grid-row:3}#result .resultActions{grid-column:1;grid-row:4}#result .resultBrand h2{font-size:35px}.modal{padding-top:calc(var(--safeT) + 8px);padding-bottom:calc(var(--safeB) + 8px)}.modalCard{display:block;overflow:auto}.rulesActions{height:44px}}

/* V70 result stats density for Spice rows */
#result .resultStatRow{padding:1px 0}#result .resultStatRow small{font-size:9px}#result .resultStatRow b{font-size:10px}#result .statIcon{font-size:14px}