:root{--bg:#050812;--ink:#f3ead6;--dim:#a9a595;--straw:#e5cf7f;--earth:#8c6b52;--water:#40caff;--leaf:#7fe0a0;--warn:#ffc9a8;
  --pane:#0a1020d9;--deep:#0a1020f5;--raise:#141d33;--lift:#1b2744;--line:#2a3654;--edge:#ffffff14;
  --serif:"Besley",Georgia,"Times New Roman",serif;--sans:"Schibsted Grotesk",system-ui,-apple-system,"Segoe UI",sans-serif}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{height:100%;margin:0}
body{background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:15px;-webkit-font-smoothing:antialiased;overflow:hidden}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;text-align:left}
p,ul,ol,h1{margin:0;padding:0}
ul,ol{list-style:none}
button:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid var(--water);outline-offset:3px;border-radius:12px}
#ring{position:relative;height:100%;overflow:hidden;background:radial-gradient(90% 70% at 50% 60%,#16203a 0,#050812 70%)}
#land{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none;cursor:grab}
#land:active{cursor:grabbing}
/* one glass for every panel: a dark pane, a hair of light along its top edge */
#top,#dock,#wallet,#rules,#mine,#wallet-menu,#views button,#find{background:var(--pane);box-shadow:0 0 0 1px var(--line),inset 0 1px 0 var(--edge),0 18px 50px #0008;-webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2)}
/* the first sight: the ring from outside, its name, and what the ring says now */
#title{position:absolute;left:0;right:0;top:6vh;text-align:center;pointer-events:none;opacity:0;transition:opacity 1.2s;font-family:var(--serif)}
#title p{font-weight:800;font-size:clamp(54px,9vw,128px);letter-spacing:-.02em;line-height:1;text-shadow:0 6px 40px #000c}
#title span{display:block;margin-top:14px;font-size:clamp(17px,1.7vw,24px);font-weight:600;text-shadow:0 2px 16px #000}
#title i{display:block;margin-top:10px;font-family:var(--sans);font-style:normal;font-size:clamp(13.5px,1.1vw,16px);color:var(--ink);opacity:.86;text-shadow:0 2px 12px #000;min-height:1.3em}
#ring.intro #title,#ring[data-view=out] #title{opacity:1}
#top,#dock,#views,#corner,#hint{transition:opacity .9s,transform .9s}
#ring.intro #top,#ring.intro #dock,#ring.intro #views,#ring.intro #corner,#ring.intro #hint{opacity:0;pointer-events:none}
#ring.intro #dock{transform:translate(-50%,24px)}
#ring[data-view=out] #dock,#ring[data-view=out] #hint{opacity:0;pointer-events:none}
#ring[data-view=out] #mark,#ring[data-view=out] #mine,#ring[data-view=out] #round,#ring[data-view=out] #lake,#ring[data-view=out] #latest,#ring[data-view=out] #chores,#ring[data-view=out] #find{display:none}
/* top left: the name, the count, the round and its water, the last Leys taken */
#top{position:absolute;left:clamp(10px,1.3vw,22px);top:clamp(10px,1.3vw,22px);display:grid;gap:9px;justify-items:start;width:min(286px,72vw);padding:13px 15px 14px;border-radius:22px}
#mark{font-family:var(--serif);font-weight:800;font-size:clamp(24px,2vw,30px);letter-spacing:-.01em;line-height:1}
#count{display:flex;align-items:center;gap:10px;padding:5px 13px 5px 5px;margin-left:-5px;border-radius:999px;transition:background .2s}
#count:hover{background:var(--lift)}
#dial{width:40px;height:40px;flex:none}
#count-say{display:block;line-height:1.1}
#count b{display:block;font-weight:700;font-size:20px}
#of{display:block;font-size:12.5px;color:var(--dim)}
#round{display:grid;gap:6px;width:100%}
#round-say,#water{font-size:13px;line-height:1.3}
#water{color:#bfeaff}
#round-bar{height:5px;border-radius:3px;background:#1d2946;overflow:hidden}
#round-fill{display:block;height:100%;width:0;border-radius:3px;background:linear-gradient(90deg,#2a8fc4,var(--water));transition:width .6s}
#lake{font-size:13px;color:var(--ink);text-decoration:underline;text-underline-offset:3px;text-decoration-color:#40caff88}
#latest{display:grid;gap:6px;width:100%}
#latest p{font-size:12px;color:var(--dim)}
#latest-list,#mine-list{display:flex;flex-wrap:wrap;gap:6px}
#latest-list button,#mine-list button{display:flex;align-items:center;gap:6px;padding:4px 10px 4px 5px;border-radius:999px;font-size:12.5px;background:var(--raise);box-shadow:inset 0 0 0 1px var(--line);transition:background .2s,transform .15s}
#latest-list button:hover,#mine-list button:hover{background:var(--lift);transform:translateY(-1px)}
#latest-list i,#mine-list i{width:15px;height:15px;border-radius:50%;display:block;box-shadow:inset 0 0 0 1px #0004}
#latest-list button.new{animation:arrive .7s ease-out}
@keyframes arrive{from{transform:scale(.6);opacity:0}}
/* the ring's chores: what waits for anyone's hand */
#chores{display:grid;gap:6px;justify-items:start}
#chores:empty{display:none}
#chores button{padding:6px 12px;border-radius:13px;font-size:12.5px;line-height:1.3;background:#10314a;box-shadow:inset 0 0 0 1px #2c6a8f;color:#d9f4ff}
#chores button:hover{background:#15405f}
#chores button[disabled]{opacity:.5;cursor:default}
/* top right: the rules, the wallet, what it holds */
#corner{position:absolute;right:clamp(12px,1.5vw,24px);top:clamp(12px,1.5vw,24px);display:grid;grid-template-columns:auto auto;gap:8px;justify-content:end;justify-items:end;align-items:start}
#rules,#wallet{padding:9px 15px;border-radius:999px;color:var(--ink);font-size:14px;font-weight:500;text-decoration:none;white-space:nowrap;transition:background .2s}
#rules:hover,#wallet:hover{background:var(--lift)}
#wallet.on::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--leaf);margin-right:8px;vertical-align:1px;box-shadow:0 0 8px #7fe0a088}
#wallet b{font-weight:500;color:var(--dim);margin-left:9px;padding-left:9px;border-left:1px solid var(--line)}
#wallet-menu{grid-column:1/-1;display:grid;gap:7px;justify-items:start;padding:12px 14px;border-radius:16px;background:var(--deep);width:250px;z-index:4}
#wallet-who{font-size:12px;color:var(--dim);word-break:break-all}
#wallet-has,#wallet-free{font-size:13.5px}
#wallet-off{margin-top:3px;padding:6px 13px;border-radius:999px;background:var(--raise);box-shadow:inset 0 0 0 1px var(--line);font-size:13.5px}
#wallet-off:hover{background:var(--lift)}
#mine{grid-column:1/-1;display:grid;gap:8px;justify-items:start;width:250px;padding:12px 14px;border-radius:16px}
#mine-say{font-size:13.5px}
#reap{padding:8px 15px;border-radius:999px;background:var(--straw);color:#231a10;font-weight:700;font-size:14px;white-space:nowrap;box-shadow:0 6px 20px #0008;transition:transform .12s,filter .2s}
#reap:hover{filter:brightness(1.07)}
#reap:active{transform:translateY(1px)}
#reap[disabled]{opacity:.5;cursor:default}
/* where to look */
#views{position:absolute;left:clamp(12px,1.5vw,24px);bottom:clamp(14px,2vw,26px);display:grid;gap:9px}
#views button{display:flex;align-items:center;gap:10px;padding:6px 16px 6px 6px;border-radius:999px;font-size:14px;font-weight:500;transition:background .2s}
#views button:hover{background:var(--lift)}
#views svg{width:32px;height:32px;padding:5px;border-radius:50%;background:var(--lift);flex:none}
#find{display:flex;align-items:center;gap:10px;padding:6px 14px 6px 6px;border-radius:999px;font-size:14px;font-weight:500;cursor:text}
#find:focus-within{box-shadow:0 0 0 2px var(--water)}
#find input{width:7.2em;font:inherit;color:inherit;background:none;border:0;outline:0;padding:0}
#find input::placeholder{color:var(--ink);opacity:1}
#find input:focus::placeholder{opacity:.4}
#ring[data-view=ride] #ride svg,#ring[data-view=out] #orbit svg{background:var(--straw);color:#231a10}
#hint{position:absolute;left:50%;transform:translateX(-50%);top:clamp(14px,1.6vw,26px);padding:7px 15px;border-radius:999px;font-size:13px;white-space:nowrap;background:#0a1020b8;pointer-events:none}
/* the Ley in hand: its ground at the left, what it asks and how to pay for it at the right */
#dock{position:absolute;left:50%;bottom:clamp(14px,2vw,26px);transform:translateX(-50%);width:min(820px,calc(100% - 24px));display:grid;grid-template-columns:clamp(150px,17vw,212px) minmax(0,1fr);gap:18px;padding:14px;border-radius:28px;box-shadow:0 0 0 1px var(--line),inset 0 1px 0 var(--edge),0 24px 70px #000a}
#patch{position:relative;align-self:start;display:grid;gap:8px}
#field,#card{width:100%;aspect-ratio:1;border-radius:18px;display:block;background:#6e4e3a;box-shadow:inset 0 0 0 1px #0005,0 8px 24px #0007}
#field{touch-action:none}
#ring[data-drag=on] #field{cursor:ns-resize}
#card{overflow:hidden;position:relative}
#card::before{content:"";position:absolute;inset:0;background:linear-gradient(100deg,#0000 30%,#ffffff12 50%,#0000 70%);background-size:220% 100%;animation:wait 1.4s linear infinite}
#card:has(#shot:not([hidden]))::before{display:none}
@keyframes wait{from{background-position:120% 0}to{background-position:-100% 0}}
#shot{display:block;width:100%;height:100%}
#stamp{position:absolute;left:10px;top:10px;padding:3px 11px;border-radius:999px;background:var(--straw);color:#231a10;font-weight:700;font-size:12.5px;box-shadow:0 4px 14px #0009;animation:arrive .5s ease-out}
#key{display:flex;gap:12px;justify-content:center;font-size:11.5px;color:var(--dim)}
#key li::before{content:"";display:inline-block;width:9px;height:9px;border-radius:3px;margin-right:5px;vertical-align:-1px}
.k-tab::before{background:#5d4131;box-shadow:inset 0 0 0 1px #7a5846}
.k-coin::before{background:#e0ca7b}
.k-todo::before{background:#6e4e3a;box-shadow:inset 0 0 0 1px #b9a48866}
#ring[data-view=look] #key .k-todo{display:none}
#desk{display:grid;gap:10px;align-content:start;min-width:0;padding:3px 4px 2px 0}
#head{position:relative;display:grid;gap:5px;min-width:0}
#back{position:absolute;right:-2px;top:-2px;width:34px;height:34px;border-radius:50%;background:var(--raise);box-shadow:inset 0 0 0 1px var(--line);display:grid;place-items:center;z-index:1;transition:background .2s}
#back:hover{background:var(--lift)}
#back svg{width:16px;height:16px}
#kick{font-size:12.5px;color:var(--dim);min-height:1.2em;padding-right:40px}
#say{font-family:var(--serif);font-weight:600;font-size:clamp(17.5px,1.42vw,21.5px);line-height:1.27;text-wrap:balance;padding-right:8px}
#ring[data-view=look] #say{padding-right:40px}
#traits{display:flex;flex-wrap:wrap;gap:5px}
#traits li{padding:3px 9px;border-radius:999px;font-size:12px;background:var(--raise);box-shadow:inset 0 0 0 1px var(--line);white-space:nowrap}
#traits li b{font-weight:500;color:var(--dim);margin-right:5px}
/* three ways to pay for it: the tab, coin, or both */
#ways{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.way{display:flex;align-items:center;gap:9px;padding:7px 10px 7px 7px;border-radius:16px;background:var(--raise);box-shadow:inset 0 0 0 1px var(--line);min-width:0;transition:background .2s,box-shadow .2s,transform .12s}
.way:hover{background:var(--lift)}
.way:active{transform:translateY(1px)}
.way[aria-checked=true]{background:#232c47;box-shadow:inset 0 0 0 2px var(--straw)}
.way[disabled]{opacity:.45;cursor:default}
.way svg{width:38px;height:38px;flex:none}
.way span{min-width:0;display:block}
.way b{display:block;font-weight:700;font-size:15px;line-height:1.15}
.way i{display:block;font-style:normal;font-size:12.5px;color:var(--dim);line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.way[aria-checked=true] i{color:var(--ink)}
#ring[data-busy=plough] .way[aria-checked=true] .rig{animation:work .5s ease-in-out infinite alternate}
@keyframes work{to{transform:translateX(5px)}}
/* both: how many of the hundred strips are paid with coin */
#mix{display:grid;grid-template-columns:minmax(0,1fr) minmax(110px,1.2fr) minmax(0,1fr);gap:12px;align-items:center}
#mix label{font-size:12.5px;line-height:1.25;color:var(--ink)}
#mix-tab{text-align:right}
#mix-n{-webkit-appearance:none;appearance:none;width:100%;height:26px;margin:0;background:none;cursor:pointer;--at:10%}
#mix-n::-webkit-slider-runnable-track{height:10px;border-radius:5px;background:linear-gradient(90deg,#e0ca7b var(--at),#5d4131 var(--at));box-shadow:inset 0 0 0 1px #0006}
#mix-n::-moz-range-track{height:10px;border-radius:5px;background:linear-gradient(90deg,#e0ca7b var(--at),#5d4131 var(--at));box-shadow:inset 0 0 0 1px #0006}
#mix-n::-webkit-slider-thumb{-webkit-appearance:none;width:24px;height:24px;margin-top:-7px;border-radius:50%;background:var(--ink);border:0;box-shadow:0 2px 10px #000a,inset 0 0 0 5px #231a10}
#mix-n::-moz-range-thumb{width:24px;height:24px;border-radius:50%;background:var(--ink);border:0;box-shadow:0 2px 10px #000a,inset 0 0 0 5px #231a10}
#mix-n[disabled]{opacity:.5;cursor:default}
/* how many: Leys to sow whole, or strips of a Ley of one's own */
#much{display:flex;justify-content:center;align-items:center;gap:6px}
#much button{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:var(--raise);box-shadow:inset 0 0 0 1px var(--line);transition:background .2s}
#much button:hover{background:var(--lift)}
#much button[disabled]{opacity:.35;cursor:default}
#much svg{width:15px;height:15px}
#much b{min-width:8.5em;text-align:center;font-weight:600;font-size:14px}
/* the one thing to press, and what stands beside it */
#tools{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px}
#tools:not(:has(.tool:not([hidden]))){display:none}
.tool{position:relative;display:flex;align-items:center;justify-content:center;padding:9px 14px;border-radius:16px;background:var(--raise);box-shadow:inset 0 0 0 1px var(--line);min-width:0;min-height:52px;text-align:center;text-decoration:none;color:var(--ink);overflow:hidden;transition:background .2s,transform .12s,filter .2s}
.tool:hover{background:var(--lift)}
.tool:active{transform:translateY(1px)}
.tool[disabled]{opacity:.45;cursor:default}
.tool span{position:relative;z-index:1;min-width:0;display:block}
.tool b{display:block;font-weight:700;font-size:15.5px;line-height:1.15;white-space:nowrap}
.tool i{display:block;font-style:normal;font-size:12.5px;color:var(--dim);line-height:1.3;white-space:nowrap}
.tool.lead{background:var(--straw);color:#231a10;box-shadow:0 8px 24px #0007}
.tool.lead:hover{background:var(--straw);filter:brightness(1.07)}
.tool.lead i{color:#4a3a1c}
.tool.lead.on{background:#2a2f44;color:var(--ink);box-shadow:inset 0 0 0 1px var(--straw)}
.tool.lead.on i{color:var(--dim)}
#go-bar{position:absolute;left:0;top:0;bottom:0;width:0;background:linear-gradient(90deg,#5d4131,#8c6b52);transition:width .3s}
#go{gap:11px}
#go svg{position:relative;z-index:1;width:36px;height:36px;flex:none;border-radius:10px;box-shadow:0 2px 8px #0005}
#go .g-coin,#ring[data-way=coin] #go .g-tab{display:none}
#ring[data-way=coin] #go .g-coin{display:block}
#ring[data-busy=plough] #go.on .rig{animation:work .5s ease-in-out infinite alternate}
/* where a fare goes */
#split{display:grid;gap:5px}
#split-bar{display:flex;height:6px;border-radius:3px;overflow:hidden;gap:2px}
#split-bar i{display:block;height:100%}
.s-sown{flex:60;background:#e0ca7b}.s-ploughed{flex:15;background:#8c6b52}.s-water{flex:5;background:var(--water)}.s-maker{flex:20;background:#56607c}
#split-say{font-size:12px;color:var(--dim);line-height:1.35}
/* a write, step by step */
#flow{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;counter-reset:step}
#flow li{position:relative;padding:5px 6px 5px 30px;border-radius:999px;font-size:12.5px;font-weight:500;color:var(--dim);background:var(--raise);box-shadow:inset 0 0 0 1px var(--line);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;counter-increment:step;transition:color .3s,background .3s}
#flow li::before{content:counter(step);position:absolute;left:5px;top:50%;width:19px;height:19px;margin-top:-9.5px;border-radius:50%;display:grid;place-items:center;font-size:11px;font-weight:700;background:var(--lift);color:var(--dim);transition:background .3s,color .3s}
#flow li.done{color:var(--ink)}
#flow li.done::before{content:"";background:var(--leaf) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10.5l3.2 3.2L15 7' fill='none' stroke='%23102018' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/13px no-repeat}
#flow li.now{color:var(--ink);background:#232c47;box-shadow:inset 0 0 0 1px var(--straw)}
#flow li.now::before{background:var(--straw);color:#231a10;animation:beat 1s ease-in-out infinite}
#flow li.bad{color:var(--warn);box-shadow:inset 0 0 0 1px #a5644a}
#flow li.bad::before{content:"";background:#a5644a}
@keyframes beat{50%{transform:scale(1.18)}}
#note{font-size:14px;line-height:1.38;min-height:1.38em}
#note.warn{color:var(--warn)}
#seen{font-size:13px;color:var(--ink);text-underline-offset:3px;justify-self:start}
#ring[data-state=full] #ways,#ring[data-state=full] #tools,#ring[data-state=bare] #ways,#ring[data-state=load] #ways{display:none}
#ring[data-state=bare][data-view=next] #patch,#ring[data-state=load][data-view=next] #patch,#ring[data-state=full][data-view=next] #patch{display:none}
#ring[data-state=bare][data-view=next] #dock,#ring[data-state=load][data-view=next] #dock,#ring[data-state=full][data-view=next] #dock{grid-template-columns:minmax(0,1fr);width:min(600px,calc(100% - 24px));text-align:center;padding:16px 18px}
#ring[data-view=ride] #ways,#ring[data-view=ride] #mix,#ring[data-view=ride] #much,#ring[data-view=ride] #tools,#ring[data-view=ride] #split,#ring[data-view=ride] #mine{display:none}
#glass{position:fixed;z-index:3;max-width:250px;pointer-events:none;background:var(--deep);border-radius:13px;padding:8px 12px;box-shadow:0 12px 34px #000b,0 0 0 1px #33415f}
#glass p{font-size:13.5px;line-height:1.3;font-weight:600}
#glass p span{display:block;color:var(--dim);font-size:12.5px;font-weight:400}
#pick{position:fixed;inset:0;z-index:9;background:#050812e6;display:grid;place-content:center;gap:14px;padding:24px;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
#pick p{font-family:var(--serif);font-size:20px;font-weight:700;text-align:center}
#pick-list{display:grid;gap:10px;min-width:260px}
#pick-list button{display:flex;align-items:center;gap:12px;padding:12px 16px;border-radius:14px;background:var(--raise);box-shadow:inset 0 0 0 1px var(--line);font-size:16px;transition:background .2s}
#pick-list button:hover{background:var(--lift)}
#pick-list img{width:30px;height:30px;border-radius:7px}
@media (prefers-reduced-motion:reduce){*{animation:none!important}#top,#dock,#views,#corner,#hint,#title,#round-fill,#go-bar{transition:none}}
/* a low window: the ground beside a shorter desk */
@media (max-height:760px) and (min-width:821px){
  #dock{grid-template-columns:150px minmax(0,1fr);gap:14px;padding:12px}
  #desk{gap:8px}
  #split,#latest{display:none}
}
/* a phone held upright */
@media (max-width:820px){
  body{font-size:14px}
  #mark{font-size:22px}
  #count{padding:4px 11px 4px 5px}
  #dial{width:30px;height:30px}
  #count b{font-size:16px}
  #of{font-size:11.5px}
  #round-say,#water,#lake{font-size:11.5px}
  #top{padding:9px 11px 10px;border-radius:18px;gap:6px;width:min(196px,50vw)}
  #latest{display:none}
  #chores button{font-size:11.5px;padding:5px 10px}
  #corner{grid-template-columns:auto;gap:6px;right:10px;top:10px}
  #rules{order:2}
  #rules,#wallet{padding:7px 11px;font-size:12.5px}
  #wallet b{display:none}
  #wallet-menu{width:min(214px,56vw);padding:9px 11px;border-radius:14px}
  #mine{width:auto;max-width:44vw;padding:8px 9px;border-radius:14px;gap:6px}
  #mine-list{display:none}
  #mine-say{font-size:12px}
  #reap{padding:7px 11px;font-size:12px}
  #views{left:auto;right:10px;bottom:auto;top:176px;gap:7px}
  #views button{padding:5px}
  #views button span{display:none}
  #find{display:none}
  #hint{display:none}
  #dock{bottom:8px;width:calc(100% - 16px);grid-template-columns:86px minmax(0,1fr);gap:11px;padding:10px;border-radius:22px}
  #field,#card{border-radius:13px}
  #key{display:none}
  #stamp{left:5px;top:5px;font-size:11px;padding:2px 8px}
  #desk{display:contents}
  #head{align-self:center}
  #kick{font-size:11.5px}
  #say{font-size:15.5px;line-height:1.25}
  #ways,#mix,#much,#tools,#split,#flow,#note,#seen,#traits{grid-column:1/-1}
  #dock{row-gap:8px}
  #ways{gap:6px}
  .way{padding:7px 8px 7px;gap:8px;border-radius:14px}
  .way svg{width:28px;height:28px}
  .way b{font-size:13.5px}
  .way i{font-size:11px;white-space:normal;overflow:visible;line-height:1.2}
  #mix{grid-template-columns:minmax(0,1fr) minmax(90px,1fr) minmax(0,1fr);gap:8px}
  #mix label{font-size:11.5px}
  .tool{min-height:48px;padding:8px 10px;border-radius:14px}
  .tool b{font-size:15px;white-space:normal}
  .tool i{white-space:normal}
  #ring[data-view=look] #split{display:none}
  #split-say{font-size:11px}
  #flow li{font-size:11.5px;padding-left:27px}
  #note{font-size:13px}
  #traits li{font-size:11px;padding:2px 8px}
  #glass{display:none}
}