/* Optional theme from own-2017 APK UI assets (see extract_ui_assets.py).
   Paper tape marks the active control; a torn ink band carries the title.
   Loaded only when the site is built with --game-ui. */
:root{--bg:#0f0e0d;--ink:#e9e3d6;--mute:#9b9384;--faint:#625c53;--line:rgba(233,227,214,.1);
  --glass:rgba(19,17,15,.8);--hover:rgba(233,227,214,.06);--on:rgba(233,227,214,.1);--paper-ink:#2b2520}
html,body{font-family:"IDV UI",ui-sans-serif,system-ui,sans-serif;letter-spacing:.01em}

#title{top:12px;left:12px;padding:12px 26px 14px 22px;background:url(ink-band.png) center/100% 100% no-repeat}
#title b{font-family:"IDV Display","IDV UI",sans-serif;font-weight:400;font-size:19px;letter-spacing:.02em;color:#e8e6ea}

/* paper tape on the active choice */
#views button,#menu>button,.seg button,.btn{position:relative;z-index:0}
#views button.on,#menu>button.open,.seg button.on,.btn.primary{background:none;color:var(--paper-ink)}
#views button.on:before,#menu>button.open:before,.seg button.on:before,.btn.primary:before{
  content:"";position:absolute;inset:-3px -5px;z-index:-1;background:url(tape.png) center/100% 100% no-repeat;transform:rotate(-1.2deg);
  filter:drop-shadow(0 1px 1px rgba(0,0,0,.35))}
.seg button.on:before{inset:-2px -4px;transform:rotate(.8deg)}
.btn.primary:before{background-image:url(tape-aged.png);transform:rotate(-.6deg)}
#places button.cur{background:none;color:var(--paper-ink)}
#places button.cur{position:relative;z-index:0}
#places button.cur:before{content:"";position:absolute;inset:0 -2px;z-index:-1;background:url(tape.png) center/100% 100% no-repeat;opacity:.95}
#places button.cur small{color:#5d544a}

.pop h3{font-family:"IDV Display","IDV UI",sans-serif;font-weight:400;font-size:13px;letter-spacing:.03em;color:#bdb4a4}
#caption b{font-family:"IDV Display","IDV UI",sans-serif;font-weight:400;font-size:18px}
.tag{font-family:"IDV Display","IDV UI",sans-serif;letter-spacing:.12em;font-size:13px}
#count{font-family:"IDV Display","IDV UI",sans-serif}
.switch:checked{background:#a99a80}
input[type=range]{accent-color:#c8bba3}

/* swipe/split labels on paper tape; divider as a paper strip with a torn-tape handle */
.tag{color:var(--paper-ink);text-shadow:none;letter-spacing:.06em;font-size:14px;padding:5px 16px 6px;
  background:url(tape.png) center/100% 100% no-repeat;filter:drop-shadow(0 2px 3px rgba(0,0,0,.45));text-transform:none}
#tagL{transform:translateX(-50%) rotate(-1.5deg)}#tagR{transform:translateX(-50%) rotate(1.2deg)}
#divider{background:#d8cfbd;box-shadow:0 0 0 1px rgba(0,0,0,.35),0 0 8px rgba(0,0,0,.4);width:2px}
#divider.h{height:2px!important}
#divider:after{left:-31px;top:50%;width:64px;height:20px;margin:-10px 0 0;border-radius:0;background:url(tape-aged.png) center/100% 100% no-repeat;
  transform:rotate(90deg);box-shadow:none;filter:drop-shadow(0 1px 3px rgba(0,0,0,.6))}
#divider.h:after{left:50%;top:-9px;margin:0 0 0 -32px;transform:rotate(-2deg)}