@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Unbounded:wght@200;500&display=swap');
:root{--ink:#D9E8FC;--muted:#59616b;--line:#38434e;--hover:#4dcaf3;--font-ui:'Inter',sans-serif;--font-display:'Unbounded',sans-serif}
body{background:#000!important;color:var(--ink);font:400 14px var(--font-ui)}
button,input,select{font-family:var(--font-ui)}button{background:#000;border:1px solid var(--line);color:var(--ink);border-radius:10px;transition:background .15s,color .15s,border-color .15s}button:not(:disabled):hover:not(:disabled){background:#151a20;border-color:#677889}button.active{background:var(--ink);color:#151a20;border-color:var(--ink)}button.active:not(:disabled):hover{background:var(--hover);border-color:var(--hover)}
.avatar{width:46px;height:46px;border-radius:50%;background:#D9E8FC;color:#171c22;display:grid;place-items:center;font:500 12px var(--font-display)}
#toolbar{bottom:24px!important;right:48px!important;gap:12px!important;flex-wrap:nowrap!important}#toolbar button{height:46px;padding:0 15px;white-space:nowrap;font-size:14px}#toolbar button img{height:18px;width:18px;vertical-align:middle;margin-right:7px}#toolbar #viewMode{background:var(--ink);color:#151a20;border-color:var(--ink);font-weight:500}#toolbar #viewMode:hover{background:var(--hover)}
#panel{right:48px!important;bottom:87px!important;top:auto!important;width:380px!important;max-height:calc(100vh - 167px)!important;background:#000!important;border:1px solid var(--line)!important;border-radius:8px!important;box-shadow:none!important;backdrop-filter:none!important;padding:20px 22px!important;overflow-y:auto!important;scrollbar-width:thin;scrollbar-color:#4c5765 transparent}
#panel .switch{position:sticky;top:-20px;z-index:3;background:#000;display:grid;grid-template-columns:1fr 1fr;gap:0;margin:-2px 0 20px;padding:0;border-bottom:3px solid var(--line)}#panel .switch button{border:0;border-radius:0;background:transparent!important;color:var(--muted);font:500 14px var(--font-display);padding:8px 4px 13px}#panel .switch button.active{color:var(--ink);box-shadow:0 3px 0 var(--ink)}#panel .switch button:not(:disabled):hover{color:var(--hover)}
#panel h2.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}#panel .group{margin:16px 0!important}#panel .group small{color:var(--muted);font-size:12px;margin-bottom:8px}#panel button.wide{min-height:45px;margin:6px 0;width:100%;font-size:14px}#panel .row{gap:10px}#panel .row button{min-height:45px}#panel input,#panel select{background:#000!important;color:var(--ink)!important;border:1px solid var(--line)!important;border-radius:9px!important;min-height:42px}#panel input:not(:disabled):focus{outline:1px solid var(--ink)}#panel .dims label{color:var(--muted);font-size:12px}#panel .texture-tile{background:#000;border-color:var(--line)}#panel #textureWarning{color:#8d98a7!important}
#roomBar{left:48px!important;bottom:24px!important;max-width:618px!important;min-height:46px;padding:5px 8px!important;background:#191e24!important;border:0!important;border-radius:10px!important;gap:8px!important;overflow-x:visible!important}#roomBar .room-caption{color:var(--ink);font:400 14px var(--font-ui);letter-spacing:0;margin:0 2px 0 6px}#roomTabs{max-width:465px;overflow-x:auto;scrollbar-width:none;min-width:0}#roomTabs::-webkit-scrollbar{display:none}#roomBar button{border-radius:7px;padding:7px 9px;font-size:12px}#roomBar .room-tab{background:#191e24;border:1px solid var(--line);max-width:320px;min-width:0}#roomBar .room-tab.active{background:var(--ink);color:#151a20;border-color:var(--ink)}#roomBar .room-tab>button:first-child{max-width:280px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}#roomBar .room-dots{padding:6px 5px!important}#roomBar #newRoom{font-size:20px;line-height:1;padding:3px 9px}#saveNow{display:none!important}
#toast{left:48px!important;bottom:83px!important;color:var(--ink);font-size:12px;background:#151a20;border-radius:7px;padding:6px 10px;max-width:500px}#toast:empty{display:none}
#returnBox{background:var(--ink)!important;color:#111820!important}
.room-menu{background:#11161c;border:1px solid var(--line);color:var(--ink)}
@media(max-width:1100px){#panel{right:25px!important}#toolbar{right:25px!important}#roomBar{left:25px!important;max-width:calc(100vw - 500px)!important}}
@media(max-width:780px){#panel{right:12px!important;width:min(360px,calc(100vw - 24px))!important;bottom:125px!important;max-height:calc(100vh - 220px)!important}#toolbar{right:12px!important;bottom:12px!important;gap:4px!important}#toolbar button{padding:0 8px;font-size:12px;height:36px}#roomBar{left:12px!important;bottom:57px!important;max-width:calc(100vw - 24px)!important}#toast{left:12px!important;bottom:108px!important}}

/* Shared editor layout and component definitions */
button:not(:disabled):hover:not(:disabled),#panel input:not(:disabled):hover:not(:disabled),#panel select:not(:disabled):hover:not(:disabled),#panel textarea:not(:disabled):hover:not(:disabled),.room-tab:hover,.op-platform-control:hover{border-color:#D9E8FC!important}
#panel .switch button:not(:disabled):hover{color:#D9E8FC}
#roomBar .room-dots{display:grid;place-items:center;min-width:22px;padding:6px!important}
#roomBar .room-dots img{width:3px;height:13px;display:block}
#roomBar .room-dots:hover img{filter:brightness(4)}
#roomBar .room-tab>button:first-child{min-width:0;max-width:280px;text-overflow:ellipsis}
#roomBar #roomTabs{display:flex;max-width:510px;overflow-x:auto;flex:0 1 auto}
#roomBar{width:max-content;max-width:618px!important}
#panel .oldplay-metadata{display:flex;flex-direction:column;gap:9px}
#panel .op-label{font:400 12px Inter,sans-serif;color:#626c78;margin-top:7px}
#panel .op-fields-two{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:10px}
#panel .op-fields-two label{display:flex;flex-direction:column;gap:8px;font-size:12px;color:#626c78;min-width:0}
#panel .op-fields-two input{min-width:0;width:100%;box-sizing:border-box;padding:9px}
#panel .oldplay-metadata select{width:100%;padding:8px}
#panel .oldplay-metadata textarea{background:#000;color:#D9E8FC;border:1px solid #38434e;border-radius:9px;min-height:80px;padding:10px;resize:vertical;font:400 14px Inter,sans-serif}
#panel .op-toggle-row{gap:8px}
#panel .op-toggle-row small{display:block;color:#626c78;font-size:12px;margin-top:5px}
#panel .op-toggle-row button{padding:8px 12px}
#panel .op-platform-control{position:relative;border:1px solid #38434e;border-radius:9px;padding:5px}
#panel #opPlatformSearch{border:0!important;min-height:32px!important;width:100%;padding:5px;box-sizing:border-box}
#panel .op-platform-tags{display:flex;flex-wrap:wrap;gap:5px}
#panel .op-platform-tags button{background:#D9E8FC;color:#161b20;border:0;border-radius:5px;font-size:12px;padding:5px 7px}
#panel .op-platform-options{position:relative;max-height:160px;overflow-y:auto;background:#0c1014;border-top:1px solid #38434e;padding:4px}
#panel .op-platform-options button{display:block;width:100%;text-align:left;border:0;border-radius:3px;padding:8px}
#panel .op-platform-options button:not(:disabled):hover{background:#1d2833}
/* Figma-aligned editor surfaces */
#panel{padding:20px 23px!important}#panel .switch{margin:0 0 21px!important;top:-20px}#panel .switch button{font-size:18px!important;padding:1px 0 14px!important}
#panel .group{margin:0 0 16px!important}#panel .group small,#panel .op-fields-two label{display:block;color:#59616b;font:400 12px var(--font-ui);margin:0 0 8px}#panel input,#panel select,#panel textarea{width:100%;background:#000!important;color:var(--ink)!important;border:1px solid var(--line)!important;border-radius:10px!important;font:400 14px var(--font-ui)!important;padding:10px 12px!important;min-height:46px!important}#panel input:not(:disabled):hover,#panel select:not(:disabled):hover,#panel textarea:not(:disabled):hover{border-color:var(--ink)!important}#panel textarea{min-height:81px!important;resize:vertical}#panel input::placeholder,#panel textarea::placeholder{color:#48515d}
#panel .op-fields-two{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:0 0 16px}#panel .op-fields-two input{margin-top:8px}
#panel .op-toggle-row{margin:0 0 12px;min-height:35px;display:flex;align-items:center;justify-content:space-between;font-size:14px}#panel .op-toggle-row small{color:#59616b}#panel .op-toggle-row button{min-width:40px;min-height:35px;padding:6px 9px}#panel .op-toggle-row button.active{background:var(--ink);color:#10151b}
#panel .op-platform-control{margin:0;min-height:46px;padding:4px 6px;border-radius:10px}#panel #opPlatformSearch{min-height:32px!important;padding:5px!important}#panel .op-platform-tags{padding:0 0 2px}#panel .op-platform-tags:empty{display:none}
#panel .op-section{margin-top:20px!important}#panel .op-section-title{display:flex;align-items:center;gap:10px;font-size:14px;margin:0 0 12px;white-space:nowrap}#panel .op-section-title:after{content:"";height:1px;background:#38434e;flex:1}
#panel .dims{gap:10px}#panel .dims label{font-size:12px;color:#59616b}#panel .dims input{margin-top:7px;min-height:39px!important;padding:8px!important}
#panel .texture-grid{gap:10px}#panel .texture-tile{min-height:74px;border:1px solid var(--line);border-radius:10px;padding:5px}#panel .texture-tile img{background:transparent;height:56px}#panel #textureWarning{color:var(--ink)!important;font-size:12px!important;line-height:1.6;margin:14px 0 0}#panel #textureWarning a{color:#f47f61;text-decoration:underline}
#panel .four button{min-width:0;font-size:14px!important;padding:8px 4px}#panel .op-actions{margin:28px 0 16px}#panel .op-actions button{height:43px!important;margin:5px 0!important}#panel .danger{border-color:#c000a0!important;color:#ef00ce!important}#panel .danger:hover{border-color:#ff5bdf!important}
#panel .oldplay-tips{border-top:1px solid var(--line);padding-top:12px;margin-top:20px;font-size:12px;color:var(--ink)}#panel .oldplay-tips>div{display:flex;justify-content:space-between;align-items:center;gap:5px;margin:8px 0}#panel .oldplay-tips button{border:0!important;background:transparent!important;padding:0 3px;color:#59616b}
#panel #shelfTools .group:first-of-type:not(.hidden){margin-top:0!important}#panel #shelfTools .row button{height:46px}#panel #shelfTools>.wide{height:46px;margin:5px 0!important}#panel #shelfTools .oldplay-tips{margin-top:30px}
#roomBar{max-width:618px!important;overflow:hidden!important}#roomTabs{flex:0 1 auto!important;overflow-x:auto!important;max-width:510px!important}#roomBar .room-tab{max-width:320px!important}#roomBar .room-tab>button:first-child{max-width:280px!important}#roomBar .room-tab:hover{border-color:var(--ink)!important}


/* OLDPLAY INTERACTION SYSTEM — single authoritative state model.
   Outline: transparent + grey border -> white border on hover.
   Filled: pale blue, no visible border -> cyan fill on hover.
   Danger: transparent + magenta border -> #F701DF border on hover.
   Disabled/current shelf length: no hover treatment.
   Keep this block as the only source for interaction state overrides. */
:root { --op-border:#38434e; --op-text:#D9E8FC; --op-filled:#D9E8FC; --op-filled-hover:#4dcaf3; --op-danger-hover:#F701DF; }
/* Outline buttons: never add a translucent background. */
body button:not(#addBox):not(#addFromCatalog):not(.op-mobile-primary):not(.op-button--filled):not(.op-popup-primary):not(.active):not(.danger):not(#viewMode):not(#modeShelves):not(#modeBoxes):not(:disabled):hover,
#panel button:not(#addBox):not(#addFromCatalog):not(.op-mobile-primary):not(.op-button--filled):not(.op-popup-primary):not(.active):not(.danger):not(#modeShelves):not(#modeBoxes):not(:disabled):hover,
#toolbar button:not(#addBox):not(#addFromCatalog):not(.op-mobile-primary):not(.op-button--filled):not(.op-popup-primary):not(.active):not(#viewMode):not(:disabled):hover {
 background:transparent!important; border-color:var(--op-text)!important;
}
/* Filled toggles and selected controls: no visible border in any state. */
body button.active:not(.danger):not(:disabled):not(#modeShelves):not(#modeBoxes),
#panel button.active:not(.danger):not(:disabled):not(#modeShelves):not(#modeBoxes),
#toolbar button.active:not(.danger):not(:disabled):not(#modeShelves):not(#modeBoxes),
#toolbar #viewMode {
 background:var(--op-filled)!important; color:#151a20!important;
 border-color:transparent!important; box-shadow:none!important;
}
body button.active:not(.danger):not(:disabled):not(#modeShelves):not(#modeBoxes):hover,
#panel button.active:not(.danger):not(:disabled):not(#modeShelves):not(#modeBoxes):hover,
#toolbar button.active:not(.danger):not(:disabled):not(#modeShelves):not(#modeBoxes):hover,
#toolbar #viewMode:hover:not(:disabled) {
 background:var(--op-filled-hover)!important; color:#151a20!important;
 border-color:transparent!important; box-shadow:none!important;
}
/* The current shelf width is a displayed selection, not a hover action. */
#panel :is(#shelfNormal,#shelfLong,#roomShelf90,#roomShelf135).active:hover:not(:disabled) {
 background:var(--op-filled)!important; border-color:transparent!important;
 color:#151a20!important; cursor:default;
}
/* Destructive action is always magenta, never white. */
#panel button.danger, #panel button.danger:not(:disabled):hover {
 background:transparent!important; color:#F701DF!important;
 border-color:#c000a0!important;
}
#panel button.danger:not(:disabled):hover { border-color:var(--op-danger-hover)!important; }
/* Camera buttons are outlined when inactive; icons remain legible when active. */
#toolbar #orbit:not(.active), #toolbar #reset:not(.active) { background:transparent!important; }
#toolbar #orbit.active img { filter:brightness(0) saturate(100%)!important; opacity:1!important; visibility:visible!important; }
/* Active room tabs have their own filled state, while three-dot controls stay transparent. */
#roomBar .room-tab.active { background:var(--op-filled)!important; color:#151a20!important; border-color:transparent!important; }
#roomBar .room-tab.active:hover { background:var(--op-filled-hover)!important; border-color:transparent!important; }
#roomBar .room-tab .room-dots, #roomBar .room-tab .room-dots:hover { background:transparent!important; border:0!important; }
/* Never apply global outline hover to icon-only dismissal buttons. */
#panel .oldplay-tips button:not(:disabled):hover { background:transparent!important; border:0!important; color:var(--op-text)!important; }

/* Active room name is inert; the three-dot menu is still interactive. */
#roomBar .room-tab.active, #roomBar .room-tab.active:hover { background:var(--op-filled)!important; color:#151a20!important; border-color:transparent!important; }
#roomBar .room-tab.active > button:first-child, #roomBar .room-tab.active > button:first-child:not(:disabled):hover { background:transparent!important; color:#151a20!important; border-color:transparent!important; cursor:default!important; }
#roomBar .room-tab.active .room-dots:hover { background:transparent!important; border-color:transparent!important; }


/* Shelf / Games are tabs, never generic filled buttons. */
#panel .switch { display:grid; grid-template-columns:1fr 1fr; gap:0!important; border-bottom:0!important; }
#panel .switch > button:is(#modeShelves,#modeBoxes),
#panel .switch > button:is(#modeShelves,#modeBoxes):not(:disabled):hover,
#panel .switch > button:is(#modeShelves,#modeBoxes).active,
#panel .switch > button:is(#modeShelves,#modeBoxes).active:not(:disabled):hover {
  background:transparent!important; background-color:transparent!important;
  background-image:none!important; color:#555d66!important;
  border:0!important; border-bottom:3px solid #555d66!important;
  border-radius:0!important; box-shadow:none!important;
  outline:none!important; transform:none!important;
}
#panel .switch > button:is(#modeShelves,#modeBoxes).active,
#panel .switch > button:is(#modeShelves,#modeBoxes).active:not(:disabled):hover {
  color:#D9E8FC!important; border-bottom-color:#D9E8FC!important;
}
#panel .switch > button:is(#modeShelves,#modeBoxes):not(.active):hover {
  color:#D9E8FC!important; border-bottom-color:#555d66!important;
}

/* v1.2.9: exact supplied icons and contextual condition help */
#newRoom{display:inline-flex!important;align-items:center;justify-content:center}#newRoom img{width:12px;height:12px;display:block;pointer-events:none}
#moveLeft img,#moveRight img{display:block;width:83px;max-width:90%;height:13px;margin:auto;pointer-events:none}#moveLeft .op-arrow-left{transform:scaleX(-1)}
#boxTools .op-condition-control{display:flex;align-items:center;gap:10px;min-width:0}
#boxTools .op-condition-control select{flex:1;min-width:0;width:auto!important}
#boxTools .op-condition-help{position:relative;display:flex;align-items:center;justify-content:center;flex:0 0 18px;width:18px;height:18px;cursor:help}
#boxTools .op-condition-help img{width:18px;height:18px;display:block;transition:filter .15s ease}
#boxTools .op-condition-help:hover img,#boxTools .op-condition-help:focus-within img{filter:brightness(1.8) saturate(1.5)}
#boxTools .op-condition-tooltip{position:absolute;right:-8px;bottom:calc(100% + 14px);min-width:210px;max-width:290px;width:max-content;white-space:normal;background:#000;border:1px solid #38434e;border-radius:12px;color:#D9E8FC;padding:12px 14px;font-size:14px;line-height:1.5;font-weight:400;z-index:100;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .12s ease}
#boxTools .op-condition-help:hover .op-condition-tooltip,#boxTools .op-condition-help:focus-within .op-condition-tooltip{opacity:1;visibility:visible}


/* v1.2.10: condition help INSIDE the select, aligned after selected text */
#boxTools .op-condition-control{position:relative;display:block}
#boxTools .op-condition-control select{display:block;width:100%!important;padding-right:35px!important}
#boxTools .op-condition-help{position:absolute;left:var(--condition-help-left,115px);top:50%;transform:translateY(-50%);z-index:4;cursor:default}
#boxTools .op-condition-help img{filter:none}
#boxTools .op-condition-help:hover img{filter:brightness(1.5) saturate(1.6)}
#boxTools .op-condition-tooltip{bottom:calc(100% + 13px);left:0;right:auto;box-shadow:-37px 32px 25px rgba(0,0,0,.25);cursor:default}
/* Use the provided SVG chevron on every dropdown in the editor. */
#panel select{appearance:none!important;-webkit-appearance:none!important;background-image:url('dreiecke.svg')!important;background-repeat:no-repeat!important;background-position:right 12px center!important;background-size:13px 8px!important;padding-right:36px!important}

/* v1.2.11: condition icon and field hover behave as one control. */
#boxTools .op-condition-control:hover select,
#boxTools .op-condition-control:focus-within select{
  border-color:#D9E8FC!important;
}
#boxTools .op-condition-help{cursor:default!important}
#boxTools .op-condition-help img{display:none!important}
#boxTools .op-condition-help::before{
  content:"";display:block;width:18px;height:18px;
  background:#D9E8FC;
  -webkit-mask:url('icon-frage.svg') center/contain no-repeat;
  mask:url('icon-frage.svg') center/contain no-repeat;
  transition:background-color .15s ease;
}
#boxTools .op-condition-help:hover::before,
#boxTools .op-condition-help:focus-within::before{background:#57d2ff}
/* SVG's visual center is slightly above the CSS box center. */
#panel select{
  background-position:right 12px calc(50% + 1px)!important;
}

