/* the yuri dev -- the hub's GAME SCREENS: the shop, the notice board, the shrine, the chalkboard.
   Drawn with the pixel art in site/ui (tools/art/ui.py). One art pixel = --u CSS pixels, set by js/gameui.js.
   Frames are nine-slice border-images, so every box stretches and stays hard-edged. Text is black.
   Names carry a g- / gx- / -x mark so nothing here meets a rule in site.css (see README, traps).            */
.gx{--u:3px;--us:2px;--px:'Press Start 2P',ui-monospace,monospace;--bd:'Pixelify Sans','Nunito',system-ui,sans-serif;
  position:absolute;inset:0;z-index:20;display:flex;flex-direction:column;overflow:hidden;color:#111;
  font:500 max(15px,calc(5.4*var(--u)))/1.35 var(--bd);image-rendering:pixelated;animation:gx-in .3s steps(7) both}
.gx.out{animation:gx-out .2s steps(5) both}
@keyframes gx-in{from{clip-path:inset(50% 50% 50% 50%)}to{clip-path:inset(0 0 0 0)}}
@keyframes gx-out{from{clip-path:inset(0 0 0 0)}to{clip-path:inset(50% 50% 50% 50%)}}
.gx *,.gx *::before,.gx *::after{box-sizing:border-box;image-rendering:pixelated}
.gx [hidden]{display:none!important}
.gx button{font:inherit;color:inherit;cursor:pointer}
.gx h1,.gx h2,.gx h3,.gx p,.gx ul{margin:0;padding:0}
.gx ul{list-style:none}
.gx .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.gx ::-webkit-scrollbar{width:calc(4*var(--u));height:calc(4*var(--u))}
.gx ::-webkit-scrollbar-track{background:#fff0f6;border-left:var(--u) solid #8a6a9a}
.gx ::-webkit-scrollbar-thumb{background:#ffb8d2;border:var(--u) solid #8a6a9a}
.gx *{scrollbar-color:#ffb8d2 #fff0f6}

/* ---- frames */
.f{border-style:solid;border-color:transparent;border-width:calc(8*var(--u))}
.f-win{border-image:url(../ui/win.png) 8 fill/calc(8*var(--u)) stretch}
.f-panel{border-image:url(../ui/panel.png) 8 fill/calc(8*var(--u)) stretch}
.f-slot{border-image:url(../ui/slot.png) 8 fill/calc(8*var(--u)) stretch}
.f-gold{border-image:url(../ui/gold.png) 8 fill/calc(8*var(--u)) stretch}
.f-pink{border-image:url(../ui/pinkbox.png) 8 fill/calc(8*var(--u)) stretch}
.f-bubble{border-image:url(../ui/bubble.png) 8 fill/calc(8*var(--u)) stretch}
.f-wood{border-image:url(../ui/wood.png) 8 fill/calc(8*var(--u)) stretch}
.f-sign{border-image:url(../ui/sign.png) 8 fill/calc(8*var(--u)) stretch}
.f-cabinet{border-width:calc(6*var(--u));border-image:url(../ui/cabinet.png) 6 fill/calc(6*var(--u)) stretch}
.f-paper_w{border-image:url(../ui/paper_w.png) 8 fill/calc(8*var(--u)) stretch}
.f-paper_y{border-image:url(../ui/paper_y.png) 8 fill/calc(8*var(--u)) stretch}
.f-paper_p{border-image:url(../ui/paper_p.png) 8 fill/calc(8*var(--u)) stretch}
.f-paper_b{border-image:url(../ui/paper_b.png) 8 fill/calc(8*var(--u)) stretch}
.f-cellp,.f-celly,.f-cellg{border-width:calc(4*var(--u))}
.f-cellp{border-image:url(../ui/cell_p.png) 4 fill/calc(4*var(--u)) stretch}
.f-celly{border-image:url(../ui/cell_y.png) 4 fill/calc(4*var(--u)) stretch}
.f-cellg{border-image:url(../ui/cell_g.png) 4 fill/calc(4*var(--u)) stretch}
.f-input{border-style:solid;border-color:transparent;border-width:calc(4*var(--u));border-image:url(../ui/input.png) 4 fill/calc(4*var(--u)) stretch}

/* ---- icons and items (sheet sizes come from ui.json as --isw/--ish/--tsw/--tsh) */
.ico{--k:var(--us);display:inline-block;flex:none;width:calc(16*var(--k));height:calc(16*var(--k));vertical-align:middle;
  background:url(../ui/icons.png) no-repeat;background-size:calc(var(--isw)*var(--k)) calc(var(--ish)*var(--k));
  background-position:calc(var(--ix)*-16*var(--k)) calc(var(--iy)*-16*var(--k))}
.ico.l{--k:var(--u)}
.item{--k:var(--u);display:block;flex:none;width:calc(32*var(--k));height:calc(32*var(--k));
  background:url(../ui/items.png) no-repeat;background-size:calc(var(--tsw)*var(--k)) calc(var(--tsh)*var(--k));
  background-position:calc(var(--ix)*-32*var(--k)) calc(var(--iy)*-32*var(--k))}
.item.gen{background-size:100% 100%;background-position:0 0}
.item.big{--k:calc(var(--u)*2)}
.item.s{--k:var(--us)}

/* ---- buttons, tabs, tags, chips, key caps */
.gx-btn{display:inline-flex;align-items:center;justify-content:center;gap:calc(2*var(--u));min-height:calc(18*var(--u));padding:0 calc(3*var(--u));
  background:none;border-style:solid;border-color:transparent;border-width:calc(4*var(--u)) calc(4*var(--u)) calc(6*var(--u));
  border-image:url(../ui/btn_y.png) 4 4 6 4 fill/calc(4*var(--u)) calc(4*var(--u)) calc(6*var(--u)) stretch;
  font:400 max(10px,calc(3.6*var(--u)))/1.25 var(--px);letter-spacing:0;text-transform:uppercase;text-align:center}
.gx-btn:active:not(:disabled),.gx-btn.down{border-width:calc(6*var(--u)) calc(4*var(--u)) calc(4*var(--u));border-image:url(../ui/btn_y_down.png) 6 4 4 4 fill/calc(6*var(--u)) calc(4*var(--u)) calc(4*var(--u)) stretch}
.gx-btn.p{border-image-source:url(../ui/btn_p.png)}.gx-btn.p:active:not(:disabled){border-image-source:url(../ui/btn_p_down.png)}
.gx-btn.w{border-image-source:url(../ui/btn_w.png)}.gx-btn.w:active:not(:disabled){border-image-source:url(../ui/btn_w_down.png)}
.gx-btn:disabled{border-image-source:url(../ui/btn_off.png);cursor:default;color:#4d4d4d}
.gx-btn.block{display:flex;width:100%}
.gx-btn.big{min-height:calc(22*var(--u));font-size:max(12px,calc(4.6*var(--u)))}
.gx-btn:hover:not(:disabled){filter:brightness(1.05)}
.gx :focus-visible{outline:var(--u) solid #111;outline-offset:var(--u)}
.gx-tab{display:inline-flex;align-items:center;gap:calc(.5*var(--u));background:none;padding:0 calc(.5*var(--u));min-height:calc(15*var(--u));
  border-style:solid;border-color:transparent;border-width:calc(4*var(--u)) calc(4*var(--u)) calc(3*var(--u));
  border-image:url(../ui/tab.png) 4 4 3 4 fill/calc(4*var(--u)) calc(4*var(--u)) calc(3*var(--u)) stretch;
  font:400 max(9px,calc(3*var(--u)))/1.2 var(--px);text-transform:uppercase;white-space:nowrap}
.gx-tab.on{border-image-source:url(../ui/tab_on.png)}
.gx-tab small{font:700 max(12px,calc(4.2*var(--u)))/1 var(--bd)}
.tagx{display:inline-flex;align-items:center;gap:var(--u);white-space:nowrap;padding:0 calc(1.5*var(--u));min-height:calc(9*var(--u));
  border-style:solid;border-color:transparent;border-width:calc(2*var(--u)) calc(2*var(--u)) calc(3*var(--u));
  border-image:url(../ui/tag_p.png) 2 2 3 2 fill/calc(2*var(--u)) calc(2*var(--u)) calc(3*var(--u)) stretch;
  font:400 max(8px,calc(2.6*var(--u)))/1.1 var(--px);text-transform:uppercase}
.tagx.y{border-image-source:url(../ui/tag_y.png)}.tagx.g{border-image-source:url(../ui/tag_g.png)}
.tagx.b{border-image-source:url(../ui/tag_b.png)}.tagx.gr{border-image-source:url(../ui/tag_gr.png)}
.tagx.keep{text-transform:none}
/* a price tag on a string: exactly 12 art pixels tall, so its point never stretches */
.ptagx{display:inline-flex;align-items:center;justify-content:center;white-space:nowrap;height:calc(12*var(--u));padding:0 calc(1*var(--u)) 0 0;
  border-style:solid;border-color:transparent;border-width:calc(3*var(--u)) calc(3*var(--u)) calc(3*var(--u)) calc(8*var(--u));
  border-image:url(../ui/ptag_p.png) 3 3 3 8 fill/calc(3*var(--u)) calc(3*var(--u)) calc(3*var(--u)) calc(8*var(--u)) stretch;
  font:400 max(8px,calc(2.6*var(--u)))/1 var(--px);text-transform:uppercase}
.ptagx.y{border-image-source:url(../ui/ptag_y.png)}.ptagx.g{border-image-source:url(../ui/ptag_g.png)}.ptagx.gr{border-image-source:url(../ui/ptag_gr.png)}
.chipx{display:inline-flex;align-items:center;gap:calc(1.5*var(--u));padding:0 calc(2*var(--u));min-height:calc(11*var(--u));background:none;
  border-style:solid;border-color:transparent;border-width:calc(2*var(--u)) calc(2*var(--u)) calc(3*var(--u));
  border-image:url(../ui/tag_g.png) 2 2 3 2 fill/calc(2*var(--u)) calc(2*var(--u)) calc(3*var(--u)) stretch;
  font:600 max(13px,calc(4.6*var(--u)))/1.1 var(--bd)}
.chipx small{font:700 .85em/1 var(--bd);color:#4d4d4d}
.chipx.on{border-image-source:url(../ui/tag_y.png)}
.chipx:disabled{opacity:.45;cursor:default}
.chipx:hover:not(:disabled):not(.on){border-image-source:url(../ui/tag_p.png)}
.keyx{display:inline-flex;align-items:center;justify-content:center;min-width:calc(12*var(--u));height:calc(12*var(--u));padding:0 calc(1*var(--u));
  border-style:solid;border-color:transparent;border-width:calc(3*var(--u)) calc(3*var(--u)) calc(5*var(--u));
  border-image:url(../ui/key.png) 3 3 5 3 fill/calc(3*var(--u)) calc(3*var(--u)) calc(5*var(--u)) stretch;
  font:400 max(7px,calc(2.4*var(--u)))/1 var(--px);color:#111}
.gx-keys{position:absolute;left:0;right:0;bottom:calc(2*var(--u));z-index:3;display:flex;justify-content:center;flex-wrap:wrap;gap:calc(1*var(--u)) calc(5*var(--u));pointer-events:none;
  font:700 max(12px,calc(4.2*var(--u)))/1 var(--bd)}
.gx-keys span{display:inline-flex;align-items:center;gap:calc(1.5*var(--u));background:rgba(255,255,255,.82);padding:0 calc(2*var(--u)) 0 0}
.gx.compact .gx-keys{display:none}
@media (hover:none),(pointer:coarse){.gx-keys{display:none}}

/* ---- the top strip every screen has: its name on a wooden sign that hangs from two chains */
.gx-top{position:relative;z-index:2;display:flex;align-items:center;gap:calc(3*var(--u));padding:calc(5*var(--u)) calc(5*var(--u)) calc(3*var(--u))}
.gx-plate{position:relative;display:flex;align-items:center;gap:calc(2.5*var(--u));padding:0 calc(2*var(--u));min-height:calc(12*var(--u))}
.gx-plate b{font:400 max(12px,calc(5*var(--u)))/1.1 var(--px);letter-spacing:0}
.gx-plate.f-sign::before,.gx-plate.f-sign::after{content:'';position:absolute;top:calc(-13*var(--u));width:calc(6*var(--u));height:calc(6*var(--u));background:url(../ui/chain.png) 0 100%/calc(6*var(--u)) calc(8*var(--u)) repeat-y}
.gx-plate.f-sign::before{left:calc(-2*var(--u))}.gx-plate.f-sign::after{right:calc(-2*var(--u))}
.gx-sub{font-weight:600;color:#333}
.gx-me{margin-left:auto;display:flex;align-items:center;gap:calc(2*var(--u))}
.gx-h{font:400 max(10px,calc(3.4*var(--u)))/1.3 var(--px);text-transform:uppercase;margin-bottom:calc(2.5*var(--u))}

/* =====================================================================  THE SHOP  */
.gx-shop{background:#fff0f6 url(../ui/wall.png) 0 0/calc(16*var(--u)) calc(16*var(--u))}
.gx-shop::after{content:'';position:absolute;left:0;right:0;bottom:0;height:calc(18*var(--u));z-index:0;
  background:url(../ui/floor.png) 0 0/calc(32*var(--u)) calc(16*var(--u));border-top:calc(3*var(--u)) solid #fff;box-shadow:0 calc(-1*var(--u)) 0 #8a6a9a,inset 0 var(--u) 0 #8a6a9a}
.awningx{position:absolute;left:0;right:0;top:0;height:calc(16*var(--u));z-index:1;background:url(../ui/awning.png) 0 0/calc(16*var(--u)) calc(16*var(--u)) repeat-x}
.gx-shop .gx-top{padding-top:calc(3*var(--u))}
.gx-shop .gx-plate.f-sign::before,.gx-shop .gx-plate.f-sign::after{display:none}
.g-shop{position:relative;z-index:1;flex:1;min-height:0;display:grid;gap:calc(4*var(--u));padding:0 calc(5*var(--u)) calc(16*var(--u));
  grid-template-columns:calc(114*var(--u)) minmax(0,1fr) calc(112*var(--u));grid-template-rows:minmax(0,1fr)}
.shop-left,.shop-mid,.shop-right{min-height:0;display:flex;flex-direction:column;gap:calc(3*var(--u))}

.keeper{position:relative;display:flex;flex-direction:column;align-items:center}
.keeper-pic{--k:calc(var(--u)*2);width:calc(48*var(--k));height:calc(48*var(--k));background:url(../ui/keeper_idle.png) 0 0/100% 100% no-repeat;margin-top:calc(-6*var(--u))}
.keeper-pic.talk{background-image:url(../ui/keeper_talk.png)}.keeper-pic.blink{background-image:url(../ui/keeper_blink.png)}
.counterx{display:block;width:100%;height:calc(10*var(--u));margin-top:calc(-16*var(--u));position:relative;background:url(../ui/counter.png) 0 0/calc(32*var(--u)) calc(16*var(--u)) repeat-x;
  border:solid #8a6a9a;border-width:0 var(--u)}
.bubble{position:relative;width:100%;min-height:calc(30*var(--u));padding:0 calc(1*var(--u));margin-top:calc(-1*var(--u))}
.bubble .who,.o-talk .who{display:block;font:400 max(9px,calc(3*var(--u)))/1 var(--px);color:#b0457a;margin-bottom:calc(2*var(--u));text-transform:uppercase}
.bubble .say,.o-talk .say{font-weight:600}
.bubble .say i,.o-talk .say i{font-style:normal;animation:gx-caret .5s steps(1) infinite}
@keyframes gx-caret{50%{opacity:0}}
.filters-wrap{flex:1;min-height:0;display:flex;flex-direction:column}
.filters-wrap>.f{flex:1;min-height:0;display:flex;flex-direction:column}
.g-filters{flex:1;min-height:0;overflow-y:auto;padding:0 calc(1*var(--u))}
.g-filters .grp{margin-bottom:calc(4*var(--u))}
.g-filters .chips{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:calc(1.5*var(--u))}
.g-filters .clear{margin-top:calc(1*var(--u))}
/* a fetish, a game, a tier: an icon in a little sunk slot, its name, how many items have it */
.chipx.fet{position:relative;justify-content:flex-start;text-align:left;gap:calc(1.5*var(--u));min-height:calc(19*var(--u));padding:0 calc(2*var(--u)) 0 0;
  border-width:calc(4*var(--u));border-image:url(../ui/cell_p.png) 4 fill/calc(4*var(--u)) stretch;font-size:max(12px,calc(4*var(--u)));line-height:1.05}
.chipx.fet.on{border-image-source:url(../ui/cell_on.png)}
.chipx.fet:hover:not(:disabled):not(.on){border-image-source:url(../ui/cell_y.png)}
.chipx.fet span{min-width:0}
.gx.compact .chipx.fet .ico{--k:var(--u)}
.chipx.fet small{position:absolute;right:calc(-2*var(--u));top:calc(-3*var(--u));min-width:calc(7*var(--u));text-align:center;font:400 max(7px,calc(2.4*var(--u)))/1 var(--px);color:#111;
  background:#fff;border:var(--u) solid #8a6a9a;padding:calc(1*var(--u)) calc(.5*var(--u))}
.chipx.fet.on small{background:#ffe85e}

.g-shopbar{display:flex;flex-direction:column;gap:calc(2*var(--u))}
.tabs{display:flex;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;gap:0;align-items:flex-end;padding:0 calc(2*var(--u));margin-bottom:calc(-5*var(--u));position:relative;z-index:1}
.tools{display:flex;align-items:center;gap:calc(2*var(--u));padding:0 calc(1*var(--u))}
.searchx{flex:1;min-width:0;display:flex;align-items:center;gap:calc(2*var(--u));padding:0 calc(1*var(--u))}
.searchx input{flex:1;min-width:0;border:0;outline:0;background:none;font:600 1em/1.2 var(--bd);color:#111;min-height:calc(10*var(--u))}
.searchx input::placeholder{color:#777}
.g-count{white-space:nowrap;font-weight:700}
.g-active{display:flex;flex-wrap:wrap;gap:calc(1.5*var(--u));padding:0 calc(1*var(--u))}
.g-active:empty{display:none}
/* the cabinet: a wooden case with a grid of slots. Pink slot = free for girls, gold = HEROINE, grey = in the works */
.cabinetx{flex:1;min-height:0;display:flex;flex-direction:column}
.shelves{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;padding:calc(2*var(--u)) calc(1*var(--u)) calc(2*var(--u))}
.slotgrid{display:grid;grid-template-columns:repeat(auto-fill,var(--slot));justify-content:start;gap:calc(3*var(--u)) calc(1*var(--u));align-items:start}
.slotx{position:relative;display:flex;flex-direction:column;align-items:center;gap:0;background:none;border:0;padding:calc(2*var(--u)) 0 0;text-align:center;min-width:0}
.slotx:focus-visible{outline:none}
.slotx:focus-visible:not(.sel) .cellx{outline:var(--u) solid #111;outline-offset:var(--u)}
.cellx{position:relative;flex:none;display:grid;place-items:center;width:calc(40*var(--u));height:calc(40*var(--u));
  border-style:solid;border-color:transparent;border-width:calc(4*var(--u));border-image:url(../ui/cell_p.png) 4 fill/calc(4*var(--u)) stretch}
.gold>.cellx,.cellx.gold{border-image-source:url(../ui/cell_y.png)}
.soon>.cellx{border-image-source:url(../ui/cell_g.png)}
.slotx.sel>.cellx{border-image-source:url(../ui/cell_on.png)}
.slotx .item{transition:transform .12s steps(2)}
.slotx:hover .item,.slotx.sel .item{transform:translateY(calc(-2*var(--u)))}
.slotx.soon .item{opacity:.72}
.slotx.sel .cellx::after{content:'';position:absolute;left:50%;top:50%;width:calc(48*var(--u));height:calc(48*var(--u));margin:calc(-24*var(--u)) 0 0 calc(-24*var(--u));
  background:url(../ui/cursor_0.png) 0 0/100% 100% no-repeat;animation:gx-cur .5s steps(1) infinite;pointer-events:none}
@keyframes gx-cur{50%{background-image:url(../ui/cursor_1.png)}}
.cellx .lk{position:absolute;right:calc(-3*var(--u));bottom:calc(-3*var(--u))}
.cellx .gm{position:absolute;left:calc(-3*var(--u));bottom:calc(-3*var(--u))}
.slotx .ptagx{position:relative;z-index:1;margin-top:calc(-5*var(--u))}
.nw{position:absolute;z-index:2;right:calc(-4*var(--u));top:calc(-5*var(--u));animation:gx-bob 1.2s steps(2) infinite}
.slotx .nm{font:700 max(12px,calc(4.2*var(--u)))/1.12 var(--bd);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;padding:0 calc(1*var(--u));margin-top:calc(1.5*var(--u))}
.empty-shelf{margin:calc(10*var(--u)) auto;max-width:calc(150*var(--u));text-align:center;font-weight:700}

.cardx{flex:1;min-height:0;display:flex;flex-direction:column}
.detail{flex:1;min-height:0;display:flex;flex-direction:column;gap:calc(2*var(--u));padding:0 calc(1*var(--u))}
.detail-scroll>*,.reader-in>*,.shrine>*{flex:none}
.detail-scroll{flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:calc(2.5*var(--u));padding-right:calc(1*var(--u))}
.detail .chipx{min-height:calc(9*var(--u));font-size:max(12px,calc(4*var(--u)));padding:0 calc(1.5*var(--u)) 0 0;gap:calc(1*var(--u))}
.detail .g-hero{display:flex;flex-direction:column;gap:calc(3*var(--u));align-items:center}
.detail .pedestal{flex:none;display:grid;place-items:center;width:100%;height:calc(68*var(--u));position:relative}
.detail .pedestal .item{animation:gx-bob 1.6s steps(4) infinite}
@keyframes gx-bob{50%{transform:translateY(calc(-2*var(--u)))}}
.spark{position:absolute;animation:gx-tw 1.2s steps(2) infinite}
.detail .spark.a{left:calc(3*var(--u));top:calc(3*var(--u))}.detail .spark.b{right:calc(3*var(--u));bottom:calc(5*var(--u));animation-delay:.6s}
.detail .pedestal .nw{right:calc(-2*var(--u));top:calc(-4*var(--u))}
@keyframes gx-tw{50%{opacity:0}}
.detail .tagsrow{display:flex;flex-wrap:wrap;gap:calc(1.5*var(--u));justify-content:flex-start}
.detail h2{font:400 max(11px,calc(4*var(--u)))/1.45 var(--px);letter-spacing:0}
.detail h2 small{display:block;font:600 max(13px,calc(4.4*var(--u)))/1.2 var(--bd);color:#4d4d4d;margin-top:calc(1.5*var(--u))}
.detail .blurb{font-weight:600}
.detail .stats li{display:flex;gap:calc(2*var(--u));align-items:flex-start;padding:calc(.5*var(--u)) 0;line-height:1.2}
.detail .meta{display:flex;flex-wrap:wrap;gap:calc(1.5*var(--u)) calc(4*var(--u));font-weight:700;color:#333;align-items:center}
.detail .meta span{display:inline-flex;align-items:center;gap:var(--u)}
.fine{font-size:.88em;color:#333}
.detail .g-act{flex:none;display:flex;flex-direction:column;gap:calc(1.5*var(--u));padding-top:calc(2*var(--u));border-top:var(--u) dashed #ffb8d2}
.detail .none{margin:auto;text-align:center;font-weight:700;color:#333}
/* the price plate: a coin with the tier on it, the price in the game's own letters, and whether it is yours */
.pricex{display:grid;grid-template-columns:auto minmax(0,1fr);gap:0 calc(2.5*var(--u));align-items:center;padding:0 calc(1*var(--u))}
.pricex .coin{grid-row:span 2;display:grid;place-items:center;width:calc(20*var(--u));height:calc(20*var(--u));border:var(--u) solid #8a6a9a;border-radius:50%;background:#fff;box-shadow:inset calc(-1*var(--u)) calc(-1*var(--u)) 0 #ffd9e8}
.pricex.f-celly .coin{background:#fff6a8;box-shadow:inset calc(-1*var(--u)) calc(-1*var(--u)) 0 #ffc83a}
.pricex .amt b{display:block;font:400 max(12px,calc(4.6*var(--u)))/1.2 var(--px)}
.num{font:400 .74em/1 var(--px);letter-spacing:0}
.pricex .amt small{display:block;font:600 max(12px,calc(4*var(--u)))/1.15 var(--bd);color:#333}
.pricex .st{display:flex;align-items:center;gap:calc(1*var(--u));font:700 max(12px,calc(4*var(--u)))/1.15 var(--bd)}
.gx:not(.compact) .only-compact{display:none!important}

/* =====================================================================  THE NOTICE BOARD  */
.gx-board{background:#f7dcb4 url(../ui/cork.png) 0 0/calc(16*var(--u)) calc(16*var(--u));border-style:solid;border-color:transparent;border-width:calc(6*var(--u));
  border-image:url(../ui/wood.png) 6/calc(6*var(--u)) stretch}
.gx-board .gx-plate.f-sign::before,.gx-board .gx-plate.f-sign::after{top:calc(-19*var(--u));height:calc(12*var(--u))}
.board-tabs{display:flex;flex-wrap:wrap;gap:var(--u);margin-left:calc(4*var(--u))}
.notes-scroll{position:relative;flex:1;min-height:0;overflow-y:auto;overflow-x:hidden}
.notes{position:relative;padding:calc(8*var(--u)) calc(6*var(--u)) calc(16*var(--u));
  display:grid;grid-template-columns:repeat(auto-fill,minmax(calc(92*var(--u)),1fr));gap:calc(9*var(--u)) calc(5*var(--u));align-content:start}
.notex{position:relative;display:flex;flex-direction:column;gap:calc(2*var(--u));text-align:left;cursor:pointer;min-height:calc(64*var(--u));
  padding:calc(1*var(--u)) calc(1*var(--u)) 0;transition:transform .12s steps(2);box-shadow:calc(2*var(--u)) calc(2*var(--u)) 0 rgba(138,106,154,.28)}
.notex.n1{margin-top:calc(3*var(--u));left:calc(-1*var(--u))}.notex.n2{margin-top:calc(-2*var(--u));left:calc(2*var(--u))}.notex.n3{margin-top:calc(2*var(--u))}
.notex:hover,.notex:focus-visible{transform:translateY(calc(-2*var(--u)))}
.notex:focus-visible{outline:none}
.notex:focus-visible::after{content:'';position:absolute;inset:calc(-12*var(--u));border:solid transparent;border-width:calc(8*var(--u));border-image:url(../ui/cursor_0.png) 8/calc(8*var(--u)) stretch;animation:gx-curb .5s steps(1) infinite;pointer-events:none}
.pinx{position:absolute;left:50%;top:calc(-14*var(--u));margin-left:calc(-8*var(--u))}
.tapex{display:block;width:calc(24*var(--u));height:calc(8*var(--u));background:0 0/100% 100% no-repeat}
.tapex.up{position:absolute;left:50%;top:calc(-12*var(--u));margin-left:calc(-12*var(--u))}
.notex .nw{right:calc(-6*var(--u));top:calc(-10*var(--u))}
.notex.pinned{grid-column:span 2}
.notex .kind{display:flex;flex-wrap:wrap;align-items:center;gap:calc(1.5*var(--u)) calc(2*var(--u));font:400 max(8px,calc(2.6*var(--u)))/1.5 var(--px);text-transform:uppercase;color:#333}
.notex .kind span{white-space:nowrap}
.notex .kind .tagx{margin-left:auto}.notex .kind .tagx+.tagx{margin-left:0}
.notex h3{font:700 max(16px,calc(6*var(--u)))/1.15 var(--bd)}
.notex.pinned h3{font-size:max(19px,calc(7.4*var(--u)))}
.notex p{font-weight:500;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.notex .sealed{display:flex;align-items:center;gap:calc(2*var(--u));font-weight:700}
.sealx{flex:none;display:block;width:calc(24*var(--us));height:calc(28*var(--us));background:url(../ui/seal_p.png) 0 0/100% 100% no-repeat}
.sealx.y{background-image:url(../ui/seal_y.png)}
.sealx.big{width:calc(24*var(--u));height:calc(28*var(--u))}
.notex .clip{margin-left:auto;display:grid!important;justify-items:center;gap:0!important}
.notex .clip .tapex{margin-bottom:calc(-3*var(--u));position:relative;z-index:1;width:calc(24*var(--us));height:calc(8*var(--us))}
.notex .clip .item{background-color:#fff;outline:var(--u) solid #b9a0c4}
.polar{display:block;width:calc(56*var(--u));height:calc(46*var(--u));border-style:solid;border-color:transparent;border-width:calc(4*var(--u)) calc(4*var(--u)) calc(10*var(--u));
  border-image:url(../ui/photo.png) 4 4 10 4/calc(4*var(--u)) calc(4*var(--u)) calc(10*var(--u)) stretch;background:url(../ui/pic_wip.png) 0 0/100% 100% no-repeat;background-clip:padding-box;background-origin:padding-box}
.polar.s{width:calc(56*var(--us));height:calc(46*var(--us));border-width:calc(4*var(--us)) calc(4*var(--us)) calc(10*var(--us));border-image-width:calc(4*var(--us)) calc(4*var(--us)) calc(10*var(--us))}
.notex .bars{display:flex!important;align-items:flex-end;gap:var(--u)!important;height:calc(16*var(--u))}
.notex .bars i{display:block;width:calc(4*var(--u));height:calc(var(--h)*var(--u));background:#ffb8d2;border:var(--u) solid #8a6a9a}
.notex .bars i:nth-child(2){background:#a9dcff}.notex .bars i:nth-child(3){background:#ffe85e}.notex .bars i:nth-child(4){background:#b7e9c2}
.notex .g-foot{margin-top:auto;display:flex;gap:calc(4*var(--u));font-weight:700;align-items:flex-end;padding-top:calc(1*var(--u))}
.notex .g-foot span{display:inline-flex;align-items:center;gap:var(--u)}

.reader{position:absolute;inset:0;z-index:5;display:grid;place-items:center;padding:calc(10*var(--u)) calc(6*var(--u)) calc(6*var(--u));background:rgba(255,248,236,.66)}
.reader-sheet{position:relative;width:min(100%,calc(250*var(--u)));max-height:100%;display:flex;flex-direction:column;border-width:calc(8*var(--u));animation:gx-pop .18s steps(3) both;box-shadow:calc(3*var(--u)) calc(3*var(--u)) 0 rgba(138,106,154,.3)}
.reader-sheet>.pinx{top:calc(-17*var(--u))}
@keyframes gx-pop{from{transform:translateY(calc(6*var(--u)));opacity:0}to{transform:none;opacity:1}}
.reader-in{overflow-y:auto;min-height:0;display:flex;flex-direction:column;gap:calc(3.5*var(--u));padding:calc(1*var(--u)) calc(3*var(--u)) calc(3*var(--u))}
.reader-top{display:flex;align-items:center;gap:calc(2.5*var(--u))}
.reader-top .g-ava{--k:var(--us);width:calc(32*var(--k));height:calc(32*var(--k));background:url(../ui/avatar.png) 0 0/100% 100% no-repeat;flex:none}
.reader-top .who{font-weight:700;line-height:1.15}.reader-top .who small{display:block;font-weight:600;color:#4d4d4d}
.reader-top .gx-btn{margin-left:auto}
.reader h2{font:700 max(21px,calc(8.4*var(--u)))/1.12 var(--bd)}
.reader .body p{margin-bottom:calc(2.5*var(--u));font-size:1.06em}
.reader .media{display:flex;flex-wrap:wrap;align-items:flex-end;gap:calc(3*var(--u));font-weight:700;color:#4d4d4d}
.reader .media .polar.b{margin-top:calc(3*var(--u));background-position:100% 0;filter:hue-rotate(40deg)}
.reader .sealbox{display:flex;flex-direction:column;align-items:center;gap:calc(3*var(--u));text-align:center;padding:calc(3*var(--u))}
.reader .attach{display:flex;align-items:center;gap:calc(3*var(--u));text-align:left;background:none;width:100%}
.reader .attach .cellx{width:calc(32*var(--us) + 8*var(--u));height:calc(32*var(--us) + 8*var(--u))}
.reader .attach b{display:block}.reader .attach small{color:#333;font-weight:600}
.reader .attach .go{margin-left:auto}
.reader .g-acts{display:flex;flex-wrap:wrap;gap:calc(2*var(--u));align-items:center}
.pollx{display:flex;flex-direction:column;gap:calc(2*var(--u))}
.pollx button{position:relative;display:flex;justify-content:space-between;gap:calc(3*var(--u));text-align:left;background:#fff;border:var(--u) solid #8a6a9a;padding:calc(2.5*var(--u)) calc(3*var(--u));font-weight:700;overflow:hidden}
.pollx button:disabled{cursor:default;color:#111}
.pollx button .barx{position:absolute;left:0;top:0;bottom:0;width:0;background:#ffd9e8;transition:width .5s steps(10)}
.pollx button.mine .barx{background:#ffe85e}
.pollx button span{position:relative}
.pollx .notep{font-size:.9em;font-weight:600;color:#333}
.cms{display:flex;flex-direction:column;gap:calc(2.5*var(--u));border-top:var(--u) dashed #b9a0c4;padding-top:calc(3*var(--u))}
.cmx{display:flex;gap:calc(2.5*var(--u));align-items:flex-start}
.cmx b{margin-right:calc(2*var(--u))}
.cmx p{font-weight:500}
.cmformx{display:flex;gap:calc(2*var(--u));align-items:center}
.cmformx .f-input{flex:1;min-width:0;display:flex}
.cmformx input{flex:1;min-width:0;border:0;outline:0;background:none;font:600 1em/1.2 var(--bd);color:#111;min-height:calc(10*var(--u))}

/* =====================================================================  THE SHRINE: a hall of white marble under an open sky  */
.gx-shrine{background:linear-gradient(#cfeaff 0 18%,#def1ff 18% 34%,#eef8ff 34% 50%,#fff 50% 64%,#fff0f6 64% 80%,#ffe3ee 80%)}
.gx-shrine::after{content:'';position:absolute;left:0;right:0;bottom:0;height:calc(16*var(--u));z-index:0;background:url(../ui/marble.png) 0 0/calc(32*var(--u)) calc(16*var(--u));box-shadow:0 calc(-1*var(--u)) 0 #8a6a9a}
.cloudx{position:absolute;z-index:0;width:calc(48*var(--u));height:calc(16*var(--u));background:url(../ui/cloud.png) 0 0/100% 100% no-repeat;animation:gx-drift 60s linear infinite}
.cloudx.b{top:22%;animation-duration:85s;animation-delay:-30s;opacity:.9}.cloudx.a{top:9%}.cloudx.c{top:38%;animation-duration:110s;animation-delay:-70s}
@keyframes gx-drift{from{left:-20%}to{left:110%}}
.shrine{position:relative;z-index:1;flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column;align-items:center;gap:calc(3*var(--u));padding:0 calc(5*var(--u)) calc(16*var(--u))}
.hall{position:relative;display:flex;align-items:flex-end;justify-content:center;gap:calc(8*var(--u));padding:0 calc(34*var(--u))}
/* a pillar at each end of the hall: a cap, a base, and a shaft that repeats between them */
.hall::before,.hall::after{content:'';position:absolute;top:calc(2*var(--u));bottom:0;width:calc(26*var(--u));
  background:url(../ui/pillar_cap.png) 50% 0/calc(26*var(--u)) calc(14*var(--u)) no-repeat,url(../ui/pillar_base.png) 50% 100%/calc(26*var(--u)) calc(14*var(--u)) no-repeat,url(../ui/pillar.png) 50% 0/calc(16*var(--u)) calc(16*var(--u)) repeat-y}
.hall::before{left:0}.hall::after{right:0}
.path{position:relative;display:flex;flex-direction:column;align-items:center;gap:calc(1*var(--u));width:calc(72*var(--u));cursor:pointer}
.path:focus-visible{outline:none}
.nichex{position:relative;width:calc(64*var(--u));height:calc(84*var(--u));background:url(../ui/niche_p.png) 0 0/100% 100% no-repeat}
.path.heroine .nichex{background-image:url(../ui/niche_y.png)}
.nichex .bust{position:absolute;left:calc(8*var(--u));top:calc(24*var(--u));width:calc(48*var(--u));height:calc(48*var(--u));background:url(../ui/me_girl.png) 0 0/100% 100% no-repeat}
.path.heroine .bust{background-image:url(../ui/me_heroine.png)}
.path.sel .bust{animation:gx-bob 1.6s steps(2) infinite}
.nichex .spark{display:none}.path.sel .nichex .spark{display:block}
.nichex .spark.a{left:calc(-2*var(--u));top:calc(10*var(--u))}.nichex .spark.b{right:calc(-2*var(--u));top:calc(40*var(--u));animation-delay:.6s}
.path.sel::after{content:'';position:absolute;left:calc(-3*var(--u));right:calc(-3*var(--u));top:calc(-3*var(--u));bottom:calc(16*var(--u));
  border:solid transparent;border-width:calc(8*var(--u));border-image:url(../ui/cursor_0.png) 8/calc(8*var(--u)) stretch;animation:gx-curb .5s steps(1) infinite;pointer-events:none}
@keyframes gx-curb{50%{border-image-source:url(../ui/cursor_1.png)}}

.plaque{display:flex;flex-direction:column;align-items:center;gap:calc(1*var(--u));width:100%;border-width:calc(6*var(--u));border-image-width:calc(8*var(--u));text-align:center;margin-top:calc(-11*var(--u));position:relative}
.path .g-name{font:400 max(11px,calc(4.4*var(--u)))/1.2 var(--px)}
.path .g-price{font:400 max(10px,calc(3.6*var(--u)))/1.2 var(--px);display:flex;align-items:baseline;justify-content:center;flex-wrap:wrap;gap:0 calc(2*var(--u))}
.path .g-price small{font:700 max(12px,calc(4.2*var(--u)))/1.2 var(--bd)}
.path .gx-btn{min-height:calc(16*var(--u));font-size:max(9px,calc(3.3*var(--u)));padding:0}
.path.you::before{content:'THIS IS YOU';position:absolute;z-index:2;left:50%;transform:translateX(-50%);top:calc(-5*var(--u));white-space:nowrap;font:400 max(8px,calc(2.6*var(--u)))/1 var(--px);background:#b7e9c2;border:var(--u) solid #8a6a9a;padding:calc(1.5*var(--u)) calc(2*var(--u))}
.altarx{position:relative;flex:none;width:calc(80*var(--u));height:calc(104*var(--u));margin-bottom:calc(16*var(--u))}
.altarx .heartx{position:absolute;inset:0;background:url(../ui/altar.png) 0 0/100% 100% no-repeat}
.altarx .raysx{position:absolute;left:calc(-24*var(--u));top:calc(-33*var(--u));width:calc(128*var(--u));height:calc(128*var(--u));background:url(../ui/rays_0.png) 0 0/100% 100% no-repeat;animation:gx-rays 1.4s steps(1) infinite}
@keyframes gx-rays{50%{background-image:url(../ui/rays_1.png)}}
/* the box under the hall: what the chosen path gives, or the heart answering a question */
.oracle{width:min(100%,calc(300*var(--u)));display:grid;grid-template-columns:minmax(0,1fr);gap:calc(2.5*var(--u));padding:0 calc(2*var(--u))}
.o-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:calc(1*var(--u)) calc(4*var(--u))}
.o-head h2{font:400 max(11px,calc(4*var(--u)))/1.3 var(--px)}
.o-head p{font-weight:700}
.perks{display:grid;grid-template-columns:repeat(auto-fit,minmax(calc(86*var(--u)),1fr));gap:calc(2*var(--u)) calc(3*var(--u))}
.perks li{display:flex;align-items:center;gap:calc(2.5*var(--u));font-weight:600;line-height:1.2}
.perkico{flex:none;display:grid;place-items:center;width:calc(16*var(--us) + 8*var(--u));height:calc(16*var(--us) + 8*var(--u))}
.o-foot{display:flex;align-items:center;gap:calc(4*var(--u))}
.o-foot .fine{flex:1;min-width:0;font-weight:600}
.o-talk{display:flex;gap:calc(3*var(--u));align-items:flex-start;min-height:calc(30*var(--u))}
.o-face{flex:none;width:calc(24*var(--u));height:calc(28*var(--u));background:url(../ui/statue.png) 0 0/100% 100% no-repeat;animation:gx-bob 2.4s steps(4) infinite}
.o-menu{display:grid;grid-template-columns:repeat(auto-fit,minmax(calc(130*var(--u)),1fr));gap:calc(1*var(--u)) calc(3*var(--u))}
.o-q{display:flex;align-items:center;gap:calc(1.5*var(--u));text-align:left;background:none;border:var(--u) solid transparent;padding:calc(1*var(--u)) calc(1.5*var(--u));font-weight:700;line-height:1.15}
.o-q .ico{visibility:hidden}
.o-q:hover .ico,.o-q:focus-visible .ico,.o-q.on .ico,.o-q.back .ico{visibility:visible}
.o-q:hover,.o-q:focus-visible{outline:none;border-color:#8a6a9a;background:#fff6a8}
.o-q.on{background:#ffd9e8}

/* ---- small dialogs inside a screen (download, joined, not open yet) */
.gx-dlg{position:absolute;inset:0;z-index:9;display:grid;place-items:center;padding:calc(6*var(--u));background:rgba(255,240,247,.72)}
.gx-dlg-box{position:relative;width:min(100%,calc(150*var(--u)));display:flex;flex-direction:column;align-items:center;gap:calc(3*var(--u));text-align:center;animation:gx-pop .18s steps(3) both;padding:calc(2*var(--u))}
.gx-dlg-box h3{font:400 max(11px,calc(4*var(--u)))/1.4 var(--px)}
.gx-dlg-box p{font-weight:600}
.gx-dlg-box .g-mono{font:400 max(8px,calc(2.6*var(--u)))/1.5 var(--px);color:#333;word-break:break-all}
.meterx{width:100%;height:calc(8*var(--u));border:var(--u) solid #8a6a9a;background:#fff;padding:var(--u)}
.meterx i{display:block;height:100%;width:0;background:repeating-linear-gradient(90deg,#ff8fbf 0 calc(2*var(--u)),#ffb8d2 calc(2*var(--u)) calc(4*var(--u)))}
.burst{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.burst i{position:absolute;left:50%;top:50%;animation:gx-burst .9s steps(9) both}
@keyframes gx-burst{to{transform:translate(var(--dx),var(--dy));opacity:0}}
.gx-toast{position:absolute;left:50%;bottom:calc(8*var(--u));transform:translateX(-50%);z-index:12;font-weight:700;background:#fff;border:var(--u) solid #8a6a9a;padding:calc(2*var(--u)) calc(4*var(--u));white-space:nowrap;animation:gx-pop .18s steps(3) both}

/* ---- narrower windows and phones: one column. The keeper becomes a strip, filters and the item card become sheets */
.gx.compact .gx-top{padding:calc(2*var(--u)) calc(3*var(--u))}
.gx.compact .gx-plate{border-width:calc(5*var(--u));border-image-width:calc(8*var(--u));min-height:0}
.gx.compact .gx-plate.f-sign::before,.gx.compact .gx-plate.f-sign::after{display:none}
.gx.compact .awningx{height:calc(8*var(--u));background-position:0 100%}
.gx.compact .g-shop{grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);padding:0 calc(3*var(--u)) calc(3*var(--u));gap:calc(2*var(--u))}
.gx.compact .shop-left{flex-direction:row;align-items:flex-end;gap:calc(2*var(--u))}
.gx.compact .keeper{flex-direction:row;align-items:flex-end;flex:1;min-width:0}
.gx.compact .keeper-pic{--k:var(--u);flex:none;margin:0 calc(-2*var(--u)) 0 0}
.gx.compact .counterx{display:none}
.gx.compact .bubble{min-height:0;margin:0;border-width:calc(5*var(--u));border-image-width:calc(8*var(--u))}
.gx.compact .bubble .say{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.gx.compact.short .shop-left{display:none}
.gx.compact .filters-wrap,.gx.compact .shop-right{position:absolute;inset:0;z-index:6;display:none;padding:calc(5*var(--u));background:rgba(255,240,247,.8)}
.gx.compact.show-filters .filters-wrap,.gx.compact.show-detail .shop-right{display:flex}
.gx.compact .filters-wrap>.f,.gx.compact .shop-right>.f{flex:1;min-height:0;display:flex;flex-direction:column;animation:gx-pop .18s steps(3) both}
.gx.compact .gx-sub,.gx.compact .g-count{display:none}
.gx.compact .cabinetx{border-width:calc(4*var(--u));border-image-width:calc(6*var(--u))}
.gx.compact .slotx.sel .cellx::after{display:none}
.gx.compact .slotx.sel>.cellx{border-image-source:url(../ui/cell_p.png)}.gx.compact .slotx.sel.gold>.cellx{border-image-source:url(../ui/cell_y.png)}.gx.compact .slotx.sel.soon>.cellx{border-image-source:url(../ui/cell_g.png)}
.gx.compact .detail .pedestal{width:calc(44*var(--u));height:calc(44*var(--u))}
.gx.compact .detail .pedestal .item{--k:var(--u)}
.gx.compact .notes{padding:calc(8*var(--u)) calc(3*var(--u));grid-template-columns:repeat(auto-fill,minmax(calc(110*var(--u)),1fr))}
.gx.compact .notex{min-height:calc(40*var(--u));left:0}
.gx.compact .notex.pinned{grid-column:auto}
.gx.compact .reader{padding:calc(9*var(--u)) calc(2*var(--u)) calc(2*var(--u))}
.gx.compact .board-tabs{margin-left:0}
.gx.compact.gx-board .gx-top{flex-wrap:wrap}
.gx.compact.gx-board .board-tabs{order:3;width:100%}
.gx.compact .notex .nw{right:calc(-1*var(--u))}
.gx.compact .shrine{padding:0 calc(3*var(--u)) calc(6*var(--u))}
.gx.compact .hall{gap:calc(3*var(--u));padding:calc(4*var(--u)) 0 0;flex-wrap:wrap}
.gx.compact .hall::before,.gx.compact .hall::after{display:none}
.gx.compact .altarx{order:-1;flex-basis:100%;width:100%;height:calc(104*var(--us));margin:0}
.gx.compact .altarx .heartx{left:50%;right:auto;width:calc(80*var(--us));margin-left:calc(-40*var(--us))}
.gx.compact .altarx .raysx{left:50%;top:calc(-33*var(--us));width:calc(128*var(--us));height:calc(128*var(--us));margin-left:calc(-64*var(--us))}
.gx.compact .o-foot{flex-wrap:wrap}
/* a phone on its side: the hall on the left with the heart between the alcoves, the box on the right */
.gx.compact.short .shrine{flex-direction:row;align-items:flex-start;justify-content:center;gap:calc(4*var(--u))}
.gx.compact.short .hall{flex:none;flex-wrap:nowrap}
.gx.compact.short .altarx{order:0;flex-basis:auto;width:calc(80*var(--us));margin-bottom:calc(18*var(--u))}
.gx.compact.short .oracle{flex:1;min-width:0;width:auto}
@media (prefers-reduced-motion:reduce){.gx,.gx.out,.gx *{animation:none!important;transition:none!important}}