/* Relic workshop · all artwork is resolution-independent SVG/CSS. */
:root{--ink:#243d38;--muted:#62746c;--violet:#257c65;--line:#d9e2d5;--paper:#fffdf5;--gold:#c28d33;--shadow:0 8px 28px #284e3c0b;font:16px/1.5 system-ui,-apple-system,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;color:var(--ink);background:#f3f4e9;color-scheme:light}
*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden}body{background:radial-gradient(ellipse at 100% 0,#dcebdc 0,transparent 55%),#f3f4e9}button,input,select{font:inherit}button{cursor:pointer;color:inherit;touch-action:manipulation}button:disabled{opacity:.55;cursor:default}button{transition:background .16s,box-shadow .16s,transform .16s}button:hover:not(:disabled){filter:brightness(1.04)}button:active:not(:disabled){transform:translateY(1px)}button:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{outline:3px solid #237d68;outline-offset:3px}h1,h2,h3,p{margin-top:0}h1,h2,h3{font-family:inherit;font-weight:750;line-height:1.2;letter-spacing:-.035em}h1{font-size:clamp(32px,3.4vw,48px);margin:14px 0}h2{font-size:26px;margin-bottom:12px}h3{font-size:20px}p{line-height:1.65;color:var(--muted)}small{font-size:13px}svg{display:block;max-width:100%;flex-shrink:0}[hidden]{display:none!important}.ui-icon{width:22px;height:22px;display:inline-block;vertical-align:middle}.ui-icon path{vector-effect:non-scaling-stroke}[data-icon]{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}.eyebrow{display:block;color:#527466;font-size:12px;font-weight:750;letter-spacing:1.25px;line-height:1.5}
.topbar{height:88px;padding:0 28px;display:flex;align-items:center;justify-content:space-between;gap:20px;border-bottom:1px solid var(--line);background:#fffdf7ed;position:relative;z-index:10}.brand{display:flex;align-items:center;gap:12px;text-align:left;background:none;border:0;padding:0;font-size:20px;font-weight:750;line-height:1.05;white-space:nowrap}.brand b{display:block;color:#28765e}.brand small{display:block;font-size:10px;letter-spacing:1.6px;margin-top:7px;color:var(--muted)}.brand-icon{display:grid;place-items:center;width:47px;height:47px;background:#24775e;color:#f9d77d;border-radius:15px;box-shadow:inset 0 -4px #12553d}.brand-icon .ui-icon{width:29px;height:29px}.topbar #navigation{display:flex;gap:4px;min-width:0}.topbar #navigation button{border:0;background:transparent;display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:12px;border-radius:12px;min-height:46px;font-size:14px;font-weight:650}.topbar #navigation button.active{background:#e5efdf;color:#21664e}.topbar #navigation .ui-icon{width:19px;height:19px}.top-actions{display:flex;align-items:center;gap:8px}.round-btn,.top-avatar{width:44px;height:44px;padding:10px;background:#fffdf7;border:1px solid var(--line);border-radius:13px;display:grid;place-items:center}.top-avatar{padding:0;border:0}.top-avatar svg{width:100%;height:100%}.version{font-size:11px;color:#657369}.menu-scroll{height:calc(100dvh - 88px);overflow:auto;overscroll-behavior:contain;padding:28px 32px 60px;scrollbar-gutter:stable}.page{max-width:1400px;margin:auto}.welcome-grid{display:grid;grid-template-columns:280px minmax(0,1fr);gap:22px}
.primary,.secondary,.soft-button{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:46px;padding:12px 20px;border-radius:12px;border:1px solid #c9d8c6;background:#fffdf6;color:#2d5744;font-size:15px;font-weight:700;line-height:1.4;box-shadow:0 3px 0 #dae2d3}.primary{color:#fffbea;background:linear-gradient(165deg,#32846a,#21634e);border-color:#1f6349;box-shadow:0 4px 0 #174d39,0 8px 18px #1e5d3020}.primary:hover:not(:disabled){box-shadow:0 4px 0 #174d39,0 9px 24px #1e5d3038}.primary>small{width:100%;font-size:13px;font-weight:400}.secondary{background:#e5efdc}.primary .ui-icon{width:23px}.soft-button{background:#fffdf4}
.profile-card{border:1px solid var(--line);border-radius:22px;background:#fffcf2;box-shadow:var(--shadow);padding:24px;display:grid;grid-template-columns:70px minmax(0,1fr);align-content:center;align-items:center;gap:12px 16px}.profile-card #profilePortrait{width:70px;grid-row:1/3}.profile-card>h2{font-size:21px;margin:0;overflow:hidden;text-overflow:ellipsis}.profile-card>.eyebrow,.profile-card>p{display:none}.profile-numbers{display:flex;gap:22px;margin:0}.profile-numbers b{display:block;font-size:22px;color:#267153;line-height:1.1}.profile-numbers span{font-size:13px;color:var(--muted)}.profile-card>.soft-button{grid-column:1/-1;margin-top:6px}.hero-card{position:relative;isolation:isolate;overflow:hidden;border:1px solid #c4d8ba;border-radius:24px;background:linear-gradient(120deg,#e4efd3,#e7edc9 60%,#f6dfa0);padding:28px 36px;min-height:268px;box-shadow:var(--shadow);display:flex;align-items:center}.hero-copy{position:relative;z-index:2;width:65%}.hero-copy p{font-size:16px;max-width:440px;margin-bottom:16px}.hero-art{position:absolute;right:2%;width:31%;top:10%;animation:float 7s ease-in-out infinite;filter:drop-shadow(0 12px 8px #ac8c3320)}.hero-art:before{content:"";position:absolute;inset:6%;border-radius:50%;background:#fff9d36e;border:1px solid #fff7b4;z-index:-1}.relic-art{width:100%;height:auto;display:block}.hero-tags{display:flex;gap:10px;margin:0 0 18px}.hero-tags>span{display:flex;align-items:center;gap:6px;background:#ffffef80;border:1px solid #c7d2ac;border-radius:30px;padding:5px 12px;font-size:13px;font-weight:700}.hero-tags .ui-icon{width:17px;height:17px}.cloud{position:absolute;border-radius:50%;background:#fff9c74d;z-index:-1}.cloud-one{width:350px;height:250px;right:-40px;bottom:-160px}.cloud-two{width:300px;height:280px;right:180px;top:-220px}.floating-star{display:none}.how-strip{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:24px;padding:19px 24px;border:1px solid var(--line);border-radius:18px;background:#fffdf5}.how-strip>div{display:flex;align-items:center;gap:12px;min-width:0}.step-number{color:#a9b7a3;font-size:12px;font-weight:750}.how-strip>div>[data-icon]{width:42px;height:42px;border-radius:12px;color:#6c8b58;background:#ecf0df}.how-strip p{margin:0;font-size:14px;line-height:1.4}.how-strip b,.how-strip p span{display:block}.how-strip b{font-weight:700;color:var(--ink);margin-bottom:4px}.how-strip p span{font-size:13px}
.section-heading{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:28px 0 18px}.section-heading h2{margin:5px 0 0}.room-heading>div{margin-right:auto}.room-heading form{display:flex;gap:8px}.pill{display:inline-block;background:#e8efdd;border:1px solid #d2ddc6;border-radius:25px;padding:6px 12px;font-size:13px;font-weight:650;color:#486b4d;white-space:nowrap}input,select{min-height:46px;border:1px solid #c9d6c4;border-radius:11px;background:#fffef8;padding:10px 12px;color:var(--ink);min-width:0}#joinCode{width:145px;letter-spacing:2px;text-transform:uppercase;font-size:14px}.rooms-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.empty-rooms{grid-column:1/-1;border:1px dashed #b8cbb2;padding:32px 24px;border-radius:18px;text-align:center;font-size:16px;color:#5c7463;background:#fffcf580;margin:0}.room-row{display:flex;gap:16px;align-items:center;min-width:0;padding:16px;border:1px solid var(--line);border-radius:18px;background:#fffdf6;box-shadow:0 3px 0 #e2e8d9}.room-art{width:78px;flex-shrink:0}.room-info{min-width:0;flex:1}.room-info b{display:block;font-size:18px;font-weight:750}.room-info span,.room-info small{display:block;color:var(--muted);font-size:13px;margin-top:5px}.room-row button{padding:10px 14px;flex-shrink:0}.page-heading{max-width:880px;margin:12px 0 28px}.page-heading h1{margin:10px 0 16px}.page-heading p{font-size:16px}.collection-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}.collection-card{display:flex;flex-direction:column;align-items:center;text-align:center;min-width:0;border:1px solid #d9deca;border-radius:23px;padding:24px;background:linear-gradient(#fffef7,#f6f1e0);box-shadow:0 5px 0 #e0e5d3}.collection-card>div{width:min(100%,235px);position:relative}.collection-card.not-owned>div{filter:saturate(.55);opacity:.65}.collection-card h2{font-size:22px;margin:15px 0 10px}.collection-card p{font-size:15px;min-height:48px;margin-bottom:16px}.collection-card small{display:block;font-size:13px;color:var(--muted);margin:12px 0 20px}.collection-card button{margin-top:auto;width:100%}.collected-label{border:1px solid #bed4ac;background:#e7efdc;color:#2c694a;padding:7px 13px;border-radius:25px;font-size:14px}.ranking-list{max-width:1050px;overflow:hidden;border:1px solid var(--line);border-radius:22px}.ranking-row{display:flex;align-items:center;gap:20px;background:#fffdf5;padding:18px 24px;border-bottom:1px solid var(--line)}.ranking-row:last-child{border-bottom:0}.ranking-row.me{background:#e3eddb}.ranking-row .place{width:30px;color:#9f742b;font-size:25px;font-weight:750}.ranking-row .avatar{width:52px;flex-shrink:0}.ranking-row .info{min-width:0;flex:1}.ranking-row b{display:block;font-size:17px;overflow-wrap:anywhere}.ranking-row small{font-size:14px;color:var(--muted)}.ranking-row>strong{font-size:24px;color:#237151}
.profile-editor{max-width:1000px;display:grid;grid-template-columns:260px minmax(0,1fr);gap:40px;padding:32px;border:1px solid var(--line);background:#fffdf5;border-radius:24px}.profile-editor>aside{text-align:center;background:#eef2df;border-radius:20px;padding:24px;align-self:start}.profile-editor #avatarPreview{max-width:210px;margin:auto auto 18px}.profile-editor aside>b{font-size:24px;overflow-wrap:anywhere}.profile-editor aside p{font-size:14px;margin:10px 0}.field-label{display:block;font-size:15px;font-weight:600;color:#455f50}.field-label>input,.field-label>select{display:block;width:100%;margin:8px 0 22px}.profile-editor h3{margin:22px 0 12px}.avatar-choices{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;max-width:430px}.avatar-choice{border:2px solid transparent;border-radius:16px;background:#f0f3e4;padding:7px;aspect-ratio:1}.avatar-choice[aria-pressed=true]{background:#dfeccc;border-color:#34735a;box-shadow:0 0 0 2px #d6e7cf}.avatar-choice svg{width:100%;height:100%}.hue-choices{display:flex;gap:12px;margin-bottom:25px;flex-wrap:wrap}.hue-choice{width:44px;height:44px;border:4px solid #fffdf5;border-radius:50%;box-shadow:0 0 0 1px #c4d1ba}.hue-choice[aria-pressed=true]{box-shadow:0 0 0 3px #2e7258}#profileSaved{display:block;font-size:14px;margin-top:12px;color:#276b4d}
/* Play: a large owner board, shared restoration and three live teammate previews. */
body.playing #navigation{display:none}body.playing .game-language-menu{visibility:hidden;pointer-events:none}.game{height:calc(100dvh - 88px);max-width:1680px;margin:auto;padding:18px 24px 24px;display:flex;flex-direction:column;min-height:0}.match-bar{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:16px;flex-shrink:0}.match-bar h2{font-size:25px;margin:5px 0 0}.match-bar .eyebrow{font-size:12px;letter-spacing:.6px}.match-actions{display:flex;align-items:center;gap:10px}.match-timer{display:flex;align-items:center;gap:10px;padding:9px 14px;border:1px solid #d8c395;background:#fff4d2;border-radius:13px;color:#725224;font-variant-numeric:tabular-nums}.match-timer span{font-size:11px;font-weight:700}.match-timer strong{font-size:26px;line-height:1.1}.match-timer.urgent{color:#a33442;background:#fff0eb;border-color:#d78e92}.match-timer.urgent strong{animation:timer-pulse 1s ease-in-out infinite}.match-timer.timer-paused{color:#53725d;background:#ebf0df;border-color:#c2d3b9}.stage{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,1.35fr) minmax(240px,.95fr) minmax(0,.9fr);grid-template-rows:repeat(3,minmax(0,1fr));gap:16px}.slot-zero{grid-column:1;grid-row:1/4}.slot-one{grid-column:3;grid-row:1}.slot-two{grid-column:3;grid-row:2}.slot-three{grid-column:3;grid-row:3}.board-slot{min-width:0;min-height:0}.player-panel{height:100%;min-width:0;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:12px;border:1px solid #d5dfce;border-radius:20px;position:relative;background:#fffdf5;box-shadow:0 4px 0 #dee5d4;overflow:hidden}.player-panel.own{flex-direction:column;justify-content:flex-start;padding:18px;border:2px solid #458d69;background:#fffdf4;box-shadow:0 5px 0 #d4dfbd}.player-header{display:flex;gap:10px;align-items:center;min-width:0;width:100%;flex:1}.player-header .avatar{width:42px;height:42px;flex-shrink:0}.player-header .info{flex:1;min-width:0}.player-header b{display:block;font-size:14px;line-height:1.25;overflow-wrap:anywhere}.player-header small{display:block;font-size:12px;margin-top:5px;color:#526758}.player-header .contribution{text-align:right;font-size:21px;font-weight:750;color:#2f7e55;min-width:28px}.contribution small{font-size:12px;font-weight:500}.own .player-header{flex:0 0 auto;margin-bottom:8px;min-height:54px}.own .player-header .avatar{width:48px;height:48px}.own .player-header b{font-size:17px}.own .player-header small{font-size:13px}.own-label{display:block;font-size:11px;letter-spacing:.7px;color:#27704f;margin-top:4px;font-weight:750}.player-panel:not(.own) .player-header{flex-wrap:wrap;gap:5px 8px;align-content:center}.player-panel:not(.own) .player-header .info{flex-basis:calc(100% - 52px)}.player-panel:not(.own) .contribution{display:flex;align-items:baseline;gap:5px;text-align:left}.player-panel:not(.own) .board{flex-shrink:0}
.board{position:relative;width:var(--board-size,280px);height:var(--board-size,280px);flex-shrink:0;max-width:100%;background:#324f4a;border:4px solid #385c51;border-radius:14px;touch-action:none;user-select:none;overflow:hidden;box-shadow:inset 0 3px 8px #142f3d33,0 3px 0 #bdd0b2}.board:before{content:"";position:absolute;inset:0;background-image:linear-gradient(#ffffff0d 1px,transparent 1px),linear-gradient(90deg,#ffffff0d 1px,transparent 1px);background-size:calc(100% / var(--grid-size,7)) calc(100% / var(--grid-size,7));pointer-events:none}.tile{position:absolute;left:0;top:0;width:calc(100% / var(--grid-size,7));height:calc(100% / var(--grid-size,7));padding:3px;border:0;border-radius:10px;background:transparent;touch-action:none;user-select:none;transition:transform .28s cubic-bezier(.18,.8,.28,1)}.tile:hover:not(:disabled),.tile:active:not(:disabled){transform:var(--position)!important;filter:none}.tile:disabled{opacity:1;cursor:default}.tile-face{display:flex;align-items:center;justify-content:center;width:100%;height:100%;border-radius:24%;background:linear-gradient(145deg,#fff5,transparent 55%),var(--gem);color:#fffdf3;border:1px solid #ffffff80;box-shadow:inset 0 2px #fff7,inset 0 -4px #16292430,0 2px 0 #16292460;transition:transform .16s,filter .16s;pointer-events:none;position:relative}.tile-face:after{content:"";position:absolute;top:8%;left:14%;width:32%;height:8%;border-radius:50%;background:#fff5;transform:rotate(-15deg);pointer-events:none}.tile svg{width:48%;height:48%;filter:drop-shadow(0 1px #2e3f3240);pointer-events:none}.tile.selected{z-index:3}.tile.selected .tile-face{box-shadow:inset 0 0 0 2px #fff,0 0 0 2px #fff9ac;transform:scale(.92);filter:brightness(1.08)}.tile.hint .tile-face{animation:hint 1.2s ease-in-out infinite}.tile.clearing{z-index:4}.tile.clearing .tile-face{animation:clear-tile .24s ease-in forwards}.tile.invalid .tile-face{animation:shake .35s}.board.reshuffling .tile-face{animation:reshuffle .32s ease}.empty-panel{height:100%;border:1px dashed #b7c9ac;border-radius:20px;display:flex;align-items:center;justify-content:center;gap:12px;color:#60735a;background:#eaf0df99;font-size:15px}.empty-panel .ui-icon{width:36px;height:36px}.board-toast{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:8;white-space:nowrap;max-width:95%;background:#fff9e7;color:#325942;padding:10px 17px;border:1px solid #a9bd9d;border-radius:30px;box-shadow:0 4px 16px #122f3728;font-size:16px;font-weight:750;pointer-events:none;animation:board-toast 1.2s forwards}
.relic-panel{grid-column:2;grid-row:1/4;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:18px 12px;border:1px solid #ded4b5;border-radius:24px;background:radial-gradient(ellipse at 50% 35%,#fff5cb,#f7f2e1 75%);position:relative;overflow:hidden}.relic-panel>h2{text-align:center;font-size:23px;margin:7px 0}.relic-panel>.eyebrow{text-align:center;font-size:11px}.relic-assembly{position:relative;width:min(100%,290px);margin:2px auto}.relic-assembly:before{content:"";position:absolute;inset:11%;border:1px dashed #c7ac6f;border-radius:50%;box-shadow:0 0 0 16px #fff8da90;z-index:0}.relic-assembly>svg{position:relative}.relic-piece.missing{opacity:.18;filter:grayscale(1)}.relic-piece.complete{opacity:1}.relic-piece.just-completed{animation:piece-in .8s cubic-bezier(.17,.9,.4,1);transform-origin:180px 180px}.assembly-count{display:flex;align-items:center;gap:10px;margin:4px 0 18px}.assembly-count strong{font-size:27px;font-weight:750;color:#8c6123}.assembly-count span{font-size:14px;color:#72603e}.color-progress{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;width:100%;max-width:330px}.color-chip{position:relative;overflow:hidden;display:flex;align-items:center;gap:7px;min-width:0;border:1px solid #d7ceaf;background:#fffdf5;border-radius:10px;padding:6px 8px;font-size:14px;color:#435645;font-variant-numeric:tabular-nums}.color-chip:after{content:"";position:absolute;bottom:0;left:0;height:4px;width:var(--fill,0%);background:var(--gem);transition:width .35s}.color-mark{display:block;width:23px;height:23px;border-radius:6px;background:var(--gem);color:#fffdf0;padding:4px;flex-shrink:0}.color-mark svg{width:100%;height:100%}.color-chip.complete{border-color:#a1bc8c;background:#e4eed8}.color-chip.just-completed{animation:chip-pop .6s}.relic-hint{font-size:14px;line-height:1.5;text-align:center;margin:16px 0 0;color:#6c684f}
.waiting{margin:auto;width:min(100%,650px);padding:28px;border:1px solid var(--line);border-radius:24px;background:#fffdf5;text-align:center;overflow:auto}.waiting #waitingArt{width:150px;margin:auto}.waiting h2{margin:16px 0}.waiting>strong{display:block;font-size:34px;letter-spacing:5px;color:#267456;margin:18px 0}.waiting p{font-size:16px}.waiting #waitingPlayers{display:flex;justify-content:center;gap:24px;flex-wrap:wrap}.waiting-player{font-size:15px}.waiting-player>div{width:54px;margin:0 auto 8px}
.pause-overlay{position:fixed;inset:0;display:grid;place-items:center;z-index:20;background:#e8eddac9;backdrop-filter:blur(4px);padding:16px}.pause-overlay>div{text-align:center;width:min(100%,420px);border:1px solid #cad7bd;border-radius:24px;background:#fffdf5;padding:32px}.pause-overlay>div>span{color:#4c8669}.pause-overlay .ui-icon{width:48px;height:48px}.pause-overlay h2{margin-top:18px}.pause-overlay p{font-size:16px}
dialog{width:min(560px,calc(100vw - 24px));max-height:calc(100dvh - 24px);max-width:none;padding:32px;border:1px solid #c9d6c0;border-radius:24px;background:#fffdf5;color:var(--ink);box-shadow:0 25px 80px #1f413c38;overflow:auto;overscroll-behavior:contain}dialog::backdrop{background:#1d3a368c;backdrop-filter:blur(3px)}dialog .eyebrow{margin-bottom:12px;padding-right:26px}dialog h2{font-size:29px;padding-right:20px;line-height:1.25}dialog .primary{width:100%}.close{position:absolute;right:14px;top:14px;width:44px;height:44px;padding:10px;border:1px solid #dce2d4;background:#f3f5e9;border-radius:50%;color:#365e46}.field-label select{width:100%}#createArt{width:105px;float:right;margin:0 0 10px 12px}#createForm .field-label{clear:both}#createForm p{font-size:15px}#helpDialog ol{padding-left:22px;margin:24px 0}#helpDialog li{padding-left:4px;margin-bottom:18px;font-size:16px;line-height:1.65;color:#576d5d}#helpDialog li b{color:#254e3d}.tutorial-gems{position:relative;width:202px;height:107px;margin:22px auto}.demo-gem{position:absolute;top:0;left:0;width:46px;height:46px;border-radius:11px;background:#e9b93c;color:#fffdf3;display:grid;place-items:center;box-shadow:inset 0 -4px #aa772740,inset 0 2px #fff5}.demo-gem .ui-icon{width:28px;height:28px}.demo-gem:nth-child(2){left:52px}.demo-gem.other{left:104px;background:#a678d3;animation:demo-swap 4s infinite}.demo-gem.moving{left:104px;top:52px;animation:demo-swap-back 4s infinite}#quickDialog{width:min(1000px,calc(100vw - 24px))}#quickDialog h2{padding-right:30px;margin-bottom:12px}.quick-note{font-size:16px;margin-bottom:12px}.quick-status{font-size:15px;color:#256e4c;min-height:20px;margin:0 0 12px}.relic-choices{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;max-height:calc(100dvh - 270px);min-height:180px;overflow:auto;padding:4px;overscroll-behavior:contain;align-content:start}.relic-choice{position:relative;padding:14px 10px;text-align:center;border:1px solid #d7ddc7;border-radius:18px;background:#f8f5e8;box-shadow:0 3px 0 #dde3cf;min-width:0}.relic-choice[aria-pressed=true]{border:2px solid #3b825c;background:#e8efd7;padding:13px 9px}.relic-choice>div{width:min(100%,115px);aspect-ratio:1;margin:auto}.relic-choice b{display:block;font-size:17px;margin:9px 0}.relic-choice small{display:block;color:#596c55;font-size:13px;line-height:1.5}.relic-choice .rating-note{margin-top:6px;font-size:12px;color:#677b60}.owned{position:absolute;right:8px;top:8px;display:grid;place-items:center;border-radius:50%;width:26px;height:26px;background:#2c7756;color:white}.owned .ui-icon{width:17px;height:17px}.dialog-emblem{width:64px;height:64px;border-radius:20px;background:#e6efdb;color:#2c7656;display:grid;place-items:center;margin-bottom:20px}.dialog-emblem .ui-icon{width:32px;height:32px}.dialog-actions{display:flex;flex-direction:column;gap:12px;margin-top:24px}#leaveNotice{font-size:17px;line-height:1.65}#leaveError{color:#ae3648;background:#ffefea;border-radius:10px;padding:12px;font-size:15px}#resultDialog{text-align:center;width:min(620px,calc(100vw - 24px))}#resultArt{width:170px;margin:auto;animation:float 6s infinite}#resultText{font-size:16px}#resultDialog.lost h2{color:#a14545}#resultDialog.lost #resultArt{animation:none}#resultPlayers{margin:20px 0}.result-row{display:flex;align-items:center;gap:12px;padding:12px;background:#ecf1e1;border-radius:12px;margin:8px 0;text-align:left;font-size:15px}.result-row .avatar{width:40px;flex-shrink:0}.result-row b{flex:1;min-width:0;overflow-wrap:anywhere}.result-row span{font-size:13px;color:#56764f;max-width:46%}
#effects{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:30}.flying-gem{position:absolute;width:15px;height:15px;border-radius:5px;background:var(--gem);border:1px solid white;animation:fly-gem .75s cubic-bezier(.25,.55,.55,1) forwards}.confetti{position:absolute;width:8px;height:12px;background:var(--gem);opacity:0;animation:confetti 2s ease-out forwards}.spark{position:absolute;color:var(--gem);animation:spark .65s ease-out forwards;width:20px;height:20px}.spark .ui-icon{width:100%;height:100%}#toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);z-index:210;max-width:calc(100vw - 24px);background:#285b45;border:1px solid #5d8c65;color:#fffdeb;padding:14px 22px;border-radius:14px;font-size:16px;text-align:center;box-shadow:0 8px 30px #23423130}.platform-entry{position:fixed;inset:0;z-index:200;background:#f3f4e9;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:24px;text-align:center}.platform-entry h2{font-size:30px;max-width:600px;margin:0}.platform-entry p{font-size:17px;max-width:520px;margin:0}
/* Keep the separately gated shop visually consistent, without changing billing. */
#shopDialog{font-size:16px;background:#fffdf5;color:var(--ink)}#shopDialog .shop-heading h2{font:750 30px/1.2 system-ui,sans-serif}#shopDialog .shop-heading p,#shopDialog .shop-notice,#shopDialog .shop-preview p,#shopDialog .shop-product p{font-size:15px;color:#5a6b5a}#shopDialog .shop-tabs button{font-size:15px;min-height:44px;color:#365e46}#shopDialog .shop-tabs button.active{background:#2d775b;border-color:#246449;color:white}#shopDialog .shop-product h3{font:750 19px/1.3 system-ui,sans-serif}#shopDialog .shop-ownership,#shopDialog .shop-reset{font-size:13px}#shopDialog .shop-buy{font-size:15px}#shopDialog .shop-tabs .ui-icon{width:18px;height:18px;margin-right:7px}.shop-effect-icon .ui-icon{width:68px;height:68px}.mosaic-burst .ui-icon{width:20px;height:20px}.portrait-crown .ui-icon{width:100%;height:100%;stroke:#a0701d;fill:#f3ce68}.portrait-crown{width:32px;height:28px}.portrait-leaf{width:22px;height:36px}.portrait-leaf .ui-icon{width:100%;height:100%;fill:#cebc72;stroke:#9b813c}
@keyframes float{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-8px) rotate(3deg)}}@keyframes hint{50%{filter:brightness(1.2);box-shadow:inset 0 0 0 2px #fff,0 0 0 1px #fff6;transform:scale(.9)}}@keyframes clear-tile{45%{transform:scale(1.12);filter:brightness(1.4)}100%{transform:scale(.1) rotate(20deg);opacity:0}}@keyframes shake{25%{transform:translateX(-3px)}75%{transform:translateX(3px)}}@keyframes reshuffle{50%{transform:scale(.3);opacity:.3}}@keyframes board-toast{0%{opacity:0;transform:translate(-50%,-30%) scale(.9)}20%,75%{opacity:1;transform:translate(-50%,-50%) scale(1)}100%{opacity:0;transform:translate(-50%,-90%)}}@keyframes fly-gem{0%{opacity:1}35%{transform:translate(calc(var(--dx)*.25),calc(var(--dy)*.15 - 30px)) rotate(30deg)}100%{opacity:0;transform:translate(var(--dx),var(--dy)) scale(.1) rotate(140deg)}}@keyframes piece-in{0%{opacity:0;transform:scale(.4)}60%{transform:scale(1.08)}100%{transform:scale(1)}}@keyframes chip-pop{50%{transform:scale(1.06)}}@keyframes spark{100%{opacity:0;transform:translate(var(--dx),var(--dy)) scale(.1) rotate(90deg)}}@keyframes confetti{10%,75%{opacity:1}100%{opacity:0;transform:translate(var(--dx),var(--dy)) rotate(450deg)}}@keyframes timer-pulse{50%{opacity:.6}}@keyframes demo-swap{20%,55%{transform:translateY(52px)}75%,100%{transform:translateY(0)}}@keyframes demo-swap-back{20%,55%{transform:translateY(-52px)}75%,100%{transform:translateY(0)}}
@media(min-width:1500px){.topbar{padding-inline:max(28px,calc((100vw - 1600px)/2))}.stage{grid-template-columns:minmax(0,1.35fr) minmax(300px,1fr) minmax(0,.9fr)}.player-header b{font-size:16px}.player-header small{font-size:14px}.relic-panel>h2{font-size:27px}.color-chip{font-size:16px;padding:8px}.color-mark{width:27px;height:27px}.own .player-header b{font-size:20px}}
@media(max-width:1150px){.topbar{gap:12px;padding-inline:18px}.brand{font-size:17px}.brand small{display:none}.topbar #navigation button{font-size:13px;padding:10px 8px}.topbar #navigation .ui-icon{display:none}.version{display:none}.top-actions{gap:6px}.welcome-grid{grid-template-columns:245px minmax(0,1fr)}.hero-card{padding:24px}.hero-art{width:30%;top:18%}.hero-copy{width:70%}.hero-copy .eyebrow{font-size:11px}.how-strip{gap:10px;padding:16px}.step-number{display:none}.how-strip p span{font-size:12px}.stage{grid-template-columns:minmax(0,1.25fr) minmax(210px,.85fr) minmax(0,.85fr);gap:10px}.player-panel{padding:8px}.player-panel.own{padding:12px}.player-header .avatar{width:32px;height:32px}.player-header b{font-size:13px}.player-header small{font-size:12px}.relic-panel{padding:12px 8px}.relic-panel>h2{font-size:20px}.relic-hint{font-size:13px}.color-chip{font-size:12px;padding:6px 4px;gap:4px}.color-mark{width:21px;height:21px}.match-actions{gap:6px}.match-timer span{display:none}}
@media(max-width:850px){body:not(.playing) .topbar{height:128px;flex-wrap:wrap;gap:0;align-content:center;padding:10px 16px}body:not(.playing) #navigation{order:3;width:100%;justify-content:center;gap:8px;margin-top:10px}body:not(.playing) .menu-scroll{height:calc(100dvh - 128px)}.welcome-grid{grid-template-columns:1fr}.lobby-profile{display:flex;flex-wrap:wrap;padding:15px;gap:14px}.lobby-profile #profilePortrait{width:54px;flex-shrink:0}.lobby-profile>h2{flex:1}.lobby-profile .profile-numbers{gap:18px}.lobby-profile>.soft-button{margin:0;font-size:14px}.hero-card{min-height:230px}.how-strip p{font-size:13px}.how-strip>div>[data-icon]{width:32px;height:32px}.collection-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.rooms-list{grid-template-columns:1fr}.profile-editor{grid-template-columns:200px minmax(0,1fr);gap:24px;padding:22px}.profile-editor>aside{padding:18px}.game{padding:10px 12px 16px}.match-bar{margin-bottom:10px}.match-bar h2{font-size:20px}.match-bar .eyebrow{font-size:11px}.match-actions button{padding:10px 12px;font-size:14px}.match-timer{padding:8px}.match-timer strong{font-size:23px}}
@media(max-width:720px) and (orientation:portrait){
 body:not(.playing) .topbar{height:126px;padding:10px 12px}.topbar{height:60px;padding:0 12px;gap:8px}.brand{font-size:16px;gap:8px}.brand-icon{width:34px;height:38px;border-radius:11px}.brand-icon .ui-icon{width:24px;height:24px}.top-actions{gap:5px}.round-btn,.top-avatar{width:40px;height:40px;border-radius:12px;padding:9px}.top-avatar{padding:0}.top-actions .game-language-menu{max-width:106px}.topbar #navigation{gap:3px!important;justify-content:space-between!important}.topbar #navigation button{padding:9px 8px;font-size:13px;min-height:44px;flex:1}.topbar #navigation .ui-icon{display:none}.menu-scroll{padding:18px 12px 40px}body:not(.playing) .menu-scroll{height:calc(100dvh - 126px)}.welcome-grid{display:flex;flex-direction:column-reverse;gap:12px}.lobby-hero{padding:24px 18px;min-height:240px}.hero-copy{width:74%}.hero-copy h1{font-size:32px;line-height:1.05}.hero-copy .eyebrow{font-size:11px;letter-spacing:.7px}.hero-copy p{font-size:15px;max-width:230px}.hero-art{width:34%;right:-1%;top:30%}.hero-tags{gap:5px}.hero-tags>span{padding:4px 7px;font-size:12px}.hero-tags .ui-icon{width:15px;height:15px}.hero-copy .primary{font-size:16px;padding:12px 16px}.profile-card{border-radius:18px;padding:12px;gap:10px}.lobby-profile #profilePortrait{width:46px}.lobby-profile>h2{font-size:17px}.lobby-profile .profile-numbers{gap:12px}.profile-numbers b{font-size:18px}.profile-numbers span{font-size:12px}.lobby-profile>.soft-button{display:none}.how-strip{grid-template-columns:1fr;gap:14px;padding:16px;margin-top:16px}.how-strip>div>[data-icon]{width:36px;height:36px}.how-strip p{font-size:15px}.how-strip p span{font-size:14px}.section-heading{margin-top:22px}.section-heading h2{font-size:25px}.room-heading form{width:100%}.room-heading #joinCode{flex:1}.room-heading>.secondary{padding:10px 14px;font-size:14px}.room-row{padding:12px;gap:10px}.room-art{width:56px}.room-info b{font-size:16px}.room-info span,.room-info small{font-size:13px}.room-row button{font-size:14px;padding:9px}.page-heading h1{font-size:31px}.page-heading p{font-size:16px}.collection-grid{grid-template-columns:1fr;gap:16px}.collection-card{padding:22px}.collection-card>div{width:200px}.ranking-row{gap:12px;padding:14px 12px}.ranking-row .avatar{width:42px}.ranking-row b{font-size:16px}.ranking-row small{font-size:13px}.ranking-row>strong{font-size:21px}.profile-editor{display:block;padding:18px}.profile-editor>aside{display:grid;grid-template-columns:80px minmax(0,1fr);gap:8px 16px;text-align:left;align-items:center;margin-bottom:22px;padding:14px}.profile-editor #avatarPreview{grid-row:1/3;width:80px;margin:0}.profile-editor aside>b{font-size:21px}.profile-editor aside p{margin:0;font-size:14px}.avatar-choices{gap:8px}.profile-editor h3{font-size:19px}
 .game{height:calc(100dvh - 60px);padding:6px 8px 12px;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin}.match-bar{position:relative;gap:6px;margin-bottom:8px;align-items:center;min-height:56px}.match-bar>div:first-child{min-width:0;flex:1}.match-bar .eyebrow{display:none}.match-bar h2{font-size:18px;margin:0;overflow-wrap:anywhere;line-height:1.2}.match-actions{gap:4px;flex-shrink:0}.match-actions .pill{display:none}.match-actions button{min-height:42px;padding:9px 8px;font-size:13px}.match-timer{min-height:42px;padding:7px;border-radius:10px}.match-timer strong{font-size:22px}.stage{display:grid;flex:0 0 auto;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:76px auto 142px;gap:8px;min-height:0}.relic-panel{grid-column:1/4;grid-row:1;display:grid;grid-template-columns:66px minmax(0,1fr);grid-template-rows:auto auto;padding:6px 10px;gap:0 10px;justify-content:stretch;border-radius:16px}.relic-panel>.eyebrow,.relic-panel>h2,.relic-hint{display:none}.relic-assembly{grid-column:1;grid-row:1/3;width:66px;height:66px;margin:0}.relic-assembly:before{box-shadow:none}.assembly-count{position:absolute;left:7px;bottom:1px;display:none}.color-progress{grid-column:2;grid-row:1/3;max-width:none;grid-template-columns:repeat(4,minmax(0,1fr));gap:3px}.color-chip{font-size:11px;padding:4px 3px;gap:3px;line-height:1.4;border-radius:6px}.color-mark{width:14px;height:14px;padding:2px}.color-chip:after{height:3px}.slot-zero{grid-column:1/4;grid-row:2}.slot-one{grid-column:1;grid-row:3}.slot-two{grid-column:2;grid-row:3}.slot-three{grid-column:3;grid-row:3}.slot-zero .player-panel{height:calc(100vw - 16px + 56px);max-height:490px;padding:8px;border-radius:18px;gap:4px}.own .player-header{min-height:43px;margin-bottom:2px}.own .player-header b{font-size:15px}.own .player-header small{font-size:12px;margin-top:2px}.own .player-header .avatar{width:38px;height:38px}.own-label{font-size:10px;margin-top:2px}.own .contribution{font-size:19px}.own .contribution small{font-size:12px}.board{border-width:3px}.tile{padding:2px}.player-panel:not(.own){flex-direction:column;padding:6px;border-radius:13px;gap:4px;justify-content:flex-start}.player-panel:not(.own) .player-header{flex:0 0 auto;gap:4px;display:grid;grid-template-columns:23px minmax(0,1fr);align-items:center;width:100%}.player-panel:not(.own) .player-header .avatar{width:23px;height:23px}.player-panel:not(.own) .player-header b{font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.player-panel:not(.own) .player-header .info>small{display:none}.player-panel:not(.own) .contribution{grid-column:1/3;font-size:14px;justify-content:center;gap:4px;line-height:1.1}.player-panel:not(.own) .contribution small{font-size:11px;margin:0}.player-panel:not(.own) .tile{padding:1px}.player-panel:not(.own) .tile-face{box-shadow:inset 0 -1px #1234}.player-panel:not(.own) .board{border-width:2px;border-radius:7px}.player-panel:not(.own) .tile-face:after{display:none}.player-panel:not(.own) .board:before{display:none}.board-toast{font-size:15px;padding:9px 13px}.waiting{padding:22px 16px}.waiting h2{font-size:24px}.waiting p{font-size:16px}.waiting #waitingArt{width:120px}.empty-panel{font-size:12px;flex-direction:column;gap:8px;text-align:center}.empty-panel .ui-icon{width:25px;height:25px}
 dialog{padding:24px 20px;border-radius:20px}dialog h2{font-size:25px}.close{top:10px;right:10px}#helpDialog li{font-size:16px}#quickDialog{padding:24px 16px}.quick-note{font-size:15px}.quick-status{font-size:14px}.relic-choices{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;max-height:calc(100dvh - 290px);min-height:160px}.relic-choice{padding:12px 7px}.relic-choice[aria-pressed=true]{padding:11px 6px}.relic-choice>div{width:85px}.relic-choice b{font-size:16px}.relic-choice small{font-size:13px}.relic-choice .rating-note{font-size:12px}.result-row{gap:8px;padding:10px;font-size:14px;flex-wrap:wrap}.result-row span{font-size:13px;max-width:none;width:100%;padding-left:40px}.result-row .avatar{width:32px}#resultArt{width:135px}#toast{font-size:15px;padding:12px 16px}.game-language-menu summary{font-size:13px!important;min-height:40px!important}.game-language-menu nav a{font-size:15px;min-height:44px}
}
@media(max-width:950px) and (orientation:landscape){.topbar{height:54px;padding:0 12px}.brand{font-size:16px}.brand-icon{width:34px;height:36px;border-radius:11px}.round-btn,.top-avatar{width:40px;height:40px}.brand small{display:none}.game{height:calc(100dvh - 54px);padding:6px 10px 10px}.match-bar{min-height:40px;margin-bottom:6px;gap:8px}.match-bar h2{font-size:18px;margin:0}.match-bar .eyebrow{display:none}.match-actions button{font-size:13px;padding:7px 10px;min-height:38px}.match-actions .pill{display:none}.match-timer{padding:4px 8px;min-height:38px}.match-timer strong{font-size:22px}.stage{grid-template-columns:minmax(0,1.18fr) minmax(180px,.95fr) minmax(0,.9fr);gap:8px}.player-panel.own{padding:7px;gap:4px}.own .player-header{min-height:35px;margin:0}.own .player-header .avatar{width:30px;height:30px}.own .player-header b{font-size:14px}.own .player-header small{font-size:11px;margin:2px 0}.own-label{display:none}.own .contribution{font-size:16px}.contribution small{font-size:11px}.relic-panel{padding:6px}.relic-panel>.eyebrow,.relic-panel>h2,.relic-hint{display:none}.relic-assembly{width:95px;margin:0}.assembly-count{margin:0 0 6px}.assembly-count strong{font-size:18px}.assembly-count span{font-size:12px}.color-progress{grid-template-columns:repeat(3,minmax(0,1fr));gap:3px}.color-chip{font-size:11px;gap:3px;padding:3px}.color-mark{width:14px;height:14px;padding:2px}.player-panel:not(.own){padding:5px;border-radius:12px;gap:4px}.player-panel:not(.own) .player-header{display:block;min-width:0}.player-panel:not(.own) .player-header .avatar{display:none}.player-panel:not(.own) .player-header b{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.player-panel:not(.own) .player-header .info>small{display:none}.player-panel:not(.own) .contribution{font-size:16px;gap:4px;line-height:1.2}.player-panel:not(.own) .contribution small{font-size:11px;margin:0}.player-panel:not(.own) .tile{padding:1px}.player-panel:not(.own) .board{border-width:2px;border-radius:6px}.tile{padding:2px}.board-toast{font-size:13px}dialog{max-height:calc(100dvh - 16px)}.relic-choices{max-height:240px}.topbar #navigation .ui-icon{display:none}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;scroll-behavior:auto!important;transition:none!important}.confetti,.spark,.flying-gem{display:none!important}}
/* Dense late-game objectives remain readable without stretching their artwork. */
@media(min-width:951px){.relic-panel.many-colors .color-progress{grid-template-columns:repeat(3,minmax(0,1fr))}.relic-panel.many-colors .relic-assembly{width:min(100%,23vh)}}
@media(min-width:951px) and (max-height:800px){.relic-panel{padding-block:10px}.relic-panel>.eyebrow{display:none}.relic-assembly{width:min(100%,23vh)}.relic-panel.many-colors .relic-assembly{width:min(100%,19vh)}.relic-hint{font-size:13px;margin-top:10px}.assembly-count{margin-bottom:10px}.color-progress{gap:6px}}
.close{z-index:5}
@media(max-width:760px){#shopDialog .shop-preview{position:static;padding:14px}#shopDialog .shop-preview-panel{display:grid;grid-template-columns:60px minmax(0,1fr);gap:8px;margin-top:10px;padding:12px}#shopDialog .shop-preview-panel>div:first-child{width:54px;height:54px;margin:0;grid-row:1/3}#shopDialog .shop-preview-panel>b{text-align:left;font-size:14px;align-self:center}#shopDialog .shop-preview-board{grid-column:2;margin:0;padding:4px;grid-template-columns:repeat(8,minmax(0,1fr));gap:2px}#shopDialog .shop-preview h3{font-size:18px;margin-top:12px}#shopDialog .shop-preview p{min-height:0;margin-bottom:6px}#shopDialog .shop-preview .eyebrow{font-size:11px}#shopDialog .shop-products{grid-template-columns:repeat(2,minmax(0,1fr))}#shopDialog .shop-product{padding:10px}#shopDialog .shop-product-art{height:110px}#shopDialog .shop-heading h2{font-size:27px}#shopDialog .shop-heading{padding-right:34px}}
#shopDialog .shop-buy{font-size:15px!important}
@media(max-width:380px){#shopDialog .shop-product{display:flex;gap:0;text-align:center}#shopDialog .shop-product-art{grid-row:auto;min-height:0;height:105px;margin-bottom:12px}#shopDialog .shop-product p{margin-bottom:12px}#shopDialog .shop-ownership{margin-bottom:10px}#shopDialog .shop-product h3{overflow-wrap:anywhere}#shopDialog .shop-products{grid-template-columns:1fr}#shopDialog .shop-product-art>.mosaic-portrait{width:70px;height:70px}}
@media(max-width:720px) and (orientation:portrait){.slot-zero .player-panel{height:min(calc(100vw + 40px),calc(100dvh - 230px))}}
@media(max-width:720px) and (orientation:portrait){body.playing .game-language-menu{display:none}.match-bar{display:grid;grid-template-columns:minmax(0,1fr);gap:4px;min-height:0}.match-bar h2{font-size:17px;line-height:22px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.match-actions{width:100%;justify-content:flex-end}.match-timer{margin-right:auto;min-height:40px}.match-actions button{min-height:40px}.slot-zero .player-panel{height:min(calc(100vw + 40px),calc(100dvh - 230px))}}
@media(max-width:720px) and (orientation:portrait){.stage:has(.relic-panel.many-colors){grid-template-rows:104px auto 142px}.relic-panel.many-colors .relic-assembly{display:none}.relic-panel.many-colors .color-progress{grid-column:1/-1}.relic-panel.many-colors .color-chip{font-size:12px;padding:4px 5px;gap:4px}.stage:has(.relic-panel.many-colors) .slot-zero .player-panel{height:min(calc(100vw + 40px),calc(100dvh - 258px))}}