/* v1.2.12 — tooltip below the condition field, constrained to the editor width. */
#boxTools .op-condition-tooltip{
  top:calc(100% + 3px)!important;bottom:auto!important;
  left:var(--condition-tip-left,0px)!important;right:auto!important;
  box-sizing:border-box;width:220px!important;min-width:0!important;max-width:calc(100vw - 36px)!important;
  white-space:normal!important;
}

/* v1.2.14 — condition tooltip above help icon, 4px gap and stronger shadow. */
#boxTools .op-condition-tooltip{
  top:auto!important;
  bottom:calc(100% + 4px)!important;
  box-shadow:-18px 20px 36px 5px rgba(0,0,0,.65), 0 8px 22px rgba(0,0,0,.45)!important;
}

/* v1.2.15 — custom OLDPLAY dropdowns, isolated from global button rules */
#panel .op-native-select{position:absolute!important;inset:0;opacity:0!important;pointer-events:none!important;width:100%!important;height:100%!important;min-height:0!important}
#panel .op-select-wrap{position:relative;width:100%;min-width:0}
#panel .op-select-trigger{box-sizing:border-box;display:flex;align-items:center;justify-content:space-between;text-align:left;width:100%;height:46px;min-height:46px;padding:10px 12px!important;background:#000!important;border:1px solid var(--line)!important;border-radius:10px!important;color:var(--ink)!important;font:400 14px var(--font-ui)!important;cursor:pointer}
#panel .op-select-trigger:not(:disabled):hover,#panel .op-select-wrap:focus-within .op-select-trigger,#panel .op-select-wrap.op-open .op-select-trigger{border-color:var(--ink)!important;background:#000!important}
#panel .op-select-trigger::after{content:'';display:block;flex:0 0 13px;width:13px;height:9px;margin-left:12px;background:url('dreiecke.svg') center / contain no-repeat;transform:translateY(1px)}
#panel .op-select-trigger:not(:disabled):focus-visible{outline:1px solid #D9E8FC;outline-offset:2px}
#panel .op-condition-control .op-select-wrap{width:100%}
#panel .op-condition-control .op-select-trigger{padding-right:12px!important}
#panel .op-condition-control .op-condition-help{z-index:6}
.op-dropdown-menu{position:fixed;z-index:99999;box-sizing:border-box;overflow-y:auto;overscroll-behavior:contain;background:#000;border:1px solid #38434e;border-radius:12px;padding:12px 0;box-shadow:-18px 20px 36px 5px rgba(0,0,0,.65),0 8px 22px rgba(0,0,0,.45);scrollbar-width:thin;scrollbar-color:#38434e transparent}
.op-dropdown-menu .op-dropdown-option{position:relative;display:block;width:100%;box-sizing:border-box;text-align:left;border:0!important;border-radius:0!important;background:transparent!important;color:#D9E8FC!important;font:400 14px/26px Inter, sans-serif!important;padding:5px 18px 5px 20px!important;min-height:38px;cursor:pointer;transition:color .15s ease}
.op-dropdown-menu .op-dropdown-option:hover,.op-dropdown-menu .op-dropdown-option:focus-visible{color:#57d2ff!important;background:transparent!important;outline:none}
.op-dropdown-menu .op-dropdown-option[aria-selected="true"]::before{content:'';position:absolute;left:0;top:0;bottom:0;width:2px;background:#D9E8FC}
.op-dropdown-menu .op-dropdown-option[aria-selected="true"]:hover::before{background:#57d2ff}

/* v1.2.17 — unified multi-platform selector */
#panel .op-platform-control{display:flex;flex-wrap:wrap;align-items:center;gap:6px;min-height:46px!important;box-sizing:border-box;padding:6px 10px!important;border:1px solid #38434e!important;background:#000;border-radius:10px!important;transition:border-color .15s}
#panel .op-platform-control:hover,#panel .op-platform-control:focus-within{border-color:#D9E8FC!important}
#panel #opPlatformSearch{flex:1 1 145px;min-width:105px;width:auto!important;height:30px!important;min-height:30px!important;padding:0!important;margin:0!important;border:0!important;border-radius:0!important;outline:none!important;box-shadow:none!important;background:transparent!important;font:400 14px/26px Inter,sans-serif!important}
#panel #opPlatformSearch:focus,#panel #opPlatformSearch:hover{border:0!important;outline:0!important;box-shadow:none!important}
#panel .op-platform-tags{display:contents}
#panel .op-platform-tag{display:inline-flex;align-items:center;gap:7px;max-width:100%;box-sizing:border-box;background:#D9E8FC;color:#151a20;border-radius:6px;padding:5px 8px;font:400 14px/22px Inter,sans-serif;white-space:nowrap;transition:background .15s}
#panel .op-platform-tag:hover{background:#57d2ff}
#panel .op-platform-tag button{background:transparent!important;border:0!important;border-radius:0!important;padding:0!important;min-width:12px;color:inherit!important;font:400 18px/18px Inter,sans-serif!important}
#panel .op-platform-tag button:not(:disabled):hover{background:transparent!important;color:inherit!important;border:0!important}
#panel #opPlatformOptions{display:none!important}
.op-platform-menu{position:fixed;z-index:100002;overflow:auto;box-sizing:border-box;background:#000;border:1px solid #38434e;border-radius:12px;padding:8px 0;box-shadow:-18px 20px 36px 5px rgba(0,0,0,.65),0 8px 22px rgba(0,0,0,.45);scrollbar-width:thin;scrollbar-color:#38434e transparent}
.op-platform-menu .op-platform-option{display:block;box-sizing:border-box;width:100%;min-height:36px;padding:5px 18px!important;text-align:left;border:0!important;border-radius:0!important;background:transparent!important;color:#D9E8FC!important;font:400 14px/26px Inter,sans-serif!important;cursor:pointer}
.op-platform-menu .op-platform-option:hover,.op-platform-menu .op-platform-option:focus-visible{background:transparent!important;color:#57d2ff!important;outline:none!important}


/* v1.2.19 — platform suggestion placeholder and curated region dropdown */
.op-platform-menu .op-platform-empty,.op-region-menu .op-region-empty{padding:8px 18px;color:#7d8792;font:400 14px/26px Inter,sans-serif}
#panel #opCountry:focus{outline:none!important;box-shadow:none!important}
.op-region-menu .op-dropdown-option{font:400 14px/26px Inter,sans-serif!important}

/* v1.2.20 — dimensions, advice, selected position and shared close icon */
#panel .dims input[type="number"]{-moz-appearance:textfield!important;appearance:textfield!important;}
#panel .dims input[type="number"]::-webkit-inner-spin-button,
#panel .dims input[type="number"]::-webkit-outer-spin-button{-webkit-appearance:none!important;margin:0!important;display:none!important;}
#panel #textureWarning a:hover{color:#FCBF86!important;}
#panel :is(#boxTools [data-side],#roomOrientation [data-room-side]).active:hover:not(:disabled){background:#D9E8FC!important;color:#151a20!important;border-color:transparent!important;box-shadow:none!important;cursor:default!important;}
#panel .oldplay-tips button{display:inline-flex!important;align-items:center;justify-content:center;min-width:14px;min-height:14px;padding:2px!important;}
#panel .oldplay-tips button img{display:block;width:9px;height:9px;}
#panel .oldplay-tips button:not(:disabled):hover img{filter:brightness(0) saturate(100%) invert(91%) sepia(9%) saturate(454%) hue-rotate(181deg) brightness(104%);}
#panel .op-platform-tag button{display:inline-flex!important;align-items:center;justify-content:center;width:12px;height:14px;min-width:12px!important;}
#panel .op-platform-tag button img{display:block;width:9px;height:9px;filter:brightness(0) saturate(100%);}


/* v1.2.21 — consistent inert/disabled controls.
   Selected box positions are not hoverable; disabled arrows never react. */
:root{--op-disabled-opacity:.4}
button:disabled, input:disabled, select:disabled, textarea:disabled,
[aria-disabled="true"]{opacity:var(--op-disabled-opacity)!important;cursor:default!important;}
button:disabled, [aria-disabled="true"]{pointer-events:none!important;}
/* Match the actual position buttons regardless of their container's nesting. */
#panel #boxTools button[data-side].active,
#panel #boxTools button[data-side].active:not(:disabled):hover,
#panel #boxTools button[data-side].active:not(:disabled):focus-visible,
#panel #roomOrientation button[data-room-side].active,
#panel #roomOrientation button[data-room-side].active:not(:disabled):hover{
  background:#D9E8FC!important;color:#151a20!important;
  border-color:transparent!important;box-shadow:none!important;cursor:default!important;
}
/* Prevent the generic selected-button cyan hover from taking precedence. */
#panel #boxTools .four button.active:not(:disabled):hover,
#panel #boxTools .four button.active:active{background:#D9E8FC!important;}
#panel #moveLeft:disabled,#panel #moveRight:disabled,
#panel #moveLeft:disabled:hover,#panel #moveRight:disabled:hover{
  opacity:.4!important;cursor:default!important;pointer-events:none!important;
  background:transparent!important;border-color:#38434e!important;box-shadow:none!important;
}

/* v1.2.22 — position is a selected state, not a hover action.
   Match the actual .row.four buttons and override global active:hover. */
html body #panel #boxTools .row.four > button[data-side].active:is(:hover,:focus,:focus-visible,:active),
html body #panel #boxTools .row.four > button[data-side].active {
  background-color:#D9E8FC!important;
  background:#D9E8FC!important;
  color:#151a20!important;
  border-color:transparent!important;
  box-shadow:none!important;
  cursor:default!important;
}

/* v1.2.23 — selected Position buttons never use the filled-button hover colour.
   Override the shared hover token on this specific control, as well as its
   final background, to cover both global hover selectors. */
#panel #boxTools button[data-side].active {
  --op-filled-hover:#D9E8FC;
  background:#D9E8FC!important;
  background-color:#D9E8FC!important;
  cursor:default!important;
}
#panel #boxTools button[data-side].active:not(:disabled):hover:not(:disabled),
#panel #boxTools button[data-side].active:not(:disabled):focus:not(:disabled),
#panel #boxTools button[data-side].active:active:not(:disabled) {
  --op-filled-hover:#D9E8FC;
  background:#D9E8FC!important;
  background-color:#D9E8FC!important;
  color:#151a20!important;
  border-color:transparent!important;
  cursor:default!important;
}

/* v1.2.24 — shelf length selections must not change on hover.
   Override the shared filled hover token as well as the background. */
#panel :is(#shelfNormal,#shelfLong,#roomShelf90,#roomShelf135).active {
  --op-filled-hover:#D9E8FC;
  background:#D9E8FC!important;
  background-color:#D9E8FC!important;
  cursor:default!important;
}
#panel :is(#shelfNormal,#shelfLong,#roomShelf90,#roomShelf135).active:is(:hover,:focus,:focus-visible,:active):not(:disabled) {
  --op-filled-hover:#D9E8FC;
  background:#D9E8FC!important;
  background-color:#D9E8FC!important;
  color:#151a20!important;
  border-color:transparent!important;
  box-shadow:none!important;
  cursor:default!important;
}

/* v1.2.26 themed-room controls, based on stable v1.2.24 */
#roomShelfTools>.hidden{display:none!important}
#roomShelfTools .op-room-tips{border-top:1px solid #36414d;margin-top:24px;padding-top:12px;font-size:12px;color:#D9E8FC}
#roomShelfTools .op-room-tips>div{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:8px 0}
#roomShelfTools .op-room-tips button{border:0;background:none!important;padding:2px;cursor:pointer}
#roomShelfTools .op-room-tips img{width:10px;height:10px;display:block;opacity:.7}
#roomCatalog{position:relative;width:100%}
#roomCatalogTrigger{width:100%;min-height:44px;padding:10px 14px;display:flex;justify-content:space-between;align-items:center;text-align:left}
#roomCatalogTrigger span{font-size:20px;font-weight:400}
#roomCatalogOptions{position:absolute;z-index:120;top:calc(100% + 4px);left:0;width:100%;box-sizing:border-box;max-height:260px;overflow:auto;background:#000;border:1px solid #38434e;border-radius:12px;box-shadow:-37px 32px 25px rgba(0,0,0,.45);padding:8px 0}
#roomCatalogOptions.hidden{display:none!important}
#roomCatalogOptions .op-room-catalog-item{width:100%;border:0;border-radius:0;background:transparent;color:#D9E8FC;font-family:Inter,sans-serif;font-size:14px;line-height:26px;font-weight:400;text-align:left;padding:6px 15px;position:relative}
#roomCatalogOptions .op-room-catalog-item:hover:not(:disabled){color:#57d2ff;background:transparent}
#roomCatalogOptions .op-room-catalog-item.op-room-selected:before{content:'';position:absolute;left:4px;top:6px;bottom:6px;width:2px;background:#D9E8FC}
#roomCatalogOptions .op-room-catalog-item.op-room-already{opacity:1!important;color:#59616b!important;cursor:default!important}
#roomCatalogOptions .op-room-catalog-item.op-room-already:after{content:'Added';float:right;color:#151a20;background:#D9E8FC;padding:0 7px;border-radius:4px;font-size:12px}
#panel #roomOrientation button[data-room-side].active:is(:hover,:focus,:focus-visible,:active):not(:disabled){background:#D9E8FC!important;color:#151a20!important;border-color:transparent!important;--op-filled-hover:#D9E8FC!important;cursor:default!important}

/* v1.2.27 — themed room: one catalog selector and matching arrow buttons */
#panel #catalogSelect{display:none!important}
#roomCatalogTrigger .op-room-chevron{display:block;flex:0 0 13px;width:13px;height:9px;background:url('dreiecke.svg') center / contain no-repeat;transform:translateY(1px);font-size:0}
#roomBoxTools #roomMoveLeft,#roomBoxTools #roomMoveRight{min-width:0;flex:1;height:46px;display:flex;align-items:center;justify-content:center}
#roomBoxTools #roomMoveLeft img,#roomBoxTools #roomMoveRight img{width:80%;max-width:110px;height:20px;object-fit:contain}
#roomBoxTools #roomMoveLeft img{transform:scaleX(-1)}
#roomBoxTools #roomMoveLeft:disabled,#roomBoxTools #roomMoveRight:disabled{opacity:.4!important;cursor:default!important}

/* v1.2.28 — same room game controls, scoped to Games tab */
#roomBoxTools #roomMoveLeft img.op-arrow-left{transform:scaleX(-1)!important;transform-origin:center center!important;}
#roomBoxTools.hidden{display:none!important;}
#roomShelfTools.hidden{display:none!important;}

/* v1.2.29 — consistent minimum text size and shared tip dismissal hover */
#panel .oldplay-tips,
#panel #roomShelfTools .op-room-tips {font-size:12px!important;}
#panel #roomShelfTools .op-room-tips button {
  display:inline-flex!important;align-items:center;justify-content:center;
  min-width:14px;min-height:14px;padding:2px!important;
  background:transparent!important;border:0!important;cursor:pointer;
}
#panel #roomShelfTools .op-room-tips button img {width:9px;height:9px;opacity:.7;display:block;}
#panel #roomShelfTools .op-room-tips button:not(:disabled):hover img {
  opacity:1;filter:brightness(0) saturate(100%) invert(91%) sepia(9%) saturate(454%) hue-rotate(181deg) brightness(104%);
}
/* Plus is as tall as the room tabs, including their border. */
#roomBar #newRoom {
  box-sizing:border-box!important;align-self:stretch!important;
  height:auto!important;min-height:0!important;
  padding:0 12px!important;display:inline-flex!important;
  align-items:center!important;justify-content:center!important;
}

