/* Floralia — control schemes (js/controls.js) and the ROV-style phone layout (js/mobilepad.js), 2026-10-18 */

/* ---------- settings › การควบคุม ---------- */
.ctl-set { display: flex; flex-direction: column; gap: 8px; margin: 0 4px; }
.ctl-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.ctl-card {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px; min-height: 112px; padding: 10px 6px 8px;
  border-radius: 14px; border: 2px solid rgba(217, 164, 67, 0.45); background: rgba(14, 18, 38, 0.55); color: #f3e6c4; cursor: pointer;
  font-family: Mali, Fredoka, sans-serif; text-align: center; transition: transform 0.12s, border-color 0.12s, background 0.12s;
}
.ctl-card:hover { border-color: #e8c06a; background: rgba(40, 34, 20, 0.6); }
.ctl-card.on { border-color: #ffd36b; background: linear-gradient(180deg, rgba(120, 86, 24, 0.55), rgba(40, 28, 10, 0.65)); box-shadow: 0 0 0 2px rgba(255, 211, 107, 0.35), inset 0 0 0 1px rgba(255, 240, 200, 0.25); }
.ctl-card b { font-size: 17px; line-height: 1.2; color: #ffe7a6; }
.ctl-card small { font-size: 12.5px; line-height: 1.3; color: #d9cba8; }
.ctl-card em { position: absolute; top: -9px; right: 6px; padding: 1px 8px; border-radius: 999px; background: #ffd36b; color: #2b1d0e; font: 700 11.5px/1.5 Mali, sans-serif; font-style: normal; }
.ctl-ic { display: grid; place-items: center; height: 34px; min-width: 34px; font: 700 22px/1 Fredoka, sans-serif; font-style: normal; color: #fff3cf; }
.ctl-ic-wasd { font-size: 15px; letter-spacing: 1px; padding: 0 6px; border: 2px solid currentColor; border-radius: 8px; height: 28px; margin: 3px 0; }
.ctl-help { margin: 0; padding: 6px 8px; border-radius: 10px; background: rgba(0, 0, 0, 0.25); font: 500 13.5px/1.7 Mali, sans-serif; color: #f1e4c2; }
.ctl-help kbd, .ctl-fixed kbd { display: inline-block; min-width: 20px; padding: 0 5px; margin: 0 1px; border-radius: 5px; background: #f3dfa8; color: #2b1d0e; font: 700 12px/18px Fredoka, sans-serif; text-align: center; box-shadow: 0 1px 0 rgba(0, 0, 0, 0.5); }
.ctl-opts { flex-wrap: wrap; }
#ui .bw-pause .set-page .ctl-opts .btn.ctl-opt { height: 40px; min-height: 40px; font-size: 15.5px; flex: 1 1 auto; }
.ctl-opt.on { box-shadow: inset 0 0 0 2px rgba(127, 224, 122, 0.85); }
.ctl-keys { border-radius: 12px; background: rgba(0, 0, 0, 0.22); padding: 4px 8px 8px; }
.ctl-keys summary { cursor: pointer; padding: 6px 2px; font: 700 15.5px Mali, sans-serif; color: #ffe7a6; }
.ctl-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 12px; }
.ctl-key { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto; align-items: center; column-gap: 6px; padding: 3px 2px; border-bottom: 1px solid rgba(217, 164, 67, 0.16); }
.ctl-key span { font: 600 14px/1.25 Mali, sans-serif; color: #f1e4c2; }
.ctl-key small { grid-column: 1 / -1; font: 500 11px/1.2 Fredoka, Mali, sans-serif; color: #b8a982; min-height: 0; }
.ctl-bind {
  min-width: 58px; height: 30px; padding: 0 10px; border-radius: 8px; border: 2px solid #c9a24a; background: #f3dfa8; color: #2b1d0e; cursor: pointer;
  font: 700 15px/1 Fredoka, Mali, sans-serif; box-shadow: 0 2px 0 rgba(0, 0, 0, 0.45);
}
.ctl-bind:hover { filter: brightness(1.08); }
.ctl-key.cap .ctl-bind { background: #ffd36b; border-color: #fff3c4; animation: ctl-blink 0.9s ease-in-out infinite; font-size: 13px; font-family: Mali, sans-serif; }
@keyframes ctl-blink { 50% { box-shadow: 0 0 0 3px rgba(255, 211, 107, 0.55); } }
.ctl-fixed { margin: 8px 0 4px; font: 500 12.5px/1.9 Mali, sans-serif; color: #d9cba8; }
.ctl-note { margin: 0; font: 500 12.5px/1.45 Mali, sans-serif; color: #c9bb93; }
/* (the light book skins: dark ink on the pale page) */
:root[data-booklight] .ctl-card { background: rgba(255, 255, 255, 0.45); color: #3a2a14; border-color: color-mix(in srgb, var(--bk-acc, #a07a2a) 55%, transparent); }
:root[data-booklight] .ctl-card b { color: var(--bk-acc, #6a4a14); }
:root[data-booklight] .ctl-card small, :root[data-booklight] .ctl-key span, :root[data-booklight] .ctl-help, :root[data-booklight] .ctl-fixed, :root[data-booklight] .ctl-note { color: #3a2a14; }
:root[data-booklight] .ctl-card.on { background: rgba(255, 226, 150, 0.7); }
:root[data-booklight] .ctl-ic { color: #3a2a14; }
:root[data-booklight] .ctl-help, :root[data-booklight] .ctl-keys { background: rgba(255, 255, 255, 0.35); }
:root[data-booklight] .ctl-keys summary { color: var(--bk-acc, #6a4a14); }

/* ---------- the phone layout ---------- */
#mpad { position: absolute; inset: 0; z-index: 1; pointer-events: none !important; --s: 1; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
#mpad[hidden] { display: none; }
#mpad > * { position: absolute; pointer-events: auto; touch-action: none; }
#mpad .mp-zone { background: transparent; }
/* the joystick: a ring with a knob; at rest it waits faintly bottom-left */
#mpad .mp-base, #mpad .mp-knob { left: 0; top: 0; pointer-events: none; border-radius: 50%; transition: opacity 0.15s; }
#mpad .mp-base { background: radial-gradient(circle, rgba(16, 20, 44, 0.18) 0 55%, rgba(16, 20, 44, 0.42) 56% 100%); box-shadow: 0 0 0 2px rgba(255, 226, 150, 0.55), inset 0 0 0 1px rgba(0, 0, 0, 0.35); opacity: 0.5; }
#mpad .mp-knob { background: radial-gradient(circle at 40% 35%, #fff6da, #e8c06a 55%, #9a6f22 100%); box-shadow: 0 0 0 2px #2c2533, 0 3px 8px rgba(0, 0, 0, 0.45); opacity: 0.62; }
#mpad.mp-stick-on .mp-base { opacity: 1; }
#mpad.mp-stick-on .mp-knob { opacity: 1; }
/* a round button: dark glass, the gold ring of the HUD (hud_portrait_ring) over it */
#mpad .mp-btn {
  padding: 0; margin: 0; border: 0; border-radius: 50%; cursor: pointer; display: grid; place-items: center; overflow: visible; color: #fff;
  background: radial-gradient(circle at 50% 40%, rgba(44, 52, 92, 0.92), rgba(12, 14, 30, 0.94) 70%);
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.45); transition: transform 0.08s, filter 0.12s;
}
#mpad .mp-btn::after { content: ''; position: absolute; inset: -7%; border-radius: 50%; pointer-events: none; background: url(../assets/ui_book/hud_portrait_ring.png) center / 100% 100% no-repeat; }
#mpad .mp-btn.down { transform: scale(0.92); filter: brightness(1.25); }
#mpad .mp-btn > canvas, #mpad .mp-btn > img { position: absolute; inset: 6%; width: 88%; height: 88%; border-radius: 50%; pointer-events: none; }
#mpad .mp-btn > img { object-fit: contain; inset: 16%; width: 68%; height: 68%; border-radius: 0; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.6)); }
#mpad .mp-cd { position: absolute; inset: 6%; border-radius: 50%; pointer-events: none; }
#mpad .mp-n { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; font: 700 calc(19px * var(--s)) / 1 Fredoka, sans-serif; color: #fff; -webkit-text-stroke: 3px #121730; paint-order: stroke fill; }
#mpad .mp-mp { position: absolute; right: 2%; bottom: -4%; pointer-events: none; font: 700 calc(11px * var(--s)) / 1 Fredoka, sans-serif; font-style: normal; color: #bfe6ff; -webkit-text-stroke: 2.5px #121730; paint-order: stroke fill; }
#mpad .mp-sk.empty > canvas, #mpad .mp-sk.passive > canvas { opacity: 0.35; filter: grayscale(0.7); }
#mpad .mp-sk.empty { background: radial-gradient(circle, rgba(20, 24, 44, 0.55), rgba(10, 12, 26, 0.6)); }
#mpad .mp-sk.nomp > canvas { filter: saturate(0.4) brightness(0.65) sepia(0.4) hue-rotate(180deg); }
#mpad .mp-sk.nomp .mp-mp { color: #ff9a9a; }
#mpad .mp-sk.buff::before { content: ''; position: absolute; inset: -3%; border-radius: 50%; box-shadow: 0 0 10px 3px rgba(255, 215, 106, 0.85); animation: mp-glow 1s ease-in-out infinite; pointer-events: none; }
#mpad .mp-sk.aim::before { content: ''; position: absolute; inset: -6%; border-radius: 50%; box-shadow: 0 0 0 3px #7fe07a, 0 0 12px 2px rgba(127, 224, 122, 0.8); pointer-events: none; }
@keyframes mp-glow { 50% { opacity: 0.45; } }
/* the attack button: bigger, the weapon in hand */
#mpad .mp-atk { background: radial-gradient(circle at 50% 38%, rgba(120, 62, 40, 0.95), rgba(40, 14, 12, 0.96) 72%); }
#mpad .mp-atk::after { inset: -6%; }
/* the ultimate: a warm gold glow */
#mpad .mp-ult { background: radial-gradient(circle at 50% 40%, rgba(110, 76, 22, 0.95), rgba(26, 16, 6, 0.95) 72%); }
#mpad .mp-ult::before { content: ''; position: absolute; inset: -12%; border-radius: 50%; background: radial-gradient(circle, rgba(255, 210, 110, 0.4), transparent 68%); pointer-events: none; }
/* the dodge: its stamina as a blue ring */
#mpad .mp-dodge { background: none; }
#mpad .mp-dodge .mp-stam { position: absolute; inset: 0; border-radius: 50%; -webkit-mask: radial-gradient(circle, transparent 0 63%, #000 64%); mask: radial-gradient(circle, transparent 0 63%, #000 64%); }
#mpad .mp-dodge span { position: relative; display: grid; place-items: center; width: 74%; height: 74%; border-radius: 50%; background: radial-gradient(circle at 50% 40%, rgba(44, 70, 110, 0.95), rgba(12, 18, 36, 0.95) 70%); font: 700 calc(15px * var(--s)) / 1 Mali, sans-serif; color: #e6f6ff; -webkit-text-stroke: 2.5px #0b1024; paint-order: stroke fill; }
#mpad .mp-dodge.low span { filter: brightness(0.6) grayscale(0.5); }
#mpad .mp-dodge::after { inset: -5%; }
/* the item buttons: small */
#mpad .mp-it::after { inset: -9%; }
#mpad .mp-it .mp-cnt { position: absolute; right: -6%; bottom: -10%; pointer-events: none; text-decoration: none; font: 700 calc(11px * var(--s)) / 1 Fredoka, sans-serif; color: #fff; -webkit-text-stroke: 2.5px #121730; paint-order: stroke fill; }
#mpad .mp-it .mp-n { font-size: calc(14px * var(--s)); }
#mpad .mp-it.empty .mp-cnt { right: auto; bottom: auto; inset: 0; display: grid; place-items: center; font-size: calc(20px * var(--s)); color: rgba(255, 233, 184, 0.7); }
#mpad .mp-it.out > canvas { opacity: 0.35; }
#mpad .mp-it.pick::before { content: ''; position: absolute; inset: -8%; border-radius: 50%; box-shadow: 0 0 0 3px #ffd98a, 0 0 10px #ffd98a; pointer-events: none; animation: mp-glow 0.9s ease-in-out infinite; }
/* talk / open / use: a green button that shows up only when there is something to use */
#mpad .mp-use { background: radial-gradient(circle at 50% 40%, rgba(60, 130, 70, 0.95), rgba(14, 46, 22, 0.95) 72%); animation: mp-pop 0.25s ease-out; }
#mpad .mp-use span { font: 700 calc(14px * var(--s)) / 1.05 Mali, sans-serif; color: #fff; -webkit-text-stroke: 2.5px #0d2410; paint-order: stroke fill; text-align: center; max-width: 90%; }
#mpad .mp-use[hidden] { display: none; }
@keyframes mp-pop { from { transform: scale(0.6); opacity: 0; } }
/* aiming: the ring round the skill being dragged, its knob, and the ✕ spot */
#mpad .mp-aim { pointer-events: none !important; border-radius: 50%; background: radial-gradient(circle, rgba(127, 224, 122, 0.08), rgba(127, 224, 122, 0.2) 70%); box-shadow: 0 0 0 2px rgba(190, 255, 186, 0.75), inset 0 0 0 1px rgba(0, 0, 0, 0.3); display: grid; place-items: center; }
#mpad .mp-aim[hidden], #mpad .mp-cancel[hidden] { display: none; }
#mpad .mp-aim.off { background: radial-gradient(circle, rgba(255, 90, 80, 0.08), rgba(255, 90, 80, 0.2) 70%); box-shadow: 0 0 0 2px rgba(255, 150, 140, 0.75); }
#mpad .mp-aim-knob { width: 36%; height: 36%; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #f4fff0, #7fe07a 60%, #2f7a30); box-shadow: 0 0 0 2px #14301a, 0 2px 6px rgba(0, 0, 0, 0.5); }
#mpad .mp-cancel { pointer-events: none !important; border-radius: 50%; display: grid; place-items: center; align-content: center; background: rgba(40, 10, 10, 0.72); box-shadow: 0 0 0 2px rgba(255, 140, 130, 0.8); color: #ffd2cc; text-align: center; transition: transform 0.1s; }
#mpad .mp-cancel b { font: 700 calc(20px * var(--s)) / 1 Fredoka, sans-serif; }
#mpad .mp-cancel small { font: 600 calc(10.5px * var(--s)) / 1.1 Mali, sans-serif; }
#mpad .mp-cancel.hot { transform: scale(1.18); background: rgba(200, 40, 30, 0.9); color: #fff; box-shadow: 0 0 0 3px #ffd2cc, 0 0 14px rgba(255, 80, 60, 0.9); }
/* while aiming the other buttons fade back a little */
#mpad.mp-aiming .mp-btn:not(.aim) { opacity: 0.55; }

/* ---------- the rest of the HUD in the phone layout ---------- */
#ui.ctl-mobile #chat .chat-feed { max-height: calc(3 * 1.35em + 10px) !important; font-size: max(9.5px, calc(11px * var(--u))); line-height: 1.35; }
/* (the chat lies over the joystick's area: its lines let a thumb through; its buttons, a shared spot's 📍 chip and a
   name still take a tap) */
#ui.ctl-mobile #chat .chat-feed, #ui.ctl-mobile #chat .chat-feed * { pointer-events: none !important; }
#ui.ctl-mobile #chat .chat-feed :is(.cl-chip, .cl-chip *, .who) { pointer-events: auto !important; }
#ui.ctl-mobile #chat .chat-head { display: none; }
#ui.ctl-mobile #questbox { width: min(calc(250px * var(--u)), 31vw); overflow-y: auto; }
#ui.ctl-mobile .auto-btn .auto-label { display: none; }
/* (the world-event banner only tells: a thumb on the joystick under it goes through - every scheme) */
#ui > .we-banner { pointer-events: none; }
#mpad.mp-fixed .mp-base { opacity: 0.85; }
#mpad.mp-fixed .mp-knob { opacity: 0.9; }
#mpad .mp-rotate { pointer-events: none !important; left: 50%; top: 42%; transform: translateX(-50%); padding: 8px 16px; border-radius: 999px; background: rgba(14, 18, 38, 0.85); border: 2px solid #c9a24a; color: #ffe7a6; font: 700 14px/1.3 Mali, sans-serif; white-space: nowrap; }
#mpad .mp-rotate[hidden] { display: none; }