/* v1.2.30 — room add control matches room-tab height, without dark fill. */
#roomBar #newRoom,
#roomBar #newRoom:hover,
#roomBar #newRoom:focus-visible {
  box-sizing:border-box!important;
  align-self:center!important;
  flex:0 0 auto!important;
  height:40px!important;
  min-height:40px!important;
  max-height:40px!important;
  padding:0 12px!important;
  background:transparent!important;
  border:1px solid #38434e!important;
  border-radius:10px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
}
#roomBar #newRoom:hover {border-color:#D9E8FC!important;}

/* v1.2.32 — consistent room plus size and sticky editor tabs */
#roomBar #newRoom,
#roomBar #newRoom:hover,
#roomBar #newRoom:focus-visible {
  box-sizing:border-box!important;
  height:30px!important;
  min-height:30px!important;
  max-height:30px!important;
  padding:0 9px!important;
  background:transparent!important;
}

/* v1.2.33 — remove the artificial 20px gap above the sticky switch.
   The panel already supplies its own 20px padding; do not duplicate it. */
#panel .switch {
  top:0!important;
  margin-top:0!important;
  padding-top:0!important;
  background:#000!important;
}

/* v1.2.34 — paint the panel padding above the sticky tabs without moving them. */
#panel .switch::before {
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:-20px;
  height:20px;
  background:#000;
  pointer-events:none;
}

/* v1.2.35 — sticky tabs must cover the Condition help icon during scrolling.
   The help has z-index:6; the sticky header previously had only z-index:3. */
#panel .switch { z-index:30!important; }

/* v1.2.39 — overflow navigation for the room tabs */
#roomBar #roomTabsViewport{position:relative;display:flex;flex:0 1 auto;min-width:0;max-width:510px;align-items:center;isolation:isolate}
#roomBar #roomTabsViewport #roomTabs{display:flex;min-width:0;max-width:none!important;width:100%;flex:1 1 auto!important;overflow-x:auto!important;scrollbar-width:none;scroll-behavior:smooth;scroll-padding-inline:32px}
#roomBar #roomTabsViewport #roomTabs::-webkit-scrollbar{display:none}
#roomBar #roomTabsViewport::before,#roomBar #roomTabsViewport::after{content:"";position:absolute;top:0;bottom:0;width:36px;z-index:2;pointer-events:none;opacity:0;transition:opacity .15s}
#roomBar #roomTabsViewport::before{left:0;background:linear-gradient(90deg,#191e24 0%,rgba(25,30,36,0) 100%)}
#roomBar #roomTabsViewport::after{right:0;background:linear-gradient(270deg,#191e24 0%,rgba(25,30,36,0) 100%)}
#roomBar #roomTabsViewport.can-prev::before,#roomBar #roomTabsViewport.can-next::after{opacity:1}
#roomBar .room-scroll-arrow{position:absolute;top:50%;transform:translateY(-50%);width:24px;height:30px!important;min-height:30px!important;z-index:3;display:none;align-items:center;justify-content:center;padding:0!important;border:0!important;background:transparent!important;box-shadow:none!important;cursor:pointer}
#roomBar .room-scroll-prev{left:0}#roomBar .room-scroll-next{right:0}
#roomBar .room-scroll-arrow img{width:12px;height:12px;object-fit:contain;filter:brightness(0) saturate(100%) invert(88%) sepia(11%) saturate(458%) hue-rotate(181deg)}
#roomBar .room-scroll-prev img{transform:rotate(90deg)}#roomBar .room-scroll-next img{transform:rotate(-90deg)}
#roomBar #roomTabsViewport.can-prev .room-scroll-prev,#roomBar #roomTabsViewport.can-next .room-scroll-next{display:flex}
#roomBar .room-scroll-arrow:hover img{filter:brightness(0) saturate(100%) invert(75%) sepia(42%) saturate(1054%) hue-rotate(157deg)}

/* v1.2.40 — Texture cards: image/action states, captions outside */
#panel .texture-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px 10px}
#panel .op-texture-cell{min-width:0;text-align:center}
#panel .texture-tile{position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden;aspect-ratio:1.2/1;min-height:0!important;width:100%;padding:5px!important;border:1px solid var(--line);border-radius:10px;background:#000;box-sizing:border-box}
#panel .texture-tile:has(.op-texture-upload):hover,#panel .texture-tile.has-image:hover{border-color:#D9E8FC!important}
#panel .texture-tile img{display:block;max-width:100%;max-height:100%;width:auto;height:auto!important;object-fit:contain;background:none!important;border-radius:0;margin:0!important}
#panel .op-texture-caption{font:400 12px/18px Inter,sans-serif;color:var(--muted);padding-top:6px}
#panel .texture-tile button{font:400 12px/18px Inter,sans-serif!important;color:#D9E8FC!important;border:0!important;background:transparent!important;padding:0!important;margin:0!important;min-height:0!important;border-radius:0!important;cursor:pointer}
#panel .texture-tile button:not(:disabled):hover{color:#4DCAF3!important}
#panel .op-texture-upload{display:none}
#panel .texture-tile:hover .op-texture-upload{display:block}
#panel .op-texture-actions{position:absolute;inset:0;background:#000a;display:none;flex-direction:column;align-items:center;justify-content:center;padding:8px}
#panel .texture-tile.has-image:hover .op-texture-actions{display:flex}
#panel .op-texture-actions button{flex:1;width:100%;display:flex;align-items:center;justify-content:center}
#panel .op-texture-actions button+button{border-top:1px solid #D9E8FC!important}
#panel .op-texture-progress,#panel .op-texture-error{position:absolute;inset:0;background:#000d;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;font:400 12px/18px Inter,sans-serif;color:#D9E8FC}
#panel .op-texture-track{width:72%;height:2px;background:var(--line)}
#panel .op-texture-track>div{height:100%;background:#D9E8FC}
#panel .op-texture-error>span{color:#F701DF}
#panel .op-texture-error button{border-top:1px solid #D9E8FC!important;width:72%;padding-top:7px!important}

/* v1.2.41 — room context menus */
.room-menu.op-room-menu{box-sizing:border-box;min-width:0;width:max-content;max-width:240px;padding:10px 12px;background:#000;border:1px solid var(--line);border-radius:10px;box-shadow:-18px 16px 25px rgba(0,0,0,.35);gap:0}
.room-menu.op-room-menu button{display:block;width:100%;box-sizing:border-box;padding:5px 0!important;text-align:left;color:var(--ink)!important;background:transparent!important;border:0!important;border-radius:0!important;font:400 14px/26px var(--font-ui)!important;white-space:nowrap;cursor:pointer}
.room-menu.op-room-menu button:not(:disabled):hover:not(:disabled){color:#4DCAF3!important;background:transparent!important}
.room-menu.op-room-menu button.op-menu-divider{border-top:1px solid var(--line)!important;margin-top:5px;padding-top:9px!important}
.room-menu.op-room-menu button.op-menu-danger{color:#F701DF!important}
.room-menu.op-room-menu button.op-menu-danger:not(:disabled):hover:not(:disabled){color:#FF57EF!important}
.room-menu.op-room-menu button:disabled{opacity:.4!important;cursor:default!important;pointer-events:none!important}
/* On the active Main tab, darken the three dots on hover. */
#roomBar .room-tab.active .room-dots:hover img{filter:brightness(0)!important}

/* v1.2.42 — decorative menu separators, never hoverable */
.room-menu.op-room-menu>.op-menu-divider{display:block;flex:0 0 auto;width:100%;height:1px;box-sizing:border-box;background:var(--line);border:0!important;margin:7px 0!important;padding:0!important;pointer-events:none!important;transition:none!important;opacity:1!important}
.room-menu.op-room-menu>.op-menu-divider:hover{background:var(--line)!important;opacity:1!important}

/* v1.2.46 — inspected box controls */
#opInspectDim{position:fixed;inset:0;z-index:1;pointer-events:none;background:rgba(0,0,0,.44)}
#opInspectCard{position:fixed;left:11.25%;top:21%;width:77.5%;height:63%;z-index:3;background:linear-gradient(125deg,#252937 0%,#161823 62%,#0b0d15 100%);border-radius:10px;pointer-events:none;box-shadow:0 22px 80px #0008;overflow:hidden}
#opInspectCard .op-inspect-card-content{position:absolute;left:51%;top:0;width:44%;height:100%;box-sizing:border-box;overflow-y:auto;overscroll-behavior:contain;padding:60px 12px 48px 0;display:flex;flex-direction:column;gap:0;color:#D9E8FC;font:400 18px/1.75 Inter,sans-serif;scrollbar-color:#444c59 transparent;scrollbar-width:thin;pointer-events:auto}
#opInspectCard .op-inspect-title{font:500 18px/1.5 Unbounded,sans-serif;overflow-wrap:anywhere}
#opInspectCard .op-inspect-card-heading{display:flex;justify-content:space-between;gap:20px;align-items:flex-start}
#opInspectCard .op-inspect-platforms,#opInspectCard .op-inspect-yearcountry{font:200 18px/1.5 Unbounded,sans-serif}
#opInspectCard .op-inspect-yearcountry{text-align:right;flex:none;color:#9299a9}
#opInspectCard .op-inspect-badges{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:14px}
#opInspectCard .op-inspect-author{display:flex;align-items:center;gap:10px;margin-top:30px;font:500 14px/1.4 Inter,sans-serif}
#opInspectCard .op-inspect-author img{width:32px;height:32px;object-fit:cover;border-radius:50%}
#opInspectCard .op-inspect-description{margin-top:20px;white-space:pre-wrap;overflow-wrap:anywhere;flex:0 0 auto}
#opInspectCard .op-inspect-reactions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:auto;padding-top:38px;min-height:48px}
#opInspectCard .op-reaction-pill,#opInspectCard .op-reaction-empty{font:500 14px/1 Inter,sans-serif;display:inline-flex;align-items:center;justify-content:center;gap:8px;height:46px;min-width:46px;padding:0 13px;background:transparent;color:#D9E8FC;border:1px solid #3c4655;border-radius:28px;cursor:pointer;transition:transform .16s,border-color .16s}
#opInspectCard .op-reaction-pill:hover,#opInspectCard .op-reaction-empty:hover{transform:scale(1.1);border-color:#D9E8FC}
#opInspectCard .op-reaction-emoji{font-size:22px;line-height:1}
#opInspectCard .op-reaction-empty{font-size:30px;padding:0;width:54px;height:54px}
:is(#opInspectCard,#opInspectControls) .op-condition-badge{display:inline-flex;align-items:center;gap:9px;border:1px solid transparent;border-radius:22px;padding:6px 12px;font:500 14px/1.2 Unbounded,sans-serif;position:relative;background:linear-gradient(transparent,transparent) padding-box,var(--condition-gradient) border-box}
:is(#opInspectCard,#opInspectControls) .op-condition-badge[data-condition="mint"]{--condition-gradient:linear-gradient(90deg,#30e3cf,#30e3cf)}
:is(#opInspectCard,#opInspectControls) .op-condition-badge[data-condition="near-mint"]{--condition-gradient:linear-gradient(90deg,#30e3cf,#d674b8)}
:is(#opInspectCard,#opInspectControls) .op-condition-badge[data-condition="very-good"]{--condition-gradient:linear-gradient(90deg,#df5bb4,#ffd17a)}
:is(#opInspectCard,#opInspectControls) .op-condition-badge[data-condition="good"]{--condition-gradient:linear-gradient(90deg,#ffe477,#ffe477)}
:is(#opInspectCard,#opInspectControls) .op-condition-badge[data-condition="fair"]{--condition-gradient:linear-gradient(90deg,#ffb64f,#ff3b65)}
:is(#opInspectCard,#opInspectControls) .op-condition-badge[data-condition="poor"]{--condition-gradient:linear-gradient(90deg,#ff0752,#ff0752)}
:is(#opInspectCard,#opInspectControls) .op-condition-dots{display:inline-flex;gap:6px}
:is(#opInspectCard,#opInspectControls) .op-condition-dots i{width:6px;height:6px;border-radius:50%;background:#59616b}
:is(#opInspectCard,#opInspectControls) .op-condition-dots i.active{background:#D9E8FC}
:is(#opInspectCard,#opInspectControls) .op-box-chip{display:inline-flex;align-items:center;border-radius:22px;padding:7px 14px;font:500 14px/1.2 Unbounded,sans-serif;white-space:nowrap}
:is(#opInspectCard,#opInspectControls) .op-box-chip--sealed{background:linear-gradient(110deg,#5af5df,#b05eff);color:#121821}
:is(#opInspectCard,#opInspectControls) .op-box-chip--graded{background:linear-gradient(110deg,#fff66b,#ff8a23);color:#121821}
:is(#opInspectCard,#opInspectControls) .op-box-chip--outline{border:1px solid #3c4655;color:#D9E8FC}
#opEmojiRain{position:fixed;inset:0;pointer-events:none;z-index:20;overflow:hidden}
#opEmojiRain .op-emoji-drop{position:absolute;top:-12%;opacity:0;animation:op-emoji-fall 2s ease-in forwards;will-change:transform,opacity}
@keyframes op-emoji-fall{0%{transform:translateY(-30px) rotate(-20deg);opacity:0}12%{opacity:1}80%{opacity:1}100%{transform:translateY(115vh) rotate(70deg);opacity:0}}
#opInspectLike{position:relative}
#opInspectLike .op-quick-like-count{position:absolute;top:100%;left:50%;transform:translateX(-50%);font:500 14px/1.3 Inter,sans-serif;color:#D9E8FC;margin-top:5px}


#opInspectControls{position:fixed;inset:0;z-index:6;pointer-events:none}
#opInspectControls button{pointer-events:auto}
#opInspectControls .op-inspect-circle{position:absolute;width:68px;height:68px;display:flex;align-items:center;justify-content:center;padding:0;border:1px solid #394550;border-radius:50%;background:transparent;color:#D9E8FC;transition:border-color .15s,color .15s,background .15s}
#opInspectControls .op-inspect-circle:hover:not(:disabled){border-color:#D9E8FC;background:transparent}
#opInspectControls .op-inspect-circle:disabled{opacity:.4;cursor:default}
#opInspectControls .op-inspect-circle img{width:24px;height:24px;object-fit:contain;pointer-events:none}
#opInspectPrev,#opInspectNext{top:50%;transform:translateY(-50%)}
#opInspectPrev{left:3%}
#opInspectNext{right:3%}
#opInspectPrev img{transform:rotate(0deg)}
#opInspectNext img{transform:rotate(180deg)}
#opInspectControls .op-inspect-actions{position:absolute;right:3%;top:18%;display:flex;flex-direction:column;gap:16px}
#opInspectControls .op-inspect-actions .op-inspect-circle{position:relative}
#opInspectLike[aria-pressed="true"]{border-color:#f701df!important}
#opInspectLike[aria-pressed="true"] img{filter:brightness(0) saturate(100%) invert(27%) sepia(98%) saturate(6112%) hue-rotate(291deg)}
#opInspectInfo[aria-expanded="true"]{border-color:#D9E8FC!important}
#returnBox.hidden{display:none!important}
@media(max-width:800px){#opInspectControls .op-inspect-circle{width:48px;height:48px}#opInspectPrev{left:10px}#opInspectNext{right:10px}#opInspectControls .op-inspect-actions{right:10px;top:15%}#opInspectCard{left:8%;width:84%}#opInspectCard .op-inspect-card-content{font-size:18px;padding-top:24px;left:48%;width:48%}}

/* v1.2.49 — silhouette shadow projected onto the details card */
#opInspectShadow{position:fixed;inset:0;width:100vw;height:100vh;z-index:4;pointer-events:none;background:transparent;}

/* v1.2.51 — navigation arrows: white filled, correctly oriented, separate from actions */
#opInspectControls #opInspectPrev,#opInspectControls #opInspectNext{
 top:50%;transform:translateY(-50%);width:68px;height:68px;
 opacity:1;transition:left .25s ease,right .25s ease,background-color .15s ease,border-color .15s ease;
}
#opInspectControls #opInspectPrev{left:19%} 
#opInspectControls #opInspectNext{right:19%}
#opInspectControls #opInspectPrev img{transform:rotate(180deg)}
#opInspectControls #opInspectNext img{transform:none}
#opInspectControls #opInspectPrev:disabled,#opInspectControls #opInspectNext:disabled{opacity:.4!important;cursor:default}
#opInspectControls.op-details-open #opInspectPrev{left:3%}
#opInspectControls.op-details-open #opInspectNext{right:3%}
@media(max-width:800px){#opInspectControls #opInspectPrev,#opInspectControls #opInspectNext{width:48px;height:48px}#opInspectControls #opInspectPrev{left:8%}#opInspectControls #opInspectNext{right:8%}#opInspectControls.op-details-open #opInspectPrev{left:10px}#opInspectControls.op-details-open #opInspectNext{right:10px}}

/* OLDPLAY button primitives — v1.2.56
   A filled button is opt-in via .op-button--filled, independent of .active.
   Do not mix the outline hover rules with this class.
   --op-filled and --op-filled-hover are shared site design tokens. */
:root { --op-filled-foreground:#151a20; }
body button.op-button--filled,
#opInspectControls button.op-button--filled {
  background:var(--op-filled)!important;
  border:1px solid transparent!important;
  color:var(--op-filled-foreground)!important;
  box-shadow:none!important;
}
body button.op-button--filled:not(:disabled):hover:not(:disabled),
body #opInspectControls button.op-button--filled:not(:disabled):hover:not(:disabled) {
  background:var(--op-filled-hover)!important;
  border-color:transparent!important;
  color:var(--op-filled-foreground)!important;
  box-shadow:none!important;
}
body button.op-button--filled:disabled,
body #opInspectControls button.op-button--filled:disabled {
  background:var(--op-filled)!important;
  border-color:transparent!important;
  opacity:.4!important;
  cursor:default!important;
}
/* Arrow SVGs have their own black fill; never invert them on hover. */
#opInspectControls .op-inspect-nav.op-button--filled img { filter:none!important; }

/* v1.2.58 — hide the quick-like action while the details card is open.
   The like action belongs inside the future card interface. */
#opInspectControls.op-details-open #opInspectLike{display:none!important;}

/* v1.2.63 — reaction controls: the icon scales, not the pill. */
#opInspectCard .op-reaction-pill:hover,#opInspectCard .op-reaction-empty:hover{transform:none;border-color:#3c4655}
#opInspectCard .op-reaction-emoji{display:inline-block;transform:scale(1);transition:transform .16s ease;transform-origin:center}
#opInspectCard .op-reaction-pill:hover .op-reaction-emoji{transform:scale(1.22)}
#opInspectCard .op-reaction-pill--selected{border-color:#D9E8FC}
#opInspectCard .op-reaction-pill--selected:hover{border-color:#D9E8FC}
#opInspectCard .op-reaction-empty{font-size:inherit}
#opInspectCard .op-reaction-empty img{width:22px;height:22px;display:block}
#opInspectLike .op-quick-like-stack{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px}
#opInspectLike .op-quick-like-stack img{width:22px;height:22px;flex:none}
#opInspectLike .op-quick-like-count{position:static;transform:none;margin:0;font:400 14px/1 Unbounded,sans-serif;min-height:0;color:#D9E8FC}
#opInspectLike .op-quick-like-count:empty{display:none}

/* The native completeness select is rendered as a custom trigger. Disabled state follows the native control. */
#panel .op-select-trigger:disabled{opacity:.4!important;pointer-events:none!important;cursor:default!important}

/* v1.2.65 — quick reactions are an independent, expandable toolbar. */
#opInspectControls .op-quick-dock{position:absolute;right:3%;bottom:17%;height:76px;display:flex;align-items:center;gap:0;pointer-events:auto;border:1px solid transparent;border-radius:48px;box-sizing:border-box;transition:background .2s,border-color .2s,padding .2s}
#opInspectControls .op-quick-dock--expanded{background:#050607;border-color:#394550;padding:0 7px 0 12px}
#opInspectControls .op-quick-dock #opInspectLike{position:relative;flex:none;width:68px;height:68px;border-radius:50%;background:transparent}
#opInspectControls .op-quick-dock--expanded #opInspectLike{border-color:#D9E8FC}
#opInspectControls .op-quick-reaction-list{display:none;align-items:center;gap:0;height:100%}
#opInspectControls .op-quick-dock--expanded .op-quick-reaction-list{display:flex}
/* Shared reaction-pill component: same appearance and hover in card and quick dock. */
#opInspectCard .op-reaction-pill,
#opInspectControls .op-quick-reaction{
 display:inline-flex;align-items:center;justify-content:center;gap:8px;
 height:46px;min-width:46px;padding:0 13px;box-sizing:border-box;
 border:1px solid #3c4655;border-radius:28px;
 background:transparent;color:#D9E8FC;
 font:500 14px/1 Inter,sans-serif;cursor:pointer;
 transform:none;transition:border-color .16s;
}
#opInspectCard .op-reaction-pill:hover,
#opInspectControls .op-quick-reaction:hover{transform:none;border-color:#3c4655;background:transparent}
#opInspectCard .op-reaction-pill--selected,
#opInspectControls .op-quick-reaction.op-reaction-pill--selected,
#opInspectCard .op-reaction-pill--selected:hover,
#opInspectControls .op-quick-reaction.op-reaction-pill--selected:hover{border-color:#D9E8FC}
#opInspectCard .op-reaction-emoji,
#opInspectControls .op-quick-reaction .op-reaction-emoji{
 display:inline-block;font:normal 22px/1 sans-serif;
 position:relative;top:2px;
 transform:scale(1);transform-origin:center;transition:transform .16s ease;
}
#opInspectCard .op-reaction-pill:hover .op-reaction-emoji,
#opInspectControls .op-quick-reaction:hover .op-reaction-emoji{transform:scale(1.22)}
#opInspectControls .op-quick-reaction-list{gap:10px;padding-right:12px}
#opInspectControls .op-quick-badges{position:absolute;bottom:19%;left:18%;width:38%;display:flex;justify-content:center;align-items:center;gap:10px;flex-wrap:wrap;pointer-events:none}
#opInspectControls .op-quick-badges .op-condition-badge,#opInspectControls .op-quick-badges .op-box-chip{pointer-events:none}
#opInspectControls .op-quick-dock.hidden,#opInspectControls .op-quick-badges.hidden{display:none!important}
@media(max-width:900px){#opInspectControls .op-quick-reaction{min-width:42px;padding:0 7px}#opInspectControls .op-quick-dock{right:2%}#opInspectControls .op-quick-badges{left:14%;width:48%}}

/* Navigation links in account dropdown */
.op-account-sitemap{display:block;padding:10px 14px;color:#D9E8FC;text-decoration:none;font:400 14px Inter,sans-serif}.op-account-sitemap:hover{background:#45505e}

/* v1.2.87 — badges use the exact same components as the game detail card.
   Position the group beneath the centered inspection box, not in the left column. */
#opInspectControls #opQuickBadges.op-quick-badges {
  position:absolute;
  left:50%;
  bottom:5%;
  width:max-content;
  max-width:75vw;
  transform:translateX(-50%);
  display:flex;
  justify-content:center;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  pointer-events:none;
  z-index:5;
}
@media(max-width:900px) {
  #opInspectControls #opQuickBadges.op-quick-badges {
    left:50%;
    width:max-content;
    max-width:90vw;
  }
}


/* v1.2.89 — genuine transparent condition badges.
   The old transparent padding-box still allowed the border-box gradient
   to show through the middle. Paint ONLY the 1px ring using a mask. */
:is(#opInspectCard,#opInspectControls) .op-condition-badge {
  isolation:isolate;
  background:none !important;
  background-color:transparent !important;
  border:1px solid transparent !important;
  color:#D9E8FC !important;
}
:is(#opInspectCard,#opInspectControls) .op-condition-badge::before {
  content:"";
  position:absolute;
  inset:-1px;
  border-radius:inherit;
  padding:1px;
  background:var(--condition-gradient,linear-gradient(90deg,#30e3cf,#30e3cf));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  mask-composite:exclude;
  pointer-events:none;
}


/* Primary Add Game buttons — filled in normal and hover states. */
#panel #shelfTools #addBox, #panel #roomBoxTools #addFromCatalog {
  background-color:#D9E8FC !important; background-image:none !important;
  border:1px solid #D9E8FC !important; color:#10141C !important;
}
#panel #shelfTools #addBox:not(:disabled):hover, #panel #roomBoxTools #addFromCatalog:not(:disabled):hover {
  background-color:#57D2FF !important; background-image:none !important;
  border-color:#57D2FF !important; color:#10141C !important;
}
#panel #shelfTools #addBox:disabled, #panel #roomBoxTools #addFromCatalog:disabled {
  opacity:.4 !important; cursor:default !important; pointer-events:none !important;
}

/* Platform suggestion entry */
.op-platform-menu button.op-platform-suggest{display:block;width:100%;box-sizing:border-box;text-align:left;background:transparent!important;border:0!important;border-radius:0!important;color:#D9E8FC!important;cursor:pointer;font:400 14px/26px Inter,sans-serif!important}
.op-platform-menu button.op-platform-suggest:not(:disabled):hover,.op-platform-menu button.op-platform-suggest:not(:disabled):focus-visible{color:#57D2FF!important;background:transparent!important;outline:none}
/* Shared popup treatment */
#opSuggestPlatformOverlay[hidden]{display:none!important}
#opSuggestPlatformOverlay{position:fixed;inset:0;z-index:200010;background:rgba(0,0,0,.85);display:flex;align-items:center;justify-content:center;padding:20px;box-sizing:border-box;font-family:Inter,sans-serif}
.op-suggest-dialog{position:relative;width:100%;max-width:480px;box-sizing:border-box;border:1px solid #3B444E;background:#090909;border-radius:10px;padding:28px;color:#D9E8FC}
.op-suggest-dialog h2{font:500 23px/1.35 Unbounded,sans-serif;margin:0 56px 14px 0}
.op-suggest-dialog p{font:400 14px/1.55 Inter,sans-serif;color:#75808d;margin:0 0 24px}
.op-suggest-close{position:absolute;top:28px;right:28px;width:42px;height:42px;border:0!important;background:transparent!important;padding:0!important;cursor:pointer}
.op-suggest-close img{display:block;width:42px;height:42px}

.op-suggest-dialog label{display:block;font:400 12px/1.5 Inter,sans-serif;color:#59616b;margin-bottom:8px}
#opSuggestPlatformName{width:100%;height:46px;box-sizing:border-box;background:#000!important;border:1px solid #3B444E!important;border-radius:10px;color:#D9E8FC!important;padding:11px 12px;font:400 14px Inter,sans-serif;outline:0}
#opSuggestPlatformName:hover,#opSuggestPlatformName:focus{border-color:#D9E8FC!important}


.op-suggest-status{margin:12px 0 0!important;font:400 12px/1.5 Inter,sans-serif!important}
@media(max-width:600px){.op-suggest-dialog{padding:22px 18px}.op-suggest-dialog h2{font-size:20px}.op-suggest-close{top:22px;right:18px}}

body .op-suggest-close:hover img{content:url("icon-close-popup-hover.svg")!important}

/* OLDPLAY shared popup controls: reuse these classes for every new popup. */
#panel button.op-popup-primary:not(:disabled),body button.op-popup-primary:not(:disabled){
 background:#D9E8FC!important;border:1px solid #D9E8FC!important;color:#10141C!important;
 display:block;width:100%;height:46px;margin-top:24px;border-radius:10px;font:500 14px Inter,sans-serif;cursor:pointer;
}
#panel button.op-popup-primary:not(:disabled):hover,body button.op-popup-primary:not(:disabled):hover{
 background:#57D2FF!important;border-color:#57D2FF!important;color:#10141C!important;
}
body button.op-popup-primary:disabled{opacity:.4!important;cursor:default!important}
body button.op-popup-primary:disabled:hover{background:#D9E8FC!important;border-color:#D9E8FC!important;color:#10141C!important}
body button.op-popup-close,body button.op-popup-close:not(:disabled):hover{background:transparent!important;background-color:transparent!important;border:0!important;padding:0!important}
body button.op-popup-close:not(:disabled):hover img{filter:none!important}

/* Default textures: single Upload overlay, no Replace/Delete. */
#panel .texture-tile:has(> .op-texture-upload){position:relative;}
#panel .texture-tile > .op-texture-upload{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;display:none!important;align-items:center!important;justify-content:center!important;background:rgba(0,0,0,.67)!important;color:#D9E8FC!important;font:400 12px/18px Inter,sans-serif!important;}
#panel .texture-tile:hover > .op-texture-upload{display:flex!important;}
#panel .oldplay-tips:empty,#panel .op-room-tips:empty{display:none!important;border:0!important;margin:0!important;padding:0!important;}

/* Stable dark overlay on default texture slots: the hover shade belongs to the tile, not the button. */
#panel .texture-tile:has(> .op-texture-upload)::before{content:"";position:absolute;inset:0;background:rgba(0,0,0,.67);opacity:0;pointer-events:none;z-index:1;transition:none!important;}
#panel .texture-tile:has(> .op-texture-upload):hover::before{opacity:1;}
#panel .texture-tile > .op-texture-upload{background:transparent!important;z-index:2;}
#panel .texture-tile:has(> .op-texture-upload):hover > .op-texture-upload{background:transparent!important;}


/* v396: responsive editor controls; preserve existing component styling. */
#opMobileRoomControl{display:none}
@media (min-width:769px) and (max-width:1024px){
 #panel{width:308px!important;max-width:308px!important;right:25px!important}
 #panel .row>*{min-width:0}
 #panel input,#panel select{max-width:100%;min-width:0}
 #roomBar .room-caption{display:none!important}
}
@media(max-width:1024px){
 #toolbar #viewMode{width:66px!important;min-width:66px!important;max-width:66px!important;box-sizing:border-box!important;padding-left:0!important;padding-right:0!important;text-align:center!important}
 #roomBar .room-caption{display:none!important}
 #toolbar #orbit,#toolbar #reset{font-size:0!important;display:inline-flex;align-items:center;justify-content:center;min-width:46px;padding:0 12px!important}
 #toolbar #orbit img,#toolbar #reset img{margin:0!important;width:20px;height:20px}
}
@media(max-width:768px){
 #panel{display:none!important}
 #roomBar{left:16px!important;bottom:16px!important;padding:0!important;background:transparent!important;border:0!important;width:auto!important;min-width:0!important;max-width:calc(100vw - 110px)!important;overflow:visible!important}
 #roomBar #roomTabsViewport,#roomBar #newRoom,#roomBar #saveNow{display:none!important}
 #opMobileRoomControl{position:relative;display:flex;align-items:center;max-width:min(340px,calc(100vw - 110px));min-width:0;height:46px;border-radius:12px;background:var(--ink);color:#151a20}
 #roomBar #opMobileRoomTrigger{display:flex;align-items:center;gap:12px;min-width:0;max-width:100%;height:46px;flex:0 1 auto;padding:0 6px 0 14px!important;background:transparent!important;border:0!important;color:#151a20!important;font:400 16px var(--font-ui)!important;white-space:nowrap}
 #opMobileRoomName{display:block;min-width:0;overflow:hidden;text-overflow:clip;white-space:nowrap;mask-image:linear-gradient(to right,#000 calc(100% - 20px),transparent 100%)}
 #opMobileRoomTrigger .op-mobile-room-chevron{width:11px;height:11px;background:url('dreiecke.svg') center / contain no-repeat;transform:rotate(180deg);filter:brightness(0);flex:none;border:0;height:9px;width:13px}
 #roomBar #opMobileRoomDots{display:grid;place-items:center;flex:none;height:46px;min-width:32px;padding:0 10px!important;border:0!important;background:transparent!important;color:#151a20!important}
 #roomBar #opMobileRoomDots img{width:3px;height:14px;filter:brightness(0)!important}
 #opMobileRoomList{position:absolute;bottom:calc(100% + 10px);left:0;width:max-content;min-width:100%;max-width:min(340px,calc(100vw - 110px));max-height:min(45vh,300px);overflow-y:auto;background:#000;border:1px solid var(--line);border-radius:10px;padding:8px 0;z-index:50;box-shadow:0 12px 25px #0009}
 #opMobileRoomList[hidden]{display:none!important}
 #roomBar #opMobileRoomList .op-mobile-room-option{display:block;width:100%;padding:10px 14px!important;border:0!important;border-radius:0!important;background:transparent!important;color:var(--ink)!important;text-align:left;font:400 16px/22px var(--font-ui)!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
 #roomBar #opMobileRoomList .op-mobile-room-option:hover{color:#57D2FF!important}
 #roomBar #opMobileRoomList .op-mobile-room-option.is-current{box-shadow:inset 3px 0 0 #D9E8FC}
 /* Divider is an independent, inset rule, not part of the hovered Add room button. */
 #roomBar #opMobileRoomList .op-mobile-room-add{position:relative;border-top:0!important;margin-top:12px;padding-top:14px!important}
 #roomBar #opMobileRoomList .op-mobile-room-add::before{content:"";position:absolute;top:0;left:14px;right:14px;height:1px;background:var(--line);pointer-events:none;transition:none!important}
 #toolbar{right:16px!important;bottom:16px!important;gap:10px!important;max-width:calc(100vw - 32px)!important}
 #toolbar button{height:46px!important}
 #toast{bottom:80px!important}
}
@media(max-width:390px){
 #toolbar #orbit,#toolbar #reset{display:none!important}
 #roomBar{max-width:calc(100vw - 110px)!important}
 #opMobileRoomControl{max-width:calc(100vw - 110px)}
}

/* v401: stable editor typography and content-sized mobile room selector. */
@media(max-width:1024px){
 #toolbar #viewMode{font-size:14px!important;font-weight:500!important;line-height:20px!important}
}
@media(max-width:768px){
 #roomBar{width:max-content!important;max-width:min(340px,calc(100vw - 220px))!important;min-width:0!important}
 #opMobileRoomControl{width:max-content!important;max-width:100%!important;min-width:0!important;box-sizing:border-box!important}
 #roomBar #opMobileRoomTrigger{font-size:14px!important;flex:0 1 auto!important;min-width:0!important;max-width:calc(100% - 32px)!important;gap:12px!important}
 #opMobileRoomName{font-size:14px!important;min-width:0!important;flex:0 1 auto!important;max-width:100%!important}
 #roomBar #opMobileRoomDots{flex:0 0 32px!important;width:32px!important;min-width:32px!important}
 #opMobileRoomList{max-width:100%!important;box-sizing:border-box!important}
}
@media(max-width:390px){
 #roomBar{max-width:min(340px,calc(100vw - 108px))!important}
}

/* v402: room selector typography and fade only for genuinely clipped names. */
@media(max-width:768px){
 #roomBar #opMobileRoomTrigger{font-weight:500!important}
 #roomBar #opMobileRoomName{font-weight:500!important;mask-image:none!important;-webkit-mask-image:none!important}
 #roomBar #opMobileRoomName.is-truncated{
   mask-image:linear-gradient(to right,#000 calc(100% - 20px),transparent 100%)!important;
   -webkit-mask-image:linear-gradient(to right,#000 calc(100% - 20px),transparent 100%)!important;
 }
}

/* v403: keep the Add room option fully readable without widening the room trigger. */
@media (max-width:768px){
 #opMobileRoomList{min-width:max(100%, 170px)!important;max-width:min(340px, calc(100vw - 32px))!important;}
 #roomBar #opMobileRoomList .op-mobile-room-add{white-space:nowrap!important;text-overflow:clip!important;}
}

/* v404: mobile context toolbar; all desktop editor actions remain the source of truth. */
#opEditorMobileActions,#opMobileSettingsBackdrop,#opMobileSettingsHeader{display:none}
@media(max-width:768px){
 #opEditorMobileActions:not([hidden]){display:block;position:fixed;right:0;top:0;bottom:0;z-index:11;pointer-events:none}
 #opEditorMobileActions button{pointer-events:auto}
 #opEditorMobileActions .op-mobile-actions-top{position:absolute;right:0;top:calc(64px + 40px);display:flex;flex-direction:column;gap:10px}
 #opEditorMobileActions .op-mobile-actions-context{position:absolute;right:0;top:calc(64px + 40px);display:flex;flex-direction:column;gap:10px}
 #opEditorMobileActions .op-mobile-actions-top[hidden]{display:none!important}
 #opEditorMobileActions .op-mobile-actions-context[hidden]{display:none!important}
 #opEditorMobileActions .op-mobile-action{width:60px;height:56px;display:grid;place-items:center;padding:0!important;border:1px solid #3b444e!important;border-right:0!important;border-radius:12px 0 0 12px!important;background:#000!important;box-sizing:border-box;color:#d9e8fc!important}
 #opEditorMobileActions .op-mobile-action[hidden]{display:none!important}
 #opEditorMobileActions .op-mobile-action img{width:27px;height:27px;object-fit:contain;pointer-events:none}
 /* Filled mobile actions: single authoritative rule. */
 #opEditorMobileActions button.op-mobile-action.op-mobile-primary:not(:disabled){background:#D9E8FC!important;border-color:#D9E8FC!important}
 #opEditorMobileActions button.op-mobile-action.op-mobile-primary:not(:disabled):is(:hover,:focus-visible,:active),
 #opEditorMobileActions button.op-mobile-action.op-mobile-primary.op-touch-pressed:not(:disabled){background:#57D2FF!important;border-color:#57D2FF!important}
 #opEditorMobileActions .op-mobile-primary img{width:28px;height:28px}
 #opEditorMobileActions .op-mobile-action.active{border-color:#d9e8fc!important}
 #opEditorMobileActions .op-mobile-action:disabled{opacity:.35;pointer-events:none}
 #opEditorMobileActions .op-mobile-action:not(:disabled):hover{border-color:#57d2ff!important}
 #toolbar #orbit,#toolbar #reset{display:grid!important;position:fixed!important;right:0!important;width:50px!important;min-width:50px!important;height:46px!important;padding:0!important;border-radius:12px 0 0 12px!important;z-index:12;place-items:center;box-sizing:border-box}
 #toolbar #reset{bottom:calc(16px + 46px + 40px)!important}
 #toolbar #orbit{bottom:calc(16px + 46px + 40px + 56px)!important}
 #toolbar #orbit img,#toolbar #reset img{width:24px!important;height:24px!important}
 #panel.op-mobile-settings-open{display:block!important;position:fixed!important;inset:8vh 12px 8vh 12px!important;z-index:102!important;width:auto!important;max-width:none!important;max-height:none!important;overflow-y:auto!important;padding:64px 20px 24px!important;border-radius:12px!important;background:#000!important}
 #panel.op-mobile-settings-open .switch{display:none!important}
 #panel.op-mobile-settings-open #shelfTools{display:none!important}
 #panel.op-mobile-settings-open #roomTools:not(.hidden) #roomShelfTools{display:none!important}
 #panel.op-mobile-settings-open #boxTools:not(.hidden),#panel.op-mobile-settings-open #roomBoxTools:not(.hidden){display:block!important}
 #opMobileSettingsBackdrop:not([hidden]){display:block;position:fixed;inset:0;background:rgba(0,0,0,.76);z-index:100}
 #opMobileSettingsHeader:not([hidden]){display:flex;position:fixed;top:calc(8vh + 12px);left:32px;right:32px;z-index:103;align-items:center;justify-content:space-between;font:500 16px Inter,sans-serif;color:#d9e8fc;pointer-events:none}
 #opMobileSettingsClose{pointer-events:auto;border:0!important;background:transparent!important;color:#d9e8fc!important;font:300 32px/32px Inter,sans-serif!important;padding:0 4px!important}
 #panel.op-mobile-settings-open .row>*{min-width:0}
 #panel.op-mobile-settings-open input,#panel.op-mobile-settings-open select{max-width:100%;min-width:0}
}
@media(max-width:390px){
 #toolbar #orbit,#toolbar #reset{display:grid!important}
}

/* v405: mobile editor action states and camera alignment. */
@media (max-width:768px){
 /* Outlined actions have no black fill; preserve their outline and active state. */
 #opEditorMobileActions .op-mobile-action:not(.op-mobile-primary){
  background:transparent!important;
 }
 #opEditorMobileActions .op-mobile-action:not(.op-mobile-primary):hover{
  background:transparent!important;
 }
 /* Center the icon independently of the button's hidden text node. */
 #toolbar #orbit,#toolbar #reset{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  right:-1px!important;
  overflow:hidden!important;
  font-size:0!important;
  line-height:0!important;
 }
 #toolbar #orbit img,#toolbar #reset img{
  display:block!important;
  flex:0 0 24px!important;
  margin:0!important;
  transform:none!important;
 }
}


/* v406: Preview camera visibility. */
@media(max-width:768px){
 /* Do not override the editor's .hidden class with a forced display. */
 #toolbar #orbit.hidden,#toolbar #reset.hidden{display:none!important}
}

@media(max-width:768px){
 body.op-mobile-preview #opEditorMobileActions{display:none!important}
 body.op-mobile-preview #toolbar #orbit{display:none!important}
}

/* v408: Cancel replaces return-to-shelf on mobile. Keep primary buttons filled. */
@media(max-width:768px){
 html:not(.op-public-renderer) body #returnBox{display:none!important}

}

/* v410: mobile inspection actions share one circle and icon size.
   Keep the reaction dock clear of the bottom-right camera control. */
@media (max-width:768px){
 #opInspectControls .op-inspect-actions .op-inspect-circle,
 #opInspectControls .op-quick-dock #opInspectLike{
  width:48px;height:48px;
 }
 #opInspectControls .op-inspect-actions .op-inspect-circle img,
 #opInspectControls .op-quick-dock #opInspectLike .op-quick-like-stack img{
  width:20px;height:20px;
 }
 #opInspectControls .op-quick-dock{
  right:10px;
  bottom:25%;
  height:54px;
 }
}

/* v411: full-width game information on mobile; the 3D box is hidden while details are open. */
@media(max-width:768px){
 #opInspectCard .op-inspect-card-content{
  left:0;
  width:100%;
  padding:28px 24px 32px;
 }
 #opInspectCard .op-inspect-card-heading{min-width:0;}
 #opInspectCard .op-inspect-title{overflow-wrap:anywhere;}
 #opInspectShadow{display:none!important;}
}

/* v412 — mobile game settings: standard outlined close and opaque sticky heading. */
@media(max-width:768px){
 #opMobileSettingsHeader:not([hidden]){
  top:8vh;left:12px;right:12px;min-height:68px;box-sizing:border-box;
  padding:14px 20px;background:#000;border:1px solid #4b5260;border-bottom:0;border-radius:12px 12px 0 0;
 }
 #opMobileSettingsClose.op-popup-close{
  display:grid!important;place-items:center;flex:0 0 42px;
  width:42px;height:42px;border:0!important;
  border-radius:50%!important;background:transparent!important;padding:0!important;
 }
 #opMobileSettingsClose.op-popup-close img{width:42px;height:42px;display:block}
 #opMobileSettingsClose.op-popup-close:hover img{content:url("icon-close-popup-hover.svg")}
 #panel.op-mobile-settings-open{padding-top:84px!important}
}

/* v415: active shelf size uses a light fill; its SVG must be dark for contrast. */
@media (max-width:768px){
 #opEditorMobileActions .op-mobile-size.active img{filter:brightness(0)!important}
}

/* v416: game information is a self-contained mobile modal, not a side card. */
#opMobileInspectHeader{display:none}
@media(max-width:768px){
 #opInspectCard:not(.hidden){
  position:fixed!important;inset:8vh 12px!important;left:12px!important;top:8vh!important;
  width:auto!important;height:auto!important;z-index:105!important;
  border:1px solid #394550;border-radius:12px;background:#10121a;
  box-shadow:0 22px 80px #000b;pointer-events:auto;
 }
 #opMobileInspectHeader{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  position:absolute;top:0;left:0;right:0;height:76px;padding:0 20px;
  background:#10121a;z-index:2;box-sizing:border-box;
  font:500 18px/1.3 Inter,sans-serif;color:#D9E8FC;
 }
 #opMobileInspectClose.op-popup-close{
  position:static;display:grid!important;place-items:center;flex:none;
  width:42px;height:42px;border:0!important;border-radius:50%;
  background:transparent!important;padding:0!important;
 }
 #opMobileInspectClose.op-popup-close img{width:42px;height:42px;display:block}
 #opMobileInspectClose.op-popup-close:hover img{content:url("icon-close-popup-hover.svg")}
 #opInspectCard .op-inspect-card-content{
  position:absolute;inset:76px 0 0 0;left:0!important;top:76px!important;
  width:100%!important;height:calc(100% - 76px)!important;
  padding:16px 24px 32px!important;overflow-y:auto;
 }
 #opInspectControls.op-details-open #opInspectPrev,
 #opInspectControls.op-details-open #opInspectNext,
 #opInspectControls.op-details-open .op-inspect-actions,
 #opInspectControls.op-details-open .op-quick-dock,
 #opInspectControls.op-details-open .op-quick-badges{display:none!important}
}

/* v418: editor-only mobile Preview keeps badges in the information modal. */
@media (max-width:768px){
 html:not(.op-public-renderer) body.op-mobile-preview #opInspectControls #opQuickBadges{
  display:none!important;
 }
 /* Leave breathing room after the final reaction, including on short screens. */
 #opInspectCard .op-inspect-card-content{
  box-sizing:border-box;
  padding-bottom:72px!important;
 }
}

/* Suggest platform: explanatory note below the submit button. */
.op-suggest-dialog .op-suggest-disclaimer{margin:12px 0 0!important;color:#75808d;font:400 12px/1.5 Inter,sans-serif!